I have followed this instructions, but the slider not do the fadeOut and fadeIn animation: http://www.owlcarousel.owlgraphic.com/demos/animate.html
Head Css:
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.css">
Html item:
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="svg/shirt-design-1.svg" alt="">a
</div>
<div style="width:186px">
<img src="svg/shirt-design-2.svg" alt="">
</div>
</div>
Javascript:
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script>
$( document ).ready(function() {
$('#product-designs-presentation').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
autoPlay:true,
autoPlayTimeout:1000,
autoplayHoverPause:true,
navigation: true,
navigationText: ["prev","next"]
});
});
</script>
What is the problem?
You missed class class='owl-carousel'this is needed for owl-carousel working. I think this is the problem owl docs
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="svg/shirt-design-1.svg" alt="">a
</div>
<div style="width:186px">
<img src="svg/shirt-design-2.svg" alt="">
</div>
</div>
Use this css this is working
$(document).ready(function() {
$('#product-designs-presentation').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
autoPlay:true,
autoPlayTimeout:1000,
autoplayHoverPause:true,
navigation: true,
navigationText: ["prev","next"]
});
});
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="http://static.vecteezy.com/system/resources/previews/000/095/621/original/free-leaf-vector.png" alt="">a
</div>
<div style="width:186px">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/15/29/maple-149907_960_720.png" alt="">b
</div>
</div>
Related
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>
So far, setting up Swiper has been a breeze. All the images load perfectly into the container, and the console logs no errors.
But while the navigation buttons show up and are clickable, they don't actually work. Neither does the clicking and dragging them. The console shows that all the images are loaded.
Other people had similar problems, and the fix that worked was adding:
observer: true,
observeParents: true,
To the initialization code, which hasn't made a difference for me.
Here's my HTML code
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
{% for image in car.image_set.all %}
<div class="swiper-slide"><img src="{{ image.image.url }}" style="width: 100%; "></div>
{% endfor %}
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
...
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
...
<script>
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
loopedSlides: 5, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer: true,
observeParents: true,
observeSlideChildren: true,
});
</script>
Update
Thanks to Pratik's feedback, I've updated the js, but Swiper still isn't navigating the images. There are no console errors, it just seems dead.
It's working for me, you can check below the working example.
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
loopedSlides: 5, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer: true,
observeParents: true,
observeSlideChildren: true
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<title>Swiper Slider</title>
</head>
<body>
<div class="container">
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://www.placebear.com/700/500" style="width: 100%; ">
</div>
<div class="swiper-slide">
<img src="http://www.placebear.com/700/500" style="width: 100%; ">
</div>
<div class="swiper-slide">
<img src="http://www.placebear.com/700/500" style="width: 100%; ">
</div>
<div class="swiper-slide">
<img src="http://www.placebear.com/700/500" style="width: 100%; ">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</body>
</html>
Observer and ObserveParents are not a part of navigations.
So Update your script with the below code.
<script>
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
loopedSlides: 5, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer: true,
observeParents: true,
observeSlideChildren: true
});
</script>
** This is the rendered HTML**
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
...
<body>
<div class="container">
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/media/image_11.JPG" style="width: 100%; "></div>
<div class="swiper-slide"><img src="/media/image_12_YQm2sd3.JPG" style="width: 100%; "></div>
<div class="swiper-slide"><img src="/media/image_19.JPG" style="width: 100%; "></div>
<div class="swiper-slide"><img src="/media/image_16_pm7OKF2.JPG" style="width: 100%; "></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
...
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</body>
</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>
I am using Owl Carousel 2. I want to display a dot for every item, but I want to show 5 dots at a time. Can anyone suggest to me how I will do this? Thanks.
HTML:
<div id="owl-demo" class="owl-carousel">
<div class="item">
<img src="images/banner/A.png" alt="A"/>
</div>
<div class="item">
<img src="images/banner/B.png" alt="B"/>
</div>
<div class="item">
<img src="images/banner/C.png" alt="C"/>
</div>
<div class="item">
<img src="images/banner/D.png" alt="D"/>
</div>
<div class="item">
<img src="images/banner/E.png" alt="E"/>
</div>
<div class="item">
<img src="images/banner/F.png" alt="F"/>
</div>
</div>
<div id="dots" class="owl-carousel">
<div class="item"><span>A</span></div>
<div class="item"><span>B</span></div>
<div class="item"><span>C</span></div>
<div class="item"><span>D</span></div>
<div class="item"><span>E</span></div>
<div class="item"><span>F</span></div>
</div>
JS:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true
});
});
Just change your JS to:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true,
dotsEach: true
});
});
I have implemented Owl carousal for one of my project.
When page load is complete and carousal on Auto play. Its adding #slide in my URL.
Eg.
www.example.com/home#slide-0
www.example.com/home#slide-1
www.example.com/home#slide-2
Is there as any setting I need to disable.
You have URLhashListener set to true, you have to remove it from owl carousel settings object, or set it to false. https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav.html
Here is owl carousel with autoplay on.
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
autoplay: true,
autoplayTimeout:1000,
autoplayHoverPause:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Owl Carousel</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<body>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
</body>
</html>