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>
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>
I have 2 codes of swiper sliders.
And they do not work for me smoothly when the two are together on the same page, I tried to change the classes but it doesn't work also..
Anyone know how to fix this?
What should be done?
First swiper slider:
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-17-1.png" />>
</div>
<div class="swiper-slide">
<img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-18-1.png" />>
</div>
<div class="swiper-slide">
<img src="https://thenewmedia.co.il/wp-content/uploads/2022/01/עיצוב-ללא-שם-9-1.png" />>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
autoplay: {
delay: 1500,
},
});
</script>
Second Slider:
<body>
<!-- Swiper -->
<div class="swiper mySwiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-slide">
<img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/דנאי.jpg" />
</div>
<div class="swiper-slide">
<img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/שף.jpg" />
</div>
<div class="swiper-slide">
<img class="projectImg" src="https://thenewmedia.co.il/wp-content/uploads/2022/06/רונית.jpg" />
</div>
</div>
</div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper1", {
spaceBetween: 30,
effect: "fade",
autoplay: {
delay: 1500,
},
loop: true,
});
</script>
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 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>
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>