SSliderComponent

Platform  

html

   │    Support  

Chromium supported

Firefox supported

Safari supported

Edge supported

Since  2.0.0

   │   

Olivier Bossel

   │   

beta

  Preview

Simple slider

 

Loading code example. Please wait...

Tight slider

 

Loading code example. Please wait...

Contained slider

 

Loading code example. Please wait...

Vertical slider

 

Loading code example. Please wait...

Vertical tight slider

 

Loading code example. Please wait...

Vertical contained slider

 

Loading code example. Please wait...

Slider with progressbar

 

Loading code example. Please wait...

Slider with progressbar, loop and timer

 

Loading code example. Please wait...

  Features

• Exteremely customizable

• Simply controls (next, previous) built-in

• Default dots navigation built-in

• Custom navigation capabilities built-in

• Horizontal and vertical direction built-in

• Swipe navigation built-in

• Loop capability built-in

• Timer capability built-in

• Mousewheel navigation

• Custom behavior (extensions) capabilities built-in

• Slideable behavior available

  Import

  Install

  Events

1. s-slider.goto

   Dispatched just before the transitionn

2. s-slider.goto-end

   Dispatched just after the transition

3. s-slider.next

   Dispatched just before the transition to the next slide

4. s-slider.previous

   Dispatched just before the transition to the previous slide

5. s-slider.play

   Dispatched when the slider is set to play

6. s-slider.stop

   Dispatched when the slider is set to stop

7. s-slider

   Dispatched for every events of this component. Check the detail.eventType prop for event type

  Interface

1. direction

   horizontal

   • horizontal
   • vertical

   String

   Specify the slider direction. Can be horizontal or vertical

2. behaviors

   {}

   Object

   Specify the available behaviors for the slider

3. behavior

   scroll

   • none
   • scroll
   • transform

   String

   Specify which behavior your want to use for your slider. Behavior are like "presets" with different animations, etc...

4. pad

   false

   Boolean

   Specify if you want to pad the slides if for example the first slide does not take the while width of the slider, a padding-(block|inline)-start will be applied to center this first slide. Same for the last one

5. nextIconClass

   String

   Specify the class of the next icon

6. previousIconClass

   String

   Specify the class of the previous icon

7. uiContainer

   String|Boolean

   Specify if you want an "s-container:..." class applied on the .s-slider_ui element

8. controls

   false

   Boolean

   Specify if you want to display the controls or not. Controls are the previous and next icons

9. nav

   false

   Boolean

   Specify if you want to display the nav or not. Nav are the dots

10. swipe

    false

    Boolean

    Specify if you want your slider to support swipe navigation or not

11. mousewheel

    false

    Boolean

    Specify if you want to enable the mousewheel event on the slider or not

12. clickOnSlide

    false

    Boolean

    Specify if you want to enable the click on the slides to navigate or not

13. loop

    false

    Boolean

    Specify if you want to enable the loop behavior or not

14. slide

    0

    Number

    Specify the active slide id

15. slidesByPage

    1

    Number

    Specify how many slides you want by page. Pages are what is used to construct the dot nav and will determine how many slides will be passed on "next" and "previous"

16. progress

    false

    Boolean

    Specify if you want to display the progress bar or not

17. timer

    Number

    Specify a timer that will be applied on each slides and go to the next one after the timer is over. For custom timer by slide, specify the timer="1200" attribute on the slides you want

18. autoplay

    true

    Boolean

    Specify if you want the slider to auto play itself when some timer(s) has been set

19. intersectionClasses

    false

    Boolean

    Specify if you want the classes that describe each slide intersection classes like "in-10", "in-20", etc...

20. transitionDuration

    500

    Number

    Specify the transition duration of the slider in ms

21. transitionEasing

    Function

    Specify the transition easing of the slider

22. transitionHandler

    Function

    Specify a function that will take care of transitioning the slider from the current item to the next/previous