Javascript slider

JavaScript
1

Hey guys,
could anybody help me with a JS slider.
Basically i would be fine with a little hint like keywords what i should search for.

What i want to build:

  • A slider with screenshots from a mobile App.

What should the slider do?:

  • The images should be shown just like a stack of cards
    – 1. image has transform: translateY(0) rotate(0deg) translateX(0) scale(1);
    – 2. image has transform: translateY(-20px) rotate(0deg) translateX(50px) scale(1);
    – 3. image has transform: translateY(-40px) rotate(0deg) translateX(100px) scale(1);
    …

  • When clicking on an image in the background of the Active image, it should scroll unless the clicked image is active

-I want to display dots and arrows for the navigation as well

The Data is coming from a JSON file. Since the slider is a mixin it should be display the slider with 4 images just as with 8 or 9 images.

I on a few websites that JS is calculating the CSS transition dynamically.
WHAT SHOULD I GOOGLE FOR?

2

Well, you have different possibilities :

  1. Looking for a complete library to do it (google wow-slider, flickity and many more good JS libraries around)
    http://wowslider.com/fr/
    https://flickity.metafizzy.co/

  2. Using a JS component of a Material design framework like Bootstrap, UIKit, Foundation, Semantic UI, Bulma… If you started your project with a CSS framework, each one of them has a dedicated slider
    In both cases, you still will have to apply your transition CSS code after, but no real big deal here.

My answer has to be general, as you don’t mention conditions ( which CMS you’re gonna use or maybe from scratch)

1 Like