search

dynamicweb / swiffy-slider

Super fast carousel and slider with touch for optimized websites running in modern browsers.
MIT License
247 stars 30 forks source link

Support for vertical slider #11

Closed aimeos closed 2 years ago

aimeos commented 2 years ago

The current implementation is great for horizontal sliders. Are there any plans to support vertical sliders too?

nicped commented 2 years ago

Not currently - My first thought is that is not a common scenario and I have a hard time understanding the UX issues related to do that. Should be fairly simple to do though - you can maybe even just rotate the .swiffy-slider instance 90 degrees using CSS.

Can you provide a use case for vertical sliders? A design or link to an example?

Thanks for clarifying.

aimeos commented 2 years ago

Thank you for your swift response. A common use case is a vertial slider for product image thumbnails: https://www.amazon.com/BINNUNE-Microphone-Playstation-Headphones-Cancelling/dp/B096VRK6J5/ref=sr_1_1_sspa

Rotating by 90 degrees rotates the images as well, which is undesired.

nicped commented 2 years ago

Ok - good case. Will mark it as a request.

You can turn it around like this - first turn the slider, then turn back the slides:

.swiffy-slider{
    transform: rotate(90deg);
}
.swiffy-slider .slider-container>* {
    transform: rotate(-90deg);
}

You can then remove the nav buttons from the .swiffy-slider instance and place them outside and customize them.