We Keep Coding

Swiper slider in loop duplicate the pictures and Last slide not showing

I was using swiperjs to create a slider in which 3 images show at once and it will loop infinite, but when I added images to that slide it acts weird and began to show blank spaces after the last slide screenshot attached below:
here's my HTML code same as the swiper documentation provided
<div>
<div class="swiper mySwiper w-11/12 h-full">
<div class="swiper-wrapper flex justify-center items-center ease-linear">
<!-- Swiper Slides embedded using DOM -->
</div>
</div>
<button class="swiper-button-next"></button>
<button class="swiper-button-prev"></button>
<div class="swiper-pagination"></div>
</div>
and now here is JavaScript
First, I embed the images into the swiper-wrapper using the js script
let images = ['img1.webp', 'img2.webp', 'img3.webp', 'img4.webp', 'img5.webp'];
document.querySelector('.mySwiper > .swiper-wrapper').innerHTML = images.map((img,index) => {
return `
<div key="${index}" class="swiper-slide">
<img
class="block object-cover object-center w-full h-full rounded-xl"
src="./images/${img}"
alt="gallery"
/>
</div>`
}).join('')
Then, I initialise the slider
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
centeredSlides: true,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
// when window width is >= 480px
1023: {
slidesPerView: 3,
spaceBetween: 30,
},
},
});
swiper.loopDestroy();

Display a Swiper slider when clicking a thumbnail in a gallery

I'm building a thumbnail gallery with a slider feature using Swiper. By default, the slider is hidden, and when the user clicks one of the images, the slider must be displayed showing the clicked image. Once the slider is open, the user can click a Close button to hide it and return to the thumbnail gallery.
This is the code I'm using:
JS:
var swiper;
swiper = new Swiper( '.gallery-slider .swiper-container', {
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
});
$( '.gallery-thumbnails a[data-slide]' ).on( 'click', function( e ) {
e.preventDefault();
$( '.gallery-thumbnails' ).hide();
$( '.gallery-slider' ).show();
var slideno = $( this ).data( 'slide' );
swiper.slideTo( slideno + 1, false, false );
});
$( '.gallery-slider .close' ).on( 'click', function( e ) {
e.preventDefault();
$( '.gallery-slider' ).hide();
$( '.gallery-thumbnails' ).show();
});
CSS:
.gallery-slider {
display: none;
}
HTML:
<div class="gallery-thumbnails">
<div class="gallery-image"><img src="thumb0.jpg" /></div>
<div class="gallery-image"><img src="thumb1.jpg" /></div>
<div class="gallery-image"><img src="thumb2.jpg" /></div>
<div class="gallery-image"><img src="thumb3.jpg" /></div>
....
</div>
<div class="gallery-slider">
<div class="swiper-container">
<div class="swiper-prev">previous</div>
<div class="swiper-next">next</div>
<div class="close">close</div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="slide0.jpg" /></div>
<div class="swiper-slide"><img src="slide1.jpg" /></div>
<div class="swiper-slide"><img src="slide2.jpg" /></div>
<div class="swiper-slide"><img src="slide3.jpg" /></div>
....
</div>
</div>
</div>
Using this code, the slider is shown when a user clicks a thumbnail, but the slider itself doesn't work. The next and prev buttons don't do anything. Is the slider not initialized when hidden?
What am I doing wrong? Any help would be appreciated.
Thanks

Apparently, you need to add the observer and observeParents parameters when initializing Swiper so the slider is updated (reinitialized) each time you change its style (like hide/show) or modify its child elements (like adding/removing slides) or its parent element.
var swiper;
swiper = new Swiper( '.gallery-slider .swiper-container', {
loop: true,
observer: true,
observeParents: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
});

I make this option by using an lightbox (fancybox) and swiper. when user click on on thumbnail it will open a light box with selected item.
Declare variable with swiper and initialize after popup load.
var mySwiper = new Swiper('.gallery-slider', {
init: false,
slidesPerView: 1,
centeredSlides: true,
loop: false,
observer: true,
observeParents: true,
});
then after trigger pop using facnybox.
$('#product-images-slider .elem').click(function(e) {
e.preventDefault();
var thisTargetImage = $('#product-images-slider .elem.image').index(this);
$.fancybox.open({
src: "#productLightbox",
type: 'inline',
opts: {
toolbar: false,
defaultType: 'inline',
autoFocus: true,
touch: false,
afterLoad: function() {
mySwiper.init();
// target to index image slide
mySwiper.slideTo(thisTargetImage);
},
}
})
});
HTMl for popup triger
<div id="product-images-slider" class="prod-img-pic-wrap">
<a class="elem fancybox-trigger image" data-type='image' href="..805fd8a03c0b67d44c8114c0087c030e-hi.jpg">
<img src="..805fd8a03c0b67d44c8114c0087c030e-md.jpg" width="320">
</a>
</div>
Swiper popup with fancybox wrapper
<div id="productLightbox" class="gallery">
<div class="swiper-container gallery-slider">
<div class="swiper-wrapper"></div>
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
</div>
</div>

swiper slider not working for foreach loop data

I am using swiper slider to show data getting on a foreach loop.but it only showing the first data of the loop,others are not showing or sliding. In inspection I am getting the data of the loop,but in view slider is not working.
blade.php code
<div class="swiper-container text-center">
<div class="swiper-wrapper">
#foreach($course->course_slots as $slot)
<div class="swiper-slide">
<div class="card card-body">
<h5 class="card-title"></h5>
<p class="text-center">Meets {{ count($slot->schedules) }} more time</p>
</div>
</div>
#endforeach
</div>
<br><br>
</div>
js part:
let swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
simulateTouch: false

How to stop swiper slider when autoplay activated and reaching end of slide?

How to stop slider when autoplay activated and reaching end of slide?
currently the slider keep looping to first slide after reaching end slide.
It's using version 4.0.7
HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
Js
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
loop:false,
autoplay: {
delay: 2500,
disableOnInteraction: false,
stopOnLast: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

You can listen to the event slideChange and check your swiper instance for the property isEnd - if true, you set autoplay=false:
swiper.on('slideChange', function(){
if(swiper.isEnd){
swiper.autoplay = false;
}
});
Working fiddle (full example): https://jsfiddle.net/2yhxctxf/
Update: just found an easier way :)
swiper.on('reachEnd', function(){
swiper.autoplay = false;
})
Updated fiddle: https://jsfiddle.net/2yhxctxf/1/
Documentation on the .isEnd property: http://idangero.us/swiper/api/#methods
Documentation on the events: http://idangero.us/swiper/api/#events

Jquery twenty twenty plugin with slider

Created a twenty twenty before after. but I want this before after inside the jquery slider. So that i can view group images of before after
$(window).load(function() {
$("#container1").twentytwenty();
});
<link href="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/css/twentytwenty.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/js/jquery.twentytwenty.js"></script>
<script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script>
<div id="container1">
<img src="http://zurb.com/playground/uploads/upload/upload/29/sample-before.png">
<img src="http://zurb.com/playground/uploads/upload/upload/28/sample-after.png">
</div>
Please help me to create this.

This is actually quite straight forward. I have put together a working example for you, enjoy:
$(document).ready(function() {
//initialize swiper when document ready
var mySwiper = new Swiper('.swiper-container', {
loop: true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
onInit: function() {
$(".swiper-slide-active .container").twentytwenty();
},
onSlideChangeStart: function() {
$('.swiper-slide-active .container').twentytwenty();
},
onlyExternal: true
})
});
<link href="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/css/twentytwenty.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.7/css/swiper.min.css">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="container">
<img src="http://zurb.com/playground/uploads/upload/upload/29/sample-before.png">
<img src="http://zurb.com/playground/uploads/upload/upload/28/sample-after.png">
</div>
</div>
<div class="swiper-slide">
<div class="container">
<img src="http://www.catchmyfame.com/jquery/conan_bef_sm.jpg">
<img src="http://www.catchmyfame.com/jquery/conan_aft_sm.jpg">
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.7/js/swiper.jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/js/jquery.twentytwenty.js"></script>
<script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script>

Using Swiper Slider I tried to use herrbischoff's method, but was unsuccessful I think due to some outdated swiper data. My solution is below and notice a few changes:
touchRatio: 0 is used to turn off dragging so they can actually use the twentytwenty slider.
navigation, pagination need to be used as objects
on: { ... } followed by subobjects of the event name is the new way to access events.
onSlideChangeStart doesn't exist in the new API data, slideChangeTransitionStart does so I believe it was renamed.
(This is only the script solution, you must add the appropriate html and pull in and js and css to get this to function properly)
<script>
jQuery(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper('.swiper-container', {
touchRatio: 0,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
on: {
init: function () {
jQuery(".swiper-slide-active .swiper-container").twentytwenty();
},
slideChangeTransitionStart: function () {
jQuery('.swiper-slide-active .swiper-container').twentytwenty();
},
},
});
});
</script>