Developer forum

Forum » Swift » Swiffy slider
Alexander Tømmerholen
Reply

Hello,

This might be the wrong place to post this but I can see on github that the swiffy slider is something that is being develop by Dynamicweb. I`m playing around a bit with the swiffy slider and there is many neat things you can do with it, but there a couple of things I wonder if is possible.
I want to acheive whats on the image below.

The middle image is the first slide, and the preview to the left is the last slide. I know about the "slider-item-reveal" will make it look like this after you go to the next slide, but i want it to start like this. Is it possible? Also I want that the "active" slide, in this case the slide in the middle, to be a bit bigger then the preview to left and right.

I have been looking on the doc for the swiffy slider and can`t see that this is possible right now


Replies

 
Nicolai Pedersen
Reply

Hi Alexander

Yes, we made that because we needed a slider that was not slow and worked well with mobile touch.

Maybe the question belong in the github issues, but here goes:

The slider has a number of css variables that can be used to modify default behavior. With the example you want, you can use this configuration:

https://swiffyslider.com/configuration/?slider-item-reveal=slider-item-reveal&slider-item-nogap=slider-item-nogap&slider-nav-animation=slider-nav-animation&slider-nav-animation-style=slider-nav-animation-scale&preview-style=preview-images

And then on the slider instance add something like this: "--swiffy-slider-item-reveal: 20rem;"

Then it will end up looking something like this:

You might also want to set  the attribut on the slider element data-slider-nav-animation-threshold="0.5" to control when the animation on the slide (which is responsible for the scaling)

<div class="swiffy-slider" data-slider-nav-animation-threshold="0.5">

Since this slider is using a scrolling div to get its performance (and not do any manipulation of the dom), it is not possible to do 'infinite' scrolling. You can have last slide go back to first, or first go back to last, but not in real circles because of the basic works. 

The best you can do is to add the last slide as the first in the markup also, and on page load call swiffyslider.slideTo(sliderElement, 2); In that way it will look like above - but sliding left would be what it is...

 
Alexander Tømmerholen
Reply

Hi Nicolai,

Thank you, will try it out. 

 

You must be logged in to post in the forum