Is there a way to have both centered slides and an infinite loop, along with thumbnails with swiper.js? I have the following settings, but when I add loop true it doesn't seem to work.
var mySwiper = new Swiper('.swiper-container',{
paginationClickable: true,
centeredSlides: true,
initialSlide:1,
speed:1200,
centeredSlides: true,
slidesPerView: 'auto'
http://machinas.com/wip/hugoboss/fall2014/startpage/variable-width/
Thanks
centeredSlides is not really compatible with Loop mode. Try to increase loopedSlides and loopAdditionalSlides parameters.
eg:
centeredSlides: true
loop: true
loopAdditionalSlides: 100
Related
I have a problem with Swiperjs, that I'm trying to make the crossfade, but it doesn't crossfade like it should, but between showing the two images it adds approximately 20% white overlay between the two images.
Hard to describe, but as if it would first fade the image to 20% white overlay, so the image brightens a bit and then it fades to the next image. So maybe it's not obvious, but still not the same as
JS:
var mySwiper = new Swiper('.swiper-container', {
lazy: true,
loop: true,
speed: 2000,
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
Just standard Swiper JS, nothing fancy here which would change how the animation behaves. HTML exactly the same as on their page, not changed.
I'm going through the same thing.I try to add "animation" function below the transition(duration) function.But error was throw said "animation was not a function".I don't know why I can't add my own function in the javascript source file swiper-bundle.js.And if modify the transition(duration) function directly it dosen't work either.Maybe I need read the source file deeply.
I'm using a basic swiper with no option. Then I have a listener for "mousemove" in the body of my site. I did this to build a mouse follower effect. This works well, but when I start to drag a slide, it seems this event will not arrive anymore and my custom div "used for mouse effect" does not move.
I finally found a solution in the api! You can set touchStartPreventDefault to false:
this.mySwiper = new Swiper(".swiper-container", {
touchStartPreventDefault: false
})
Look for the Touches section in the #Parameters
touchStartPreventDefault: false
causes firefox swipe bug.
You can use pointermove instead of mousemove.
Bro after full day of testing this is what finally worked
const slider = new Swiper(e, {
slidesPerView: 'auto',
direction: 'horizontal',
speed: 200,
loop: true,
touchStartPreventDefault: false,
allowTouchMove: true,
})
I'm creating a simple slideshow using swiper.js.
My config looks like this:
var mySwiper = new Swiper( '#swiper-container',
{
autoplay: {
delay : 400000
},
loop: true,
speed: 2800,
grabCursor : true
}
);
This pretty much works... except that the 'delay' parameter gets ignored.
I've also tried putting the 'delay' parameter outside of the autoplay object, like this:
v
ar mySwiper = new Swiper( '#swiper-container',
{
autoplay: true,
delay: 4000,
loop: true,
speed: 2800,
grabCursor : true
}
)
;
This doesn't help. The delay value is ignored.
What could be happening here?
The way you wrote it should work, according to Swiper official documentation. But you can also try to set the delay as the autoplay value, it should do the trick:
var mySwiper = new Swiper( '#swiper-container', {
autoplay: 4000,
loop: true,
speed: 2800,
grabCursor : true
});
The code above has been tested with the current Swiper version (4.1.0).
autoplay : 4000 // works for 3.x.x version
autoplay : false or { delay:4000, ....} // works for 4.x.x versions
full details are on github docs
Autoplay takes a boolean value, that's not an option
Instead, I've found a working option. It's pretty clear in documentation
So you just have to add this parameter to your div class="swiper-slide" and it'll work:
data-swiper-autoplay="2000"
this is useful information, and it works. thank you.
for 3.x.x version. I add below like this.
autoplay : 4000,
speed: 300,
Don't forget to import it.
import Swiper, {Navigation, Pagination, Autoplay} from 'swiper';
Rails 3.2
I am using bootstrap-datetimepicker.js
I have the defaults set to:
$.fn.datetimepicker.defaults = {
maskInput: false,
pickDate: true,
pickTime: true,
pick12HourFormat: false,
pickSeconds: true,
startDate: new Date(),
endDate: Infinity,
orientation: "auto",
collapse: true
};
But when I try to pick date/time, if the form is at the bottom of the screen, it's cut off.
I set the orientation to "auto", and I understand that this is supposed to fix the problem, but it's not. Any suggestions?
I use the "FLexslider - Jquery" plugin.
I don't like it when animationLoop is true and it reaches the end of the slides, it does a quick scroll to the start. I would like it to instead keep a continuous loop. I did NOT see an option for this.
Can anyone help me?
Based on the date of your post, can we assume that you're using Flexslider2? If you are, the option animationLoop should already be set as TRUE and should clone your first and last slides so it will always loop instead of "reset" back to the beginning. Can you paste your code on what you have and lets get going from there.
Ex:
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
animationLoop: false,
video: true,
controlsContainer: '.flex-nav',
manualControls: ".flex-nav_tab li",
start: function() {
console.log('changing slide')
}
});