How to customize slider?

Carousel Slider Framework Owl Carousel: http://owlgraphic.com/owlcarousel/index.html http://owlgraphic.com/owlcarousel/index.html

Setup Html: to use slider in your element, you don’t need any special markup. All you need is to wrap your divs (owl works with any type element) inside the container element

. Class “em-slider” is mandatory to apply proper styles.


Your Content

Your Content

Your Content

Your Content

Your Content

Your Content

Your Content
...

Custom Options: to customize your slider, just add data-… attribute to element. All of the options below are available to customize Owl Carousel.

    1. data-emslider-items: This variable allows you to set the maximum amount of items displayed at a time with the widest browser width
    2. data-emslider-desktop: This allows you to preset the number of slides visible with a particular browser width (<=1200px and >992px)
    3. data-emslider-desktop-small: This allows you to preset the number of slides visible with a particular browser width (<=992px and >769px)
    4. data-emslider-tablet: This allows you to preset the number of slides visible with a particular browser width (<=768px and >480px)
    5. data-emslider-mobile: This allows you to preset the number of slides visible with a particular browser width (<=480px)
    6. data-emslider-navigation: Show navigation
    7. data- emslider-pagination: Show pagination
    8. data- emslider-pagination-numbers: Show numbers inside pagination buttons

Example:

    data-emslider-desktop-small="3" data-emslider-tablet="3" data-emslider-mobile="2">



    ….