Swiper Scrollbar - Add eye-catching and responsive scrollbar

Swiper Scrollbar is the ultra small (about 1Kb minified and gzipped) and free JavaScript plugin for iDangero.us Swiper 2.5+ that adds fully customizable scrollbars to your Swiper slider (or app).

It works in all browser that support CSS3 2D Transforms: all modern browsers including IE8 and IE9.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: idangero.us

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
<link rel="stylesheet" href="path_to_css/idangerous.swiper.scrollbar.css">
  
<script src="path_to_js/idangerous.swiper-1.x.min.js"></script>
<script src="path_to_js/idangerous.swiper.scrollbar-1.x.js"></script>

2. HTML

<div class="swiper-container">
..wrapper and slides here...
</div>
<!-- Scrollbar: -->
<div class="swiper-scrollbar"></div>

3. JAVASCRIPT

var swiper = new Swiper('.swiper-container', {
    ...some Swiper's core options here...
    //Scrollbar:
    scrollbar: {
        container : '.swiper-scrollbar',
        draggable : true,
        hide: true,
        snapOnRelease: true
    }
});

4. CSS

.swiper-scrollbar {
  ... your scrollbar styles here...
}
.swiper-scrollbar-drag {
  ... styles for moving drag element inside ...
}