I have been experimenting with a carousel slider using Slick Carousel (). My goal is to make it loop infinitely and function smoothly at different browser widths without the cards stacking, but it's not quite working as intended yet. Currently, there is some jerkiness in the loop after 5 slides.
If anyone could offer assistance, that would be much appreciated! I have a demo set up on CodePen! https://codepen.io/cbg/pen/YQdqPQ
<head>
<style type="text/css">
body {
margin: 0;
}
#slider {
background-color: #f5f7f9;
padding: 80px;
overflow: auto;
}
.service {
width: 260px !important;
height: 303px;
background-color: white;
float: left;
margin: 0 15px;
box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15);
border-radius: 4px;
}
.slick-arrow {
display: none !important;
}
.pod1 {
background-image: url(fakepods/pod1.png);
}
.pod2 {
background-image: url(fakepods/pod2.png);
}
.pod3 {
background-image: url(fakepods/pod3.png);
}
.pod4 {
background-image: url(fakepods/pod4.png);
}
.pod5 {
background-image: url(fakepods/pod5.png);
}
</style>
</head>
<body>
<div id="slider" class="center slider">
<div class="pod1 service"></div>
<div class="pod2 service"></div>
<div class="pod3 service"></div>
<div class="pod4 service"></div>
<div class="pod5 service"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".center").slick({
dots: false,
infinite: true,
centerMode: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 250,
});
});
</script>
</body>