There are some related topics worth exploring, such as: Slick carousel center class not working when going from last item to first item
Despite trying various solutions, the issue still persists in my code. My goal is to have each item displayed in the center with the rest hidden, except for the first and last items. Click on "item 8" and "item 1" below to see what I mean.
I am really in need of assistance with this problem and would greatly appreciate any advice or suggestions. Please help!
$('.slick-wrap').slick({
dots: false,
focusOnSelect: true,
infinite: true,
arrows: false,
speed: 300,
slidesToShow: 5,
slidesToScroll: 1,
centerMode: true,
centerPadding: '30px',
responsive: {
600: {
items: 2
}
}
});
$('.slick-wrap').on('init', function(event, slick){
var carouselTexts = $(".slick-item .cont-hide");
var idx = $(event.target).find('.slick-list .slick-center').index();
carouselTexts.eq(idx).css('visibility', 'visible');
});
//display and hide the content
$('.slick-item').on('click', function() {
var carouselTexts = $(".slick-item .cont-hide");
var clickedNum = $(".slick-item").index(this);
carouselTexts.not(clickedNum).css('visibility', 'hidden')
carouselTexts.eq(clickedNum).css('visibility', 'visible');
});.slick-section{
padding: 25px;
text-align: center;
}
.slick-container{
width: 100%;
margin: 0 auto;
}
.slick-wrap{
margin: 0 -10px;
}
.slick-item{
padding: 0 10px;
}
.slick-dots {
list-style-type: none;
margin: 25px 0 0;
padding: 0;
}
.slick-dots li {
width: auto;
height: auto;
display: inline-block;
padding: 0 5px;
}
.slick-active button{
background: #ccc;
}
.cont-hide{ visibility: hidden; }<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4d7c8cdc7cf89c7c5d6cbd1d7c1c8e4958a9c8a95">[email protected]</a>/slick/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f6c73767c74327c7e6d706a6c7a735f2e31">[email protected]</a>/slick/slick.min.js"></script>
<section class="slick-section">
<div class="slick-container">
<div class="slick-wrap">
<div class="slick-item">1 <div class="main-panel cont-hide">test 1</div></div>
<div class="slick-item">2 <div class="main-panel cont-hide">test 2</div></div>
<div class="slick-item">3 <div class="main-panel cont-hide">test 3</div></div>
<div class="slick-item">4 <div class="main-panel cont-hide">test 4</div></div>
<div class="slick-item">5 <div class="main-panel cont-hide">test 5</div></div>
<div class="slick-item">6 <div class="main-panel cont-hide">test 6</div></div>
<div class="slick-item">7 <div class="main-panel cont-hide">test 7</div></div>
<div class="slick-item">8 <div class="main-panel cont-hide">test 8</div></div>
</div>
</div>
</section>