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>
Related
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>
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;
});
}
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 3 carousels on my page with the same class name.
<div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="assets/fullimage1.jpg"></div>
<div class="item"><img src="assets/fullimage2.jpg"></div>
</div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="assets/fullimage3.jpg"></div>
<div class="item"><img src="assets/fullimage4.jpg"></div>
</div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="assets/fullimage5.jpg"></div>
<div class="item"><img src="assets/fullimage6.jpg"></div>
</div>
</div>
and then on my js
$(".owl-carousel ").owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade"
});
This works fine, but all the carousels start almost on the same time. Is there a way to add a delay between the carousels? So first start the first one, and then when the first one is done, the second starts etc...
Thank you in advance.
Combining Phil & TJ answers:
$(".owl-carousel ").each(function(i,v){
var delay = i*10000;
$(v).owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade",
autoPlay: delay
});
});
You can use a timeout like this:
$(".owl-carousel ").each(function(i,elm){
var delay = i*1000; // generate the delay somehow as you need
setTimeout((function(){
var $elm = $(elm);
return function(){
$elm.owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade"
});
}
})(),delay);
});
I suggest you add an ID to each of your carousel and give them each a seperated autoPlay attribute. This way they will start over at different times and when you click ONE carousel it will not move the others.
Yours will tick each carousel when once is clicked.
<div>
<div class="owl-carousel owl-theme" id="owl1">
<div class="item"><img src="assets/fullimage1.jpg"></div>
<div class="item"><img src="assets/fullimage2.jpg"></div>
</div>
<div class="owl-carousel owl-theme" id="owl2">
<div class="item"><img src="assets/fullimage3.jpg"></div>
<div class="item"><img src="assets/fullimage4.jpg"></div>
</div>
<div class="owl-carousel owl-theme" id="owl3">
<div class="item"><img src="assets/fullimage5.jpg"></div>
<div class="item"><img src="assets/fullimage6.jpg"></div>
</div>
</div>
$("#owl1").owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade",
autoPlay: 10000;
});
$("#owl2").owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade",
autoPlay: 7000;
});
$("#owl3").owlCarousel({
navigation : false,
singleItem : true,
autoPlay: true,
pagination: false,
transitionStyle: "fade",
autoPlay: 5000;
});