Помогите если я добавляю 4 параметр slidesToShow: то у меня пропадают стрелки
Если я добавляю 4 элемента то на моем слайдере пропадают стрелки, я пробовал loop: true, Помогите!
$(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/[email protected]/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/[email protected]/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, 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, 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, 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;
}
}
}
Ответы (2 шт):
Автор решения: Aleksandr
→ Ссылка
Slick-слайдер прячет стрелки, если перематывать нечего, у вас всего четыре слайда и все они показаны, добавьте ещё один и стрелки появятся.