У меня есть скользящий слайдер, в котором активный слайд уменьшается, и он должен показывать только три слайда в треке слайдов. Проблема, с которой я сталкиваюсь, заключается в том, что она показывает три слайда, но еще два исходят с обеих крайних сторон. Мне нужно показать только три слайда в области дорожки слайдов и ничего со стороны. Пожалуйста, проверьте код, правильно ли он или нет, и дайте мне знать, какие изменения я должен сделать. Я сделал некоторые изменения через custom css и перепробовал много вещей, но он сильно изменился. Окончательный результат должен выглядеть как раздел отзыва клиента в данной ссылке http://165.22.181.70/clientell-1/. Пожалуйста, помогите. Вот что я сделал https://jsfiddle.net/kaunishroy/563t7ejd/5/
Вот код HTML: -
<!DOCTYPE html>
<html>
<head>
<title>clientell</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<section class="client-test">
<div class="regular slider">
<div class="inner-slider">
<img src="images/man.png" class="slider-image" alt="">
<h2>Leila Taylor</h2>
<p>Thanks yet again for another successful and very popular mobile app.</p>
</div>
<div class="inner-slider">
<img src="images/man.png" class="slider-image" alt="">
<h2>Leila Taylor</h2>
<p>Thanks yet again for another successful and very popular mobile app.</p>
</div>
<div class="inner-slider">
<img src="images/man.png" class="slider-image" alt="">
<h2>Leila Taylor</h2>
<p>Thanks yet again for another successful and very popular mobile app.</p>
</div>
<div class="inner-slider">
<img src="images/man.png" class="slider-image" alt="">
<h2>Leila Taylor</h2>
<p>Thanks yet again for another successful and very popular mobile app.</p>
</div>
<div class="inner-slider">
<img src="images/man.png" class="slider-image" alt="">
<h2>Leila Taylor</h2>
<p>Thanks yet again for another successful and very popular mobile app.</p>
</div>
<div class="inner-slider">
<img src="images/man.png" class="slider-image" alt="">
<h2>Leila Taylor</h2>
<p>Thanks yet again for another successful and very popular mobile app.</p>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="js/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
centerMode: true
});
});
</script>
</body>
</html>
Вот код CSS: -
* {
box-sizing: border-box;
}
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: transparent;
}
.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}
.slick-active {
opacity: .5;
}
.slick-current {
opacity: 1;
}
.client-test{
padding: 4em 0;
}
.client-test .slick-prev,.client-test .slick-next{
top: 122%;
}
.client-test .slick-dots{
display: none !important;
}
.client-test .slick-next{
right: 45%;
background:url('../images/next.png');
background-repeat: no-repeat;
width:50px;
}
.client-test .slick-prev{
left: 45%;
background:url('../images/prev.png');
background-repeat: no-repeat;
width:50px;
}
.client-test .slider-image{
width:20%;
margin: 0 auto;
}
.client-test .inner-slider{
text-align: center;
border: 1px solid;
padding:20px;
transition: all 0.5s ease-in-out 0s;
z-index: 9;
position: relative;
border-radius:4px;
background:#ffffff;
transition: all 0.5s ease-in-out 0s;
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.10);
}
.client-test .slider{
width:1000px;
max-width: 100%;
}
.client-test .slick-slide{
width:300px !important;
max-width: 100%;
z-index: 0;
margin: 0 !important;
position: relative;
}
.client-test .slick-current{
transform:scale(1.1);
z-index: 9;
position: relative;
transition: all 0.5s ease-in-out 0s;
}
.client-test .slick-track{
padding: 40px 0;
}
Вот код js: -
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
centerMode: true
});
});
</script>