We Keep Coding

How to resolve Swiperjs Fade Effect loop bug

I am using swiper js according to their API. There are a total of 5 slides, but an error occurs without going directly from the 4th slide to the 5th slide. The 4th slide is divided into 2 times and the 5th slide is not shown and it goes to the 1st slide.
<div class= "swiper-wrapper">
<div class="swiper-slide">
<img src="./images/img01-2.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-5.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-3.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-1.png" alt="">
</div>
<div class="swiper-slide">
<img src="./images/img01-4.png" alt="">
</div>
</div>
const slideOption1 = {
effect: 'fade',
speed: 400,
slidesPerView: 'auto',
autoplay: {
delay: 400,
disableOnInteraction: false,
},
// loop:true,
loopedSlides: 5,
loopAdditionalSlides: 5,
};
i tried to
s1.on('slideChange', function() {
if(s1.realIndex == 3) {
s1.slideToLoop(5,400)
}
})

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

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

Swiper.js does not scroll on first page

I am building a website which uses swiper.js. When I click on a button a small swiper page will display the product details. But it does not scroll on the first page. I need to hover my mouse outside the swiper page and hover it back again to make it scroll. This is what i've tried.
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
keyboard: {
enabled: true,
onlyInViewport: false,
},
mousewheel: {
enabled: true,
invert: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
simulateTouch:false,
});
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Product Details ....
</div>
<div class="swiper-slide">
Stocks ....
</div>
<div class="swiper-slide">
Reviews ....
</div>
</div>
</div>

You may need to set a size on the .swiper-container class.
Here's an example using your code. I added the navigation buttons. Take a look at the CSS that I added below:
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
keyboard: {
enabled: true,
onlyInViewport: false,
},
mousewheel: {
enabled: true,
invert: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
simulateTouch: false,
});
html, body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Product Details ....
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
</div>
<div class="swiper-slide">
Stocks ....
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
</div>
<div class="swiper-slide">
Reviews ....
<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>

jCarouselLite not working on this page

I am using jCarouselLite on this page
Here is the code
//jcarousel 1.0.1
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:7,start:0,scroll:2,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var b=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var c=$(this),ul=$("ul",c),tLi=$("li",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var f=$("li",ul),itemLength=f.size(),curr=o.start;c.css("visibility","visible");f.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"});c.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var g=o.vertical?height(f):width(f);var h=g*itemLength;var j=g*v;f.css({width:f.width(),height:f.height()});ul.css(sizeCss,h+"px").css(animCss,-(curr*g));c.css(sizeCss,j+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,a){$(a).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&c.mousewheel)c.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return f.slice(curr).slice(0,v)};function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px");curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px");curr=a==itemLength-v+1?v+1:v+o.scroll}else curr=a}else{if(a<0||a>itemLength-v)return;else curr=a}b=true;ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());b=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(a,b){return parseInt($.css(a[0],b))||0};function width(a){return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')};function height(a){return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}})(jQuery);
jQuery(document).ready(function($) {
$(".slider").jCarouselLite({
btnNext: null,
btnPrev: null,
visible: 7,
scroll: 2,
vertical: false,
circular: true,
itemFallbackDimension: 150,
start: 0,
auto: 4000,
speed: 1000
});
});
On that way it's working some times with showing 7 images and sometimes it's showing only 5 images and sometimes no images and stopped working.
Please help me to fix it.
Thanks

can you post your html, please?
normally you can slide with the jcarousel just by preparing the html on the right way
like this:
<div class="jcarousel-container jcarousel-container-horizontal" id="pictureslide">
<div class="jcarousel-clip jcarousel-clip-horizontal" id="pic" style='position: relative;'>
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal' id='jcarousel-item-1'>
<img src="pic/slide1.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-2-horizontal' id="jcarousel-item-2" >
<img src="pic/slide2.jpg" alt="slide" />
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-3-horizontal' id="jcarousel-item-3" >
<img src="pic/slide3.jpg" alt="slide" />
</li>
</ul> </div>
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display:'block'">
<a class="controls prev" href="#"><img id="arrow-left" src="pic/arrow_left.png" alt="arrow-left" /></a>
</div>
<div class="jcarousel-next jcarousel-next-horizontal" style="display:'block'">
<a class="controls next" href="#"><img id="arrow-right" src="pic/arrow_right.png" alt="arrow-right"/></a>
</div>
</div>
<!-- END #pictureslide -->
in Javascript you only have to write this (the id is at the ul):
$('#mycarousel').jcarousel({
"wrap": 'circular',
"scroll": 2
....
});