i have created multiple carousels using Slick (https://kenwheeler.github.io/slick/) on single page. They all have the same class and setting (mainly autoplay infinite), but they change within diffrent time. I'm not able to synchronize them.
Gif with the problem:
https://imgur.com/wFGpADi
I have even created example: https://jsfiddle.net/ou85zmqj
$(document).ready(function() {
$('.slick').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
pauseOnHover: false
});
});
.slick {
margin: 0 auto;
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
</head>
<body>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="slick">
<img src="https://picsum.photos/200/300" alt="">
<img src="https://picsum.photos/200/301" alt="">
<img src="https://picsum.photos/200/302" alt="">
<img src="https://picsum.photos/200/303" alt="">
</div>
<div class="slick">
<img src="https://picsum.photos/200/304" alt="">
<img src="https://picsum.photos/200/305" alt="">
<img src="https://picsum.photos/200/306" alt="">
<img src="https://picsum.photos/200/307" alt="">
</div>
<div class="slick">
<img src="https://picsum.photos/200/308" alt="">
<img src="https://picsum.photos/200/309" alt="">
<img src="https://picsum.photos/200/310" alt="">
</div>
</body>
</html>
Can i do something to keep them synchronized?
One solution is to set the first slideshow to autoplay and have it control the others by setting the asNavFor property. When the first slideshow changes, it will immediately change the other two.
The only problem with using this approach is that it requires the slideshows to have the same number of slides, otherwise it may not rotate through all the slides (if the controlling slideshow has fewer) or show the last slide more than once (if the controlling slideshow has more).
$(document).ready(function(){
$('.slick1').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
pauseOnHover: false,
asNavFor: '.slick2'
});
$('.slick2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
pauseOnHover: false
});
});
.slick {
margin: 0 auto;
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
</head>
<body>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="slick slick1">
<img src="https://picsum.photos/200/300" alt="">
<img src="https://picsum.photos/200/301" alt="">
<img src="https://picsum.photos/200/302" alt="">
<img src="https://picsum.photos/200/303" alt="">
</div>
<div class="slick slick2">
<img src="https://picsum.photos/200/304" alt="">
<img src="https://picsum.photos/200/305" alt="">
<img src="https://picsum.photos/200/306" alt="">
<img src="https://picsum.photos/200/307" alt="">
</div>
<div class="slick slick2">
<img src="https://picsum.photos/200/308" alt="">
<img src="https://picsum.photos/200/309" alt="">
<img src="https://picsum.photos/200/310" alt="">
<img src="https://picsum.photos/200/311" alt="">
</div>
</body>
</html>
Another solution is to have the first slideshow trigger the next slide of the other two slideshows, using the beforeChange event. This version will work no matter how many slides are in each slideshow.
$(document).ready(function(){
$('.slick1').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
pauseOnHover: false
});
$('.slick2').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
pauseOnHover: false
});
// First slideshow triggers the other two to change
$('.slick1').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick2').slick('slickNext');
});
});
.slick {
margin: 0 auto;
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
</head>
<body>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<div class="slick slick1">
<img src="https://picsum.photos/200/300" alt="">
<img src="https://picsum.photos/200/301" alt="">
<img src="https://picsum.photos/200/302" alt="">
<img src="https://picsum.photos/200/303" alt="">
</div>
<div class="slick slick2">
<img src="https://picsum.photos/200/304" alt="">
<img src="https://picsum.photos/200/307" alt="">
</div>
<div class="slick slick2">
<img src="https://picsum.photos/200/308" alt="">
<img src="https://picsum.photos/200/309" alt="">
<img src="https://picsum.photos/200/310" alt="">
</div>
</body>
</html>
Related
I want to create a slick slider that its last item from right be bigger than the others
like the image,
here is a regular slick slider: I want to make this look like the image can anyone help me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./slick.css" />
<link rel="stylesheet" href="./slick-theme.css" />
</head>
<body>
<div class="scale_slick">
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script src="./slick.min.js"></script>
<script>
$(".scale_slick").slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
});
</script>
</body>
</html>
try like this
here slidesToShow: 4 so , try .slick-active + .slick-active + .slick-active + .slick-active
.slick-active + .slick-active + .slick-active + .slick-active{
transform: scale(1.3);
border: 1px solid rgb(17, 17, 17);
}
Live demo :
.slick-active + .slick-active + .slick-active + .slick-active{
transform: scale(1.3);
border: 1px solid rgb(17, 17, 17);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" integrity="sha512-WNZwVebQjhSxEzwbettGuQgWxbpYdoLf7mH+25A7sfQbbxKeS5SQ9QBf97zOY4nOlwtksgDA/czSTmfj4DUEiQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
</head>
<body>
<div class="scale_slick">
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
<div><img src="https://picsum.photos/200" alt="" /></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script>
$(".scale_slick").slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
});
</script>
</body>
</html>
I am using bootstrap 4 and jquery 3.5.1 at the same time.
the slider seems doesn't work at all. please help.
<head>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
</head>
<section class="slider-area slider">
<div>
<img src="assets/index/languages/france.png">
</div>
<div>
<img src="assets/index/languages/germany.png">
</div>
<div>
<img src="assets/index/languages/south-korea.png">
</div>
</section>
<script src="slick.js"></script>
<script>
$(".slider-area").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
</script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.5.9/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
</head>
<section class="slider-area slider">
<div>
<img src="https://image.flaticon.com/icons/svg/555/555602.svg" width="200" height="200" class="mx-auto text-center">
</div>
<div>
<img src="https://image.flaticon.com/icons/svg/940/940279.svg" width="200" height="200" class="mx-auto text-center">
</div>
<div>
<img src="https://image.flaticon.com/icons/svg/3013/3013996.svg" width="200" height="200" class="mx-auto text-center">
</div>
</section>
<script>
$(".slider-area").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
});
</script>
Please try this..
And add above external styles.
You are given this show 3 so, cannot slide anything.
slidesToShow: 3,
slidesToScroll: 3
Please show 1 then slide to another.
slidesToShow: 1,
slidesToScroll: 1
you can try like this:
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/index/languages/france.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/index/languages/germany.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/index/languages/south-korea.png" alt="Third slide">
</div>
</div>
</div>
</body>
I want to implement a slick vertical slider with option fade: true. I want a fading effect in the vertical slider. It is showing the first slide but 2nd and 3rd slides are not visible.
Below is the code that I had tried.
$('.MySlider').slick({
vertical: true,
dots: true,
infinite: true,
speed: 500,
fade: true
});
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<section>
<div class="MySlider">
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
I had resolved my issue by giving my custom CSS.
$('.MySlider').slick({
dots: true,
infinite: true,
speed: 500,
vertical:true,
verticalSwiping: true
});
.slick-slide {
opacity:0;
transition:opacity 0.5s ease-out;
}
.slick-active {
opacity:1!important;
transition:opacity 0.5s ease-in;
}
.slick-cloned {
opacity: 0.3;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<section>
<div class="MySlider">
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/600/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/700/300" alt="" />
</div>
</div>
<div class="item">
<div class="image_container">
<img src="https://www.placecage.com/800/300" alt="" />
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
This question already has answers here:
Slick Slider zero width in hidden container (Bootstrap tab)
(2 answers)
Closed 3 years ago.
I have a simple slick carousel (https://kenwheeler.github.io/slick/), however in my layout it doesn't display correctly until you go through the first set of slides.
To get around this I just set it to autoplay but I don't actually want that to happen.
Is there a way to fake one of the arrows being clicked?
Edit
$('.carousel').slick({
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 380,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
a{
display:inline-block;
width:200px !important;
height:200px !important;
border: 1px solid DarkGrey;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css"/>
<div class="card product">
<div class="card-header" id="related_heading">
<button class="btn btn-default collapsed w-100 h-100 text-left" data-toggle="collapse" data-target="#related_body" aria-expanded="false" aria-controls="related_body">
<h5><span>+</span> RELATED PRODUCTS</h5>
</button>
</div>
<div id="related_body" class="collapse" aria-labelledby="related_heading">
<div class="product card-body">
<div class="related-carousel">
<div class="carousel">
<a href="#">
<img src="" alt="" itemprop="image">
<p itemprop="name" class="product_name">product_name</p>
<b>€116.85</b>
</a>
<a href="#">
<img src="" alt="" itemprop="image">
<p itemprop="name" class="product_name">product_name</p>
<b>€116.85</b>
</a>
<a href="#">
<img src="" alt="" itemprop="image">
<p itemprop="name" class="product_name">product_name</p>
<b>€116.85</b>
</a>
<a href="#">
<img src="" alt="" itemprop="image">
<p itemprop="name" class="product_name">product_name</p>
<b>€116.85</b>
</a>
<a href="#">
<img src="" alt="" itemprop="image">
<p itemprop="name" class="product_name">product_name</p>
<b>€116.85</b>
</a>
</div>
</div>
</div>
</div>
</div>
Note how the links all line up under each other unless you try to drag across and then they go inline in the carousel.
You can change slides programatically by using the methods slickNext and slickPrev on the slick instance.
I've been trying to create something like this using slick.js, and i really can't get my head around it.
I have got the current code in place. How to make the center slide image 100% width and height and add paddings to the slide? It seems to be not working.
I'd really appreciate any help. Thanks.
$('.slider').slick({
centerMode: true,
centerPadding: '30px',
slidesToShow: 3,
adaptiveHeight: false
});
.slick-slide img {
max-width: 100%;
transition: transform 0.5s;
}
.slick-slide.slick-center img{
transform: scale(2.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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.min.js"></script>
<div class="slider">
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
</div>
A little bit of CSS should help you out:
$('.slider').slick({
centerMode: true,
centerPadding: '30px',
slidesToShow: 3
});
.slick-slide > div {
transform: scale(.5);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.slick-center > div {
transform: scale(1);
}
.slider__item > img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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.min.js"></script>
<div class="slider">
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
</div>
The principle is simple: use transform: scale(n) to scale down all the slides (where n is your desired factor - .5 in the example above). use transform:scale(1) on the centered one (has .slide-center class) to render it at its real scale (1:1).
And add a transition on transform.
Done.