Develop Reference

Force Swiper.js to display only one slide on mobile viewport

I was working on a Swiper.js and I have the following HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/img1.jpg" alt="">
<div class="slide-text">
<h2>Slide One</h2>
<a class="btn-slider" href="#">LEARN MORE →</a>
</div>
</div>
<div class="swiper-slide">
<img src="images/img2.jpg" alt="">
<div class="slide-text">
<h2>Slide Two</h2>
<a class="btn-slider" href="#">LEARN MORE →</a>
</div>
</div>
<div class="swiper-slide">
<img src="images/img3.jpg" alt="">
<div class="slide-text">
<h2>Slide Two</h2>
<a class="btn-slider" href="#">LEARN MORE →</a>
</div>
</div>
</div>
By default, you will have the following JS to make it work:
var swiper = new Swiper(".swiper-container", {
autoplay: {
slidesPerView: 1,
disableOnInteraction: false,
},
});
I was wondering if its possible to force Swiper.js to only display one slide on mobile viewport instead of showing all 3 slides on mobile?

YES, you can use breakpoints object alongside your autoplay, Like this
var swiper = new Swiper(".swiper-container", {
autoplay: {
slidesPerView: 1,
disableOnInteraction: false,
},
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 20,
},
768: {
slidesPerView: 2,
spaceBetween: 40,
},
1024: {
slidesPerView: 3,
spaceBetween: 50,
},
},
});
Here Is The Documentation Example For Responsive Sliders
https://codesandbox.io/s/3blv5?file=/index.html

what is the best way to create a notifications card vertical carousel with animating the first card to slidin?

I am trying to make an automatic notification cards, the card should slid in from the right of the screen with animation the second card will slid in the same way and push the previous card down, exactly like this website https://muzzleapp.com/
i have tried to create it with swiperjs but i cant animate the card to slide in from the left and the auto play of the carousel is not like the one in the website https://muzzleapp.com/
here is my code
var swiper = new Swiper(".swiper-container", {
direction: "vertical",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
reverseDirection: true,
loop: true,
slidesPerView: 6,
spaceBetween: 10,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
autoplay: {
delay: 1500,
},
});
and this is the html
<div class="col-lg-5">
<img class="main-img" src="./Assest/Group 14.png" alt="">
</div>
<div class="col-lg-3">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="d-flex flex-row">
<img src="./Assest/avatar1.png" class="avatar" alt="">
<div class="d-flex flex-column mt-3">
<h2 class="name">Derek Chin</h2>
<p class="card-info">Aiseh new PS5 ah, swee ah bro. But now pokai how?</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-row">
<img src="./Assest/avatar1.png" class="avatar" alt="">
<div class="d-flex flex-column">
<h2 class="name">Derek Chin</h2>
<p class="card-info" class="card-info">Aiseh new PS5 ah, swee ah bro. But now
pokai how?</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="d-flex flex-row">
<img src="./Assest/avatar1.png" class="avatar" alt="">
<div class="d-flex flex-column">
<h2 class="name">Derek Chin</h2>
<p class="card-info">Aiseh new PS5 ah, swee ah bro. But now pokai how?</p>
</div>
</div>
</div>
any one has a better way for me to reach my goal please ,,,, thank you

How to get the current active swiper image src and set it in another image?

I'm using swiper js and I'm trying to get the src of the current active swiper image's src and set it to an image src which is not related to the swiper, so that whenever I click on the next or previous buttons It renders the same as swiper current active image.
The code in jsfiddle:
https://jsfiddle.net/fateh_alrabeai/yrtvogbn/35/
The HTML Code:
<!--The image I want to be set it's soursce from the current active swiper image-->
<div class="crrent-image" id="crrent-image" style="text-align:center;">
<img src="https://picsum.photos/200" id="currentImage" alt="">
</div>
<!--swiper code -->
<div class="swiper-container gallery-top" style="margin-top:15px;">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="">
</div>
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="">
</div>
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-3.jpg" alt="">
</div>
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-3.jpg" alt="">
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" >
<img src="https://swiperjs.com/demos/images/nature-1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" alt="">
</div>
<div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)"></div>
</div>
JavaScript:
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
$(document).ready(function() {
var currentImage = $('.swiper-slide img').attr(src);
// console.log(var1);
$('#crrent-image img').attr('src', currentImage);
});

In case someone was looking for the same answer.
This is how I solved it :
$(".swiper-button-next").click(function() {
var currentActiveSlide = $('.swiper-slide-active img').attr('src');
$('#main_image img').attr('src', currentActiveSlide);
});
$(".swiper-button-prev").click(function() {
var currentActiveSlide = $('.swiper-slide-active img').attr('src');
$('#main_image img').attr('src', currentActiveSlide);
});

How to show pagination dots in owl carousel

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
});
});

Jquery + owl.carousel - Stop the slider when flying video from youtube

I use jquery owl caorusel (http://owlgraphic.com/owlcarousel )
Sliders are 2 and in these videos from Youtube. When I click on the play this slider has to stop. Can anyone help?
My app
// owl home
$(".slider-home .owl-carousel").owlCarousel({
rewindNav: true,
navigation: true,
pagination: false,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
mouseDrag: false,
autoPlay: true,
stopOnHover: true,
rewindSpeed: 5000,
video:true,
lazyLoad:false,
afterMove : function(){
$('video').each(function () {
this.pause();
$('.slider-video').next().show();
});
}
});
and html
<div class="slider-home">
<div class="owl-carousel owl-theme">
<div class="item" style="background-image: url('tmp/car1920x1080.jpg');">
<div class="item-inner">
<div class="container">
<div class="row">
<div class="col-sm-9">
<h1>header1</h1>
</div> <!-- .col -->
</div> <!-- .row -->
</div> <!-- .container -->
</div> <!-- .item-inner -->
</div> <!-- .item -->
<div class="item disable-owl-swipe">
<iframe class="youtube-player" width="560" height="315" src="http://www.youtube.com/embed/9UlBsQLjjWI?loop=1&playlist=9UlBsQLjjWI&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<div class="item-inner">
<div class="container">
<div class="row">
<div class="col-sm-9">
<h1>header2</h1>
</div> <!-- .col -->
</div> <!-- .row -->
</div> <!-- .container -->
</div> <!-- .item-inner -->
</div> <!-- .item -->
</div>