I’m using slick for this carousel.
What is the expected behavior? No jump
What is observed behavior?
jump
During the auto-slide the slides jump a bit, especially from the last to the first.
How can i prevent them from jumping on the slide?
Some people fixed it with: .slick-slider div { transition: none; } but i still want the transition to be present
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.carousel-equal-heights .carousel-item>.row {
height: 100% !important;
}
.carousel-equal-heights .responsive-slider .card,
.carousel-equal-heights .responsive-slider .card-body {
display: flex !important;
flex-direction: column !important;
}
.carousel-equal-heights .responsive-slider .card-body,
.carousel-equal-heights .responsive-slider .card-text {
flex-grow: 1 !important;
}
</style>
<div class="carousel-equal-heights">
<!--Responsive Slider-->
<div class="row">
<div class="col-md-12">
<div class="responsive-slider">
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 1</h4>
<p class="card-text">This is a txt for testing
</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4" id="2">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="#">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 2</h4>
<p class="card-text">This is a txt for testing
</p>
<a href="h#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4" id="3">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 3</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 4</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 5</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 6</h4>
<p class="card-text">This is a txt for testing
</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 7</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 8</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 9</h4>
<p class="card-text">This is a txt for testing
</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Of Container-->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$(document).ready(function () {
//Responsive slider
$('.responsive-slider').slick({
dots: true,
arrows: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 2000, //DELAY BEFORE NEXT SLIDE IN MILISECONDS
speed: 800,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
let $carouselItems = $('.carousel-equal-heights').find('.col-md-4');
updateItemsHeight();
$(window).resize(updateItemsHeight);
function updateItemsHeight() {
// remove old value
$carouselItems.height('auto');
// calculate new one
let maxHeight = 0;
$carouselItems.each(function () {
maxHeight = Math.max(maxHeight, $(this).outerHeight());
});
// set new value
$carouselItems.each(function () {
$(this).outerHeight(maxHeight);
});
// debug it
console.log('new items height', maxHeight);
}
});
</script>
<style>
.slick-prev:before {
content: "<";
color: red;
font-size: 30px;
}
.slick-next:before {
content: ">";
color: red;
font-size: 30px;
}
.col-md-4.slick-slide.slick-active {
margin-bottom: 20px !important;
margin-top: 20px !important;
}
</style>>Solution :
there is an issue in your style code.if you remove it than works smoothly
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="carousel-equal-heights">
<!--Responsive Slider-->
<div class="row">
<div class="col-md-12">
<div class="responsive-slider">
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 1</h4>
<p class="card-text">This is a txt for testing
</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4" id="2">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="#">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 2</h4>
<p class="card-text">This is a txt for testing
</p>
<a href="h#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4" id="3">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 3</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 4</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 5</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 6</h4>
<p class="card-text">This is a txt for testing
</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 7</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 8</h4>
<p class="card-text">This is a txt for testing</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-2 shadow-none h-100" style="border: 1px solid #ededed;">
<img class="card-img-top"
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Test 9</h4>
<p class="card-text">This is a txt for testing
</p>
<a href="#" class="btn btn-primary mt-auto align-self-start ml-0">Details</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End Of Container-->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$(document).ready(function () {
//Responsive slider
$('.responsive-slider').slick({
dots: true,
arrows: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 2000, //DELAY BEFORE NEXT SLIDE IN MILISECONDS
speed: 800,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
let $carouselItems = $('.carousel-equal-heights').find('.col-md-4');
updateItemsHeight();
$(window).resize(updateItemsHeight);
function updateItemsHeight() {
// remove old value
$carouselItems.height('auto');
// calculate new one
let maxHeight = 0;
$carouselItems.each(function () {
maxHeight = Math.max(maxHeight, $(this).outerHeight());
});
// set new value
$carouselItems.each(function () {
$(this).outerHeight(maxHeight);
});
// debug it
console.log('new items height', maxHeight);
}
});
</script>
</body>
</html>