error image
` // References swiper slider start here ------------------------------>
var mySwiper = new Swiper(".references-slider", {
slidesPerView: 1,
initialSlide: 1,
centeredSlides: true,
spaceBetween: 32,
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".right-arrow",
prevEl: ".left-arrow",
},
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
snapOnRelease: true,
direction : 'horizontal'
},
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40
}
}
});
mySwiper.setTranslate(-72,0,0);`
Also the setTranslate is not working.
Please help me to fix and use swiper function as how ?
Related
I have synced two swiper sliders but I want the main slider to not scroll when the thumb slider is swiped with touch but only change with the main slider when clicked on the thumbnail. I also don't want to compromise the free mode of the thumbnail. i am using swiper 8.4.5. i have this code
var galleryThumbs = new Swiper('.gallery-thumbs', {
loop: true,
loopedSlides: 10,
centeredSlides: true,
spaceBetween: 10,
slideToClickedSlide: true,
slidesPerView: 5,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
loop: true,
loopedSlides: 10,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
galleryTop.controller.control = galleryThumbs;
// galleryThumbs.controller.control = galleryTop;
I have only synced the top slider the thumbnail but how can able click the thumbnail and change the top slider?
here the sample code. (updated example of code)
https://codepen.io/mossawir/pen/BaPxPRz
i got the solution my self. in case any one run into this case. all you need to do is. move the thumbnail code above the main slider code and add thumb: {}
here is the code
var galleryThumbs = new Swiper('.gallery-thumbs', {
loop: true,
loopedSlides: 10,
centeredSlides: true,
spaceBetween: 10,
slideToClickedSlide: true,
slidesPerView: 5,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
loop: true,
loopedSlides: 10,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// USING THE THUMBS COMPONENT
thumbs: {
swiper: galleryThumbs
}
});
galleryTop.controller.control = galleryThumbs;
//galleryThumbs.controller.control = galleryTop;
codeLink: https://codepen.io/wuyangqin/pen/OJEeQBg
var swiper = new Swiper(".swiper-container", {
height: 400,
width: 240,
loop: true,
autoplay:{
delay: 2000
},
direction: 'vertical',
slidesPerView: 1,
centeredSlides: false,
spaceBetween: 30,
freeMode: true,
freeModeSticky: true,
mousewheel: true,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
type: "fraction"
},
scrollbar: {
el: ".swiper-scrollbar",
draggable: true,
dragSize: 40,
},
virtual: {
slides: (function() {
var slides = [];
for (var i = 0; i < 4; i += 1) {
slides.push(
'<img src="https://picsum.photos/600/600/?image=' +
(i + 1) +
'"/><p>' +
(i + 1) +
"</p>"
);
}
return slides;
})()
}
});
When I set Loop:true, Swiper will stop when it reachEnd;
I tried the issue https://github.com/nolimits4web/swiper/issues/3070 But still not working
Expect loop and virtual working together
It's been days that I'm working on setting the swiper in my application but I still no luck and found no working sample anywhere from here to the Github issues or elsewhere on the net.
I can not set a dynamic height for the swiper in vertical mode via none of the suggested solutions to this problem.
I have several images as slides that give a height of thousands of pixels but if I switch it to a text it is fine as the height of the text is like 10 px. Any div above a certain height will result in abnormal height.
I found that the suggested CSS does not work as it just limits the height of the window and is very unpleasant as the pictures are cut off.
The js solutions are the correct way to do it but I can not find a working solution and the ones that I have tried all result in half of the job solutions.
It seems the correct way uses the onSlideChangeStart to correct the next slide height like below but this does not work as the swiper of the vertical is not recognized in its own settings.
onSlideChangeStart: (swiper)->
$(swiper.slides).each ->
$(this).css height: if $(this).index() != swiper.activeIndex then 0 else 'auto'
I tried to use the active class instead of the API as it is not working when calling even the swiperV.activeIndex in its own onSlideChangeStart like below but swiper-slide-active is not defined.
This is my settings for the 3 nested sliders.
var swiperVV = new Swiper('.swiper-container-vv', {
direction: 'vertical',
updateOnWindowResize: true,
grabCursor: true,
loop: true,
mousewheel: true,
lazy: true,
zoom: true,
effect: 'slide',
spaceBetween: 0,
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
});
var swiperH = new Swiper('.swiper-container-h', {
initialSlide:0,
spaceBetween: 0,
autoHeight: true,
updateOnWindowResize: true,
grabCursor: true,
loop: true,
parallax: true,
lazy: true,
effect: 'slide',
pagination: {
el: '.swiper-pagination-h',
clickable: true,
},
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
});
var swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
autoplay: {
delay: 5000,
},
autoHeight: true,
updateOnWindowResize: true,
grabCursor: true,
loop: true,
mousewheel: true,
lazy: true,
zoom: true,
effect: 'slide',
spaceBetween: 0,
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
slideChange: resizeSwiper()
});
function resizeSwiper() {
console.log($('.swiper-container-v .swiper-slide swiper-slide-active').height());
$('.swiper-container-v, .swiper-container-v .swiper-slide').css({ height: $('.swiper-container-v .swiper-slide .swiper-slide-active').height() });
}
i have gone through all the samples of suggested users like the ones listed below in github, stackoverflow and codepen.
https://github.com/nolimits4web/swiper/issues/48
https://github.com/nolimits4web/Swiper/issues/153
This is the workaround worked for me
if (typeof Swiper != "undefined"){
var popularSwiper = new Swiper(".popularSwiper", {
direction: "vertical",
autoHeight: true,
autoplay: {
delay: 5000,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
on:{
init:function(){
setSlideHeight(this);
},
slideChangeTransitionEnd:function(){
setSlideHeight(this);
}
}
});
function setSlideHeight(that){
$('.swiper-slide').css({height:'auto'});
var currentSlide = that.activeIndex;
var newHeight = $(that.slides[currentSlide]).height();
$('.swiper-wrapper,.swiper-slide').css({ height : newHeight })
that.update();
}
}
It's working for me.
calculate the total height of the swiper container including gap between slides.
then set the swiper container height to the previously calculated height
let pdpThumb = new Swiper('#pdp-thumbCarousel', {
slidesPerView: 4,
direction: 'vertical',
spaceBetween: 10,
freeMode: true,
loop: true,
on: {
init: (swiper) => {
let totalGap = swiper.passedParams.spaceBetween * (swiper.passedParams.slidesPerView - 1);
let containerHeight = swiper.passedParams.slidesPerView * swiper.slides[0].clientHeight + totalGap;
swiper.el.style.height = containerHeight + 'px';
},
},
});
data() {
return {
perPage:2,
swiperOption: {
slidesPerView: perPage,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
}
},
i just want to access perPage prop into swiperOption object
pls help me
You cannot directly assign a data property which is not declared. Instead you can set perPage to swiperOption in created hook
just add a created hook
data() {
return {
perPage:2,
swiperOption: {
slidesPerView: 0,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
}
},
created() {
this.swiperOption.slidesPerView = this.perPage;
}
I don't think you can access an object's property while declaring it, but since data is a function you can just assign perPage to a variable:
data(){
var perPage = 2;
return {
perPage:perPage,
swiperOption: {
slidesPerView: perPage,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
}
}
Is perPage a constant or it will change depending on something?
If it's a constant, there is no need to declare it inside data().
But if it changes, one way to do that is setting a watcher on it and update swiperOption with the new value everytime it changes. Something like:
watch(){
perPage(newVal){
this.swiperOption.slidesPerView = newVal;
}
}
I'm using vue-awesome-swiper and it shows several pictures per slide. What could be probable cause?
Here is my pug:
.worklist_block-background
swiper.gallery-top(:options='swiperOptionTop', ref='swiperTop')
swiper-slide(v-for='(item, idx) in swiperItems' :key='idx' :class='slide-'+(idx+1))
img(:src='item.bigImage')
.worklist_block-small
swiper.gallery-thumbs(:options='swiperOptionThumbs', ref='swiperThumbs')
swiper-slide.swiper__thumb-position(v-for='(item, idx) in swiperItems' :key='idx' :class='slide-'+(idx+1))
img(:src='item.smallImage')
.swiper-button-next(slot='button-next')
.swiper-button-prev(slot='button-prev')
and my data()
data: () => ({
swiperOptionTop: {
setWrapperSize: true,
},
swiperOptionThumbs: {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true,
observeParents: true,
centeredSlides: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},