My goal is to create a responsive carousel with auto-play infinite loop functionality, where the center item always occupies 70% of the viewport width.
Currently, I have achieved a similar result using the Slick library:
https://codepen.io/anon/pen/pBvQBM
$('.slick')
.on('init', () => {
$('.slick-slide[data-slick-index="-2"]').addClass('lt2');
$('.slick-slide[data-slick-index="-1"]').addClass('lt1');
$('.slick-slide[data-slick-index="1"]').addClass('gt1');
$('.slick-slide[data-slick-index="2"]').addClass('gt2');
})
.slick({
centerMode: true,
centerPadding: 0,
slidesToShow: 3,
autoplay: true,
autoplaySpeed: 500,
}).on('beforeChange', (event, slick, current, next) => {
// Logic for adding classes based on current and next slide index
});// CSS styling for the carousel elements
...<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="slick">
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
</div>Although the current setup is close, I aim to have the center item occupy 70% width instead of equal widths. A visual representation can be seen in this image: https://i.stack.imgur.com/xHsIn.png
I welcome suggestions on how I can achieve this layout, whether through modifications to the Slick library or exploring alternative options such as pure CSS or JQuery.