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>
Related
dears friends.
I found this photo gallery ins this site: http://playgallery.siteseguro.ws/
I would like to use it but the play and pause button don't get anywhere. The buttons are not working and I don't see any code to make this work.
Is it possible to make this work? Below is the optimized code:
<html>
<head>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-bootstrap.css"/>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-style.css"/>
<link rel='stylesheet' id='fontawesome-css' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
</head>
<body>
<div class="col-slick-4">
<div class="slick-gallery">
<div class="slick-slider carousel-child" id="child-carousel" data-for=".carousel-parent" data-arrows="true" data-loop="false" data-dots="false" data-swipe="true" data-items="4" data-xs-items="4" data-sm-items="4" data-md-items="4" data-lg-items="5" data-slide-to-scroll="1">
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s1.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s2.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s3.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s4.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s5.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s6.jpg"/>
</div>
</div>
</div>
</div>
<div class="slick-controls">
<div class="slick-controls-pause"><span class="fa fa-pause"></span></div>
<div class="slick-controls-play"><span class="fa fa-play"></span></div>
</div><br><br>
<div class="slick-slider carousel-parent" data-arrows="false" data-loop="false" data-dots="false" data-swipe="true" data-items="1" data-child="#child-carousel" data-for="#child-carousel" data-lightgallery="group">
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s1.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s2.jpg" height="480" /></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s3.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s4.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s5.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s6.jpg" alt="" height="480"/></div>
</div>
</div>
</div> <!-- /col-slick-4 -->
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-core.min.js"></script>
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-script.js"></script>
</body>
</html>
you would have to add some jquery
$('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
pauseOnDotsHover:false,
autoplaySpeed:500,
dots: false,
arrows: false,
infinite: true
});
$('#pause').click(function() {
$('.slick-slider').slick('slickPause');
});
$('#play').click(function() {
$('.slick-slider').slick('slickPlay');
});
And then edit your buttons to have an id of pause and play respectively and remove the a tag
<div class="slick-controls">
<div class="slick-controls-pause slick-play"><span id="pause" class="fa fa-pause"></span></div>
<div class="slick-controls-play slick-play"><span id="play" class="fa fa-play"></span></div>
</div><br><br>
If you want to keep the pointer on hover. Instead of using an a tag. Use cursor: pointer; on your .slick-play
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>
I have the following code snippet from my template whre I've used owl carousel jquery library for slider.
$('.owl-carousel').owlCarousel({
items: 1,
lazyLoad: false,
loop: true
});
.owl-carousel .owl-lazy {
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<section class="slider-wrapper">
<div class="owl-carousel owl-theme">
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?nature"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?food"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?travel"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?work"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?pet"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?music"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?friends"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?movie"></div>
</div>
</section>
I'm looking forward to create a full height and width carousel. Although I have given the height to the image container owl-lazy the images are not visible. The above code only dot navigation.
Here's a solution if you want to implement it as a background-image instead of a <img> Tag.
I Just set lazyLoad: true and defined a min-height on the background-image Container.
$('.owl-carousel').owlCarousel({
items: 1,
lazyLoad: true,
loop: true
});
.owl-carousel .owl-lazy {
background-size: cover;
background-position: center center;
width: 100%;
min-height: 100vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<section class="slider-wrapper">
<div class="owl-carousel owl-theme">
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?nature"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?food"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?travel"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?work"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?pet"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?music"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?friends"></div>
<div class="owl-lazy" data-src="https://source.unsplash.com/1600x900/?movie"></div>
</div>
</section>
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.
I've used slick slider before, but now I don't what causes this ruckus.
Am I missing something? I've followed the instruction at slick slider and also at github, I'm puzzled.
//JS here
$('.slider').slick({
arrows:true,
autoplaySpeed:1000
});
/* Style here */
.container{
max-width:1200px;
margin:0 auto;
}
<!-- Script -->
<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.9.0/slick.min.js"></script>
<!-- Html -->
<div class="container">
<div class="slider">
<div class="slides">
<img src="Picture4" alt="">
</div>
<div class="slides">
<img src="Picture3" alt="">
</div>
<div class="slides">
<img src="Picture2" alt="">
</div>
<div class="slides">
<img src="Picture1" alt="">
</div>
</div>
</div>
After analyzing your code, I noticed that the slick css import was missing.
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css
I leave your example below with the CSS import.
$('.slider').slick({
arrows:true,
autoplaySpeed:1000
});
.container{
max-width:1200px;
margin:0 auto;
}
.slider{
display:flex;
.slides{
display:flex;
justify-content:center;
}
}
<!-- this line is missing -->
<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/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="container">
<div class="slider">
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
</div>
</div>