I am using the swiper slider to horizontally scroll trough my slideshow. I want that my content is looping, but for any reasons its only repeating once and than it stops.
My swiper slider setup looks like this:
var swiper = new Swiper(".swiper-container", {
direction: "horizontal",
mousewheelControl: true,
slidesPerView: "auto",
freeMode: true,
followFinger: true,
loop: true
});
Codepen:
https://codepen.io/Dennisade/pen/ZPygbr
I appreciate any help
As of Swiper version 4.5.0, there are three things that cause errors in your code :
First thing, you added a swiper-wrapper div around every slide. You only need one swiper-wrapper div that wraps all your slides.
Second thing, when you set slidesPerView: 'auto' along with loop: true, you need to provide the total number of looped slides and add it in the loopedSlides parameter.
Checkout the doc in Parameters > slidesPerView : https://swiperjs.com/swiper-api#parameters.
Last thing, mousewheelControl parameter is not used anymore, you need the mousewheel parameter (https://swiperjs.com/swiper-api#mousewheel-control) like so :
mousewheel: {
releaseOnEdges: true,
},
You can also drop direction: "horizontal" and followFinger: true in this case.
So the solution is :
var swiper = new Swiper(".swiper-container", {
slidesPerView: "auto",
freeMode: true,
loop: true,
loopedSlides: 8 // according to the codepen
mousewheel: {
releaseOnEdges: true,
},
});
Checkout your codepen I forked that works : https://codepen.io/olig/pen/rgmPyb
Related
I am using Swiper js for slides on the page. each slide has another image element positioned part inside the slide image and a part outside of it. so Whenever slide changes the part outside the slide can be seen.
I tries to use overflow: hidden for different classes of swiper js but did not work.
Here is the link you can check the slider: https://project-instock.netlify.app/index1.html#0
I did it by adding fadeEffect: { crossFade: true, }.
Initially, the script was
var swiper = new Swiper('.mySwiper5', {
effect: 'fade',
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 7000,
disableOnInteraction: false,
},
});
Which has fade effect enabled but did not mention the kind of fade.
I am using this slider: https://swiperjs.com/api/
Now, I want to start the slider when the device width is equal to or less than 515. to do this I am using this JS code but it's not stopping the slider when the device is greater than 515. It should start the slider when the device width is less than or equal to 515:
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
slidesPerView: 1,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 3000,
},
breakpoints: {
// when window width is >= 320px
515: {
slidesPerView: 1,
spaceBetween: 20
},
}
});
for less than or equal to, if im correct, i think you do <= or <==
idk it's been a while since i used java script
"swiper": "^4.2.6"
Swiper demo
Swiper repository
Hello,
I have this slider setup:
const options = {
wrapperClass: 'slides-list',
slideClass: 'slide',
centeredSlides: true,
slidesPerView: 'auto', // Default slides per view
spaceBetween: 20,
loop: false,
navigation: {
prevEl: '.slider_btn--prev',
nextEl: '.slider_btn--next'
},
pagination: {
el: '.slider_pagination',
clickable: true,
},
speed: 300,
on: {
init: function () {
console.log('swiper initialized');
},
}
};
So i have this setup. Black border for the slider wrapper, red border for the slides list.
Works fine on mobile
But lets face the moment when all the slides width can fit into the slider wrapper, how can i centered then and maybe disable the drag option.
I dont know the slides widths, so right now in the example i have just 3 slides and this is the current behavior
And this one would be the desired one
I cannot use media queries because i dont know when the slides gonna fit in the container. so, Swiper has someway to achieve this ?
Thanks in advance.
I dont want to use slidesPerView: 3, as i said, the point is to be
able to check all the slides that we have, then if all of them can fit
in the container, center them. Not to force X number of slides into
the view
Javascript
const slider = new Swiper(element, {
slidesPerView: 'auto',
watchOverflow: true
});
slider.on('resize', function (instance) {
element.classList.toggle('.slider-active', instance.virtualSize > instance.size);
});
CSS
.swiper-wrapper {
justify-content: center;
}
.slider-active .swiper-wrapper {
justify-content: normal;
}
This way you apply css to center the slides when te slide wrapper does not overflow the container. And visa versa to reset
Hii i am trying to slide continuous using owl carousel without delay in single slide and slide should stop immediate on hover.. Can anyone Please Help me out..
check the documentation owl-carosuel you just need to use stopOnHover
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
stopOnHover: true,
items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
You need to add stopOnHover option to true to your js file. As per the documentation of owl carosuel, if we want to stop slide when we hover over It we can set stopOnHover: true;
and for smooth sliding of the slides you have to use autoplayTimeout option, which help us to set time in ms. So your code should be like this:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2000, // 2 sec you can change it as per you choice.(time between tow slide changes).
stopOnHover: true, // To stop sliding on hover.
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1190: {
items: 3
}
}
});
});
I am using swiper image slider and according to their API, i should be able to have a call back function but it is not working ..
what i am trying to do is that i have a container with text over my images with opacity: 0 and I have a css animation class that I want to be added to my container, so as soon as the page is loaded, I want the animation to kick in on the first slide, next slide same rule , starts without the css class , add the css class to it
here is my javascript code
var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
speed: 600,
effect: 'fade',
fade: {
crossFade: true
},
onSlideChangeStart: function (Swiper){
$('.slide-info').addClass('slider-text-animation ');
},
onSlideChangeEnd: function (Swiper){
$('.slide-info').removeClass('slider-text-animation ');
},
loop: true,
autoplay: 6500
});
Try this:
mySwiper.on('slideChangeStart', function () {
$('.slide-info').addClass('slider-text-animation ');
});
mySwiper.on('slideChangeEnd', function () {
$('.slide-info').removeClass('slider-text-animation ');
});
And also, take a look at their API.
http://www.idangero.us/swiper/api/
It's just simple with Swiper API, this would help you http://idangero.us/swiper/api/#parallax