Preview

Usage

<ul class="slider" data-options="arrows:true,nav:true">
    <li>
        
    </li>
    <li>
      
    </li>
    <li>
      
    </li>
</ul>

<ul class="slider" data-options="type:carousel,arrows:true,nav:true,perView:3">
    <li>
        
    </li>
    <li>
      
    </li>
    <li>
      
    </li>
</ul>

Installation

<script src='themekit/scripts/glide.min.js'></script>
<link rel="stylesheet" href='themekit/css/glide.css'>

Settings

Name Type Description
Items content Information The slider item content accept any content but usually it contain items like a image box, a media box or a content box.
Options Attribute
type:value Slider type, choose between slider and carousel. Default slider.
perView:123 Number of the items visible on the single viewport. Default 1.
perViewMd:123 Number of the items visible on the single viewport only on medium screens.
perViewSm:123 Number of the items visible on the single viewport only on small screens.
perViewXs:123 Number of the items visible on the single viewport only on extra small screens.
gap:123 Items margin. Default 10.
arrows:value Show the right and left arrows, choose between true and false. Default false.
nav:value Show the bottom bullets, choose between true and false. Default false.
focusAt:value Focus currently active slide at a specified position in the track. Available inputs are center or a number from 0 to N. Default 0.
controls:out Show the arrows and the bullets outside the slider viewport.
You can pass the plugin options directly from the component with the attribute data-options="optione:value,optione:value, ...". To view the full options list visit the plugin documentation page.
Try it perView:2 gap:50 controls:out
Manual initialization Attribute Add the attribute data-trigger="manual" to the component to stop the auto execution of the component on page load. Use this feature when the component is placed inside a container. You can manually initializate the component with the function $("#target").initSlider().
Documentation
Image box
Media box
Content box