如何解决如何在Google协作平台上添加轮播?
我要实现的目标是创建一个醒目的旋转木马。我不喜欢Google网站上当前使用的那个。我将以下代码用于徽标轮播,但我只需要图像。我是编码新手,需要经验丰富的编码人员提供帮助,他们确切地知道该怎么做以及为什么?我想了解我在做什么。我将感谢您在此问题上能获得的所有帮助。预先谢谢你。
<div class=”container”>
<!--<h2> Our Partners/ Our Clients</h2> →
<section class=”customer-logos slider”>
<div class=”slide”><img src=”link”</div>
<div class=”slide”><img src=”link”</div>
<div class=”slide”><img src=”link”</div>
<div class=”slide”><img src=”link”</div>
<div class=”slide”><img src=”link”</div>
<div class=”slide”><img src=”link”</div>
<div class=”slide”><img src=”link”</div>
<div class=”slide”><img src=”link”</div>
<div class=”slide”><img src=”link”</div>
<div class=”slide”><img src=”link”</div>
</section>
</div>
<script>
$ (document) .ready(function){
$ (‘ .customer-logos’) .slick ({
slicktoshow: 4;
slidestoscroll: 1;
autoplay: true;
autoplayspeed: 1500;
arrows: false;
dots: false;
pauseonhover: false;
responsive: [{
Breakpoint: 768;
settings: {
slidestoshow: 4;
}
}]
}];
}];
</script>
<!DOCTYPE html>
<html>
<head>
<link href:”//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/boostrap.min.css” rel=”stylesheet” id=”bootstrap-css>
<script src=”//madcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootsrap.min.js”</script>
<script src=”//cdnjs.cloudfare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudfare.com/ajax/libs/slick-carousel/1.6.0/slick.js”></script>
<style>
body{
overflow: hidden;
}
h2{
text-align: center;
padding: 20px;
}
/ * Slider */
.slick-slider {
}
.slick-slider img{
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-Khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list: focus
{
outline:none;
}
.slick-list .dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,.slick-slider .slick-list
{
-webkit-transform: translate3d(0,0);
-moz-tranform: translate3d(0,0);
-ms-transform: translate3d(0,0);
-0-transform: translate3d(0,0);
transform: translate3d(0,0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track: before;
.slick-track: after;
{
display:table;
content: “”;
}
.slick-track: after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-verticial .slick-slide
{
display: none;
height: auto;
border: 1 px solid transparent;
}
.slick-arrow .slick-hidden{
display: none;
}
</style>
</head>
<body>
<div class=”container”>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。