如何解决当我添加4个元素时，“滑动”滑块中的箭头消失
帮助，如果我将参数4添加到slidesToShow，则箭头消失。我试过使用循环：true。我该如何解决？
function testWebP(callback) {
var webP = new Image();
webP.onload = webP.onerror = function () {
callback(webP.height == 2);
};
webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
}
testWebP(function (support) {
if (support == true) {
document.querySelector('body').classList.add('webp');
} else {
document.querySelector('body').classList.add('no-webp');
}
});
// Fix problem of the WEBP
$(document).ready(function() {
$('.header__burger').click(function(event) {
$('.header__burger,.header__list').toggleClass('active');
$('body').toggleClass('lock');
});
});
$(document).ready(function(){
$('.slider').slick({
arrows:true,adaptiveHeight: true,slidesToShow: 3,infinite: true,slidesToScroll: 1
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<link rel="stylesheet" href="css/style.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<title>Startup Web-studio</title>
</head>
<body>
@@include('_header.html')
@@include('_services.html')
@@include('_about.html')
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="js/script.min.js"></script>
</body>
</html>
<section class="about">
<div class="container">
<h1>About Us</h1>
<h3>Lorem ipsum dolor sit amet,consetetur sadipscing elitr amet</h3>
<div class="about__main">
<h4>Lorem ipsum dolor sit amet,consetetur sadipscing
elitr,sediam nonumy eirmod tempor invidunt
ut labore et dolore aliquyam erat,sed diam voluptua.
At vero eos etaccusam et justo dolores et ea rebum.
Stet clita kasd gubergren,no sea takimata sanctus est
ipsum dolor sit amet. Lorem ipsum dolor et dolore
aliquyam erat.
<p>Lorem ipsum dolor sit amet. Lorem ipsum eat.</h4>
<h4>
Lorem ipsum dolor sit amet,consetetur sadipscing elitr,sediam nonumy eirtempor invidunt ut
labore et dolore aliquyam erat,sed diam voluptua.
At vero eos eaccusamet justo dolores et ea rebum.
Stet clita kasd gubergren,no sea takimata sanctus est
Lorem ipsum dolor sit amet. Lorem ipsum dolor et dolore
aliquyam erat.
<p>Loreipsum dolor sit amet. Lorem ipsum dolor et.</p>
</h4>
</div>
<div class="slider">
<div class="slider__item">
<img src="img/1.png">
</div>
<div class="slider__item">
<img src="img/2.png">
</div>
<div class="slider__item">
<img src="img/3.png">
</div>
<div class="slider__item">
<img src="img/4.png">
</div>
</div>
</div>
</section>
.about {
background-color: #f8f8f8;
width: 100%;
height: 850px;
padding-top: 100px;
h4 {
font-size: 12px;
font-family: "RobotoSlab";
color: rgb(85,85,85);
line-height: 1.714;
text-align: left;
font-weight: 500;
margin: 0 0 0 35px;
}
}
}
h1 {
text-align: center;
font-size: 20px;
font-family: "Montserrat";
color: rgb(85,85);
text-transform: uppercase;
font-weight: 600;
}
h1:after {
content: "";
height: 2px;
position: relative;
bottom: 25px;
width: 50px;
background-color: #555555;
display: block;
margin: 50px auto 0;
}
h3 {
text-align: center;
font-size: 16px;
font-family: "RobotoSlab";
color: rgb(85,85);
}
.about__main {
display: flex;
margin: 75px 0 0 65px;
justify-content: space-around;
h4 {
font-size: 14px;
font-family: "RobotoSlab";
color: rgb(85,85);
line-height: 1.714;
text-align: left;
font-weight: 500;
margin: 0 0 0 35px;
}
}
.slick-list {
overflow: hidden;
}
.slick-track {
display: flex;
align-items: flex-start;
}
.slider {
position: relative;
margin-top: 75px;
margin-left: 100px;
img {
height: 225px;
}
.slick-arrow {
position: absolute;
font-size: 0;
top: 45%;
z-index: 10;
height: 30px;
width: 30px;
background: #c0301c;
}
.slick-prev {
transition: all 0.4s ease 0s;
left: 0;
background-image: url('../img/left.png');
background-position: 45% 45%;
background-repeat: no-repeat;
}
.slick-prev:hover {
background-image: url('../img/left.png');
background-color: #8e8e8e;
}
.slick-next {
right: 0;
background-image: url('../img/right.png');
background-position: 55% 45%;
background-repeat: no-repeat;
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
