So I am using Swiper.js for a multi-layered carousel on angular app. Essentially there was three swiper-containers, who's functionalities are supposed to complement each other. It is an extention of their Swiper thumbs gallery, where I added an extra crousel with description to the images.
Issues:
When I click on a thumnail, the main image is no selected along with it. I need it to work like the image description. Simply put, when one clicks on a thumnails, the image description and the image preview should both change correspondingly.
Oddly the Pagition count is wrong. It says 6, instead of the correct number 8.
Below is the component html:
<section class="gallery-section">
<div class="gallery-left">
<div class="swiper-container gallery-text">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
<div class="image-controls">
<div class="swiper-button-prev swiper-button-mobile"></div>
<div class="swiper-pagination swiper-pagination-mobile"></div>
<div class="swiper-button-next swiper-button-mobile"></div>
</div>
<div class="image-info">
<div class="image-description">{{ image.description }}</div>
<div class="image-date">{{ image.date }}</div>
</div>
</div>
</div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray; let i = index">
<figure>
<img src="{{ image.img }}" alt="">
</figure>
</div>
</div>
</div>
<div class="swiper-button-next swiper-button-desktop"></div>
<div class="swiper-button-prev swiper-button-desktop"></div>
<div class="swiper-pagination swiper-pagination-desktop"></div>
</div>
<div class="gallery-right">
<div class="swiper-container gallery-main">
<div class="swiper-wrapper">
<div class="swiper-slide" *ngFor="let image of imageArray">
<figure>
<img src="{{ image.img }}" alt="">
</figure>
</div>
</div>
</div>
</div>
</section>
Here is initialisation from the ts file:
ngOnInit() {
imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
console.log('Images loaded > swiper start');
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
slidesPerView: 3,
freeMode: true,
pagination: {
el: '.swiper-pagination',
type: 'fraction',
},
watchSlidesVisibility: true,
watchSlidesProgress: true
});
var galleryText = new Swiper('.gallery-text', {
slidesPerView: 1,
thumbs: {
swiper: galleryThumbs,
},
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var galleryMain = new Swiper('.gallery-main', {
spaceBetween: 5,
slidesPerView: 1,
thumbs: {
swiper: galleryThumbs
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
});
}
Finally, a GIF which will hopefully make my issue easier to understand.
Figured it out:
ngOnInit() {
imagesLoaded(document.querySelector('.gallery-section'), function(instance) {
console.log('Images loaded > swiper start');
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 5,
slidesPerView: 3,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryText = new Swiper('.gallery-text', {
slidesPerView: 1,
effect: 'fade',
fadeEffect: {
crossFade: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var galleryMain = new Swiper('.gallery-main', {
spaceBetween: 5,
slidesPerView: 1,
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
thumbs: {
swiper: galleryThumbs
}
});
galleryText.controller.control = galleryMain;
galleryMain.controller.control = galleryText;
});
}
Related
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();
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
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>
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
I have One slide but my slide repeat to three items! How to stop repeat slides? If had 1 slide show one , if is two slide show two, if is 10 slides show 10 :| this is my config
var swiper = new Swiper('.slides-per-view', {
pagination: '.swiper-pagination',
speed: 800,
loop: true,
slidesPerView: 3,
centeredSlides: true,
spaceBetween: 30,
grabCursor: true,
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});
and this is my Html code
<div class="swiper-container slides-per-view" dir="rtl">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure>
<img draggable="false" src="assets/pictures/activities/1.jpg" class="img-responsive" alt="">
<figcaption class="text-light text-center"> Title</figcaption>
<div class="more text-center margin-bottom-30">
<p class="text-blue"><i class="fa fa-calendar"></i> Date</p>
Read More
</div>
</figure>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
Look at this image please
You can not have loop set to true and slidesPerView to 3 if you only have one tile. So this is what you can do:
var isLoop = true;
if($('.swiper-slide')).length < 3) {
isLoop = false;
}
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
speed: 800,
loop: isLoop, //<--- set if loop is true or not
slidesPerView: 3,
centeredSlides: true,
spaceBetween: 30,
grabCursor: true,
paginationClickable: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
});