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>
Related
I'm creating slider using flickity and what I'm trying to do is when slide is selected the background color of body change (each slide has a specific color.. the problem is (is-selected) class can't detected in JavaScript even though I clearly see it in console
html:
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="./img/1.jpeg" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="./img/2.jpeg" alt=""
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="./img/3.jpeg" alt="">
</div>
</div>
let cell = document.querySelectorAll(".carousel-cell");
cell.forEach((c) => {
// console.log(c.dataset.color);
if (c.classList.contains("is-selected")) {
document.body.style.backgroundColor = "red";
}
});
how can I solve this?
You might tweak Flickity itself like I do in the snippet below, or if you'd like to keep it clean, you want to use mutationObserver.
const selectFn = [
'var a = fizzyUIUtils;',
(Flickity.prototype.select + '').substring(16).replace(/}$/, ';'),
'document.body.style.backgroundColor = this.cells.find(c => c.element.classList.contains("is-selected")).element.dataset.color;'
].join('');
Flickity.prototype.select = new Function('t', 'e', 'i', selectFn);
.carousel {
height: 80vh;
width: 80vw;
margin: 10vh 0 0 10vw
}
.carousel-cell,
.pic {
height: 100%;
width: 100%;
}
.pic {
object-fit: contain
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="https://picsum.photos/id/21/400/300" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="https://picsum.photos/id/16/400/300" alt="">
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="https://picsum.photos/id/28/400/300" alt="">
</div>
</div>
How to make my carousel turns to full width when I view on mobile phone or smaller screen device?
Any help would be appreciated.
You can check out the code below or simply view on my codepen here - https://codepen.io/nurzamf-the-lessful/pen/ZEodKGO
<div class="contain">
<div id="owl-carousel" class="owl-carousel owl-theme">
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQSTZ5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" />
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_pBQs2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responsive" />
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
<div class="item">
6
</div>
</div>
</div>
.contain {
width: 100%;
}
.item {
width:100%;
color: white;
display: block;
}
$('#owl-carousel').owlCarousel({
loop: true,
margin: 0,
dots: true,
nav: true,
items: 2,
})
Hope It's Work for you !!!
jQuery(document).ready(function(){
jQuery('#owl-carousel').owlCarousel({
loop: true,
margin: 0,
dots: true,
nav: true,
items: 2,
responsiveClass:true,
responsive:{
1000:{
items:2,
nav:true,
loop:true
},
600:{
items:1,
nav:true,
loop:true
},
0:{
items:1,
nav:true,
loop:true
}
}
});
});
.contain {
width: 100%;
}
.item {
width:100%;
color: white;
background-color: salmon;
display: block;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
</head>
<body>
<div class="contain">
<div id="owl-carousel" class="owl-carousel">
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi9MjLHgzg-8RYlTEZFFZ21FGuldcTSSv2wZHf1nGh6KGgwMAznhwkDlpgyt0pxtMxODbGvftKhgPFbNp46_Jv_45WF64GI7Y5ldi6eZQSTZ5twNS3OkdGY8tBF4vo0Zun3WpLSBiTYy3dBWI0Q0fSyS_mV6PU4XyiW_WA3DcZLSnRKJmiFjG2p6D0_=s1600" class="img-responsive" />
</div>
<div class="item">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiTZxD__KXQgaGHq_Xm_Jy7kA44vsdwijCR4VrsJI5uGDptJYp2ujRiVX6_6hNA-mCkh9OezjOBddFRYoAVGIT5omKqQcZnn8mFPtyae72oS7I-_pBQs2-5UnYTZ6VVIyBwQQL6RNJrOPjXiiV1jyHBRDOIxi_6Yyw8Nh2hRZfgrYgJiG_F4ljNnJ4J=s1600" class="img-responsive" />
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
</body>
</html>
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>
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>