camRoll Slider
http://dim1100010.info/projects/camroll-slider/index.html
Usage
<head> <link href="camroll_slider.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="camroll_slider.js"></script> </head> <body> <div id="my-slider" class="crs-wrap"> <div class="crs-screen"> <div class="crs-screen-roll"> <div class="crs-screen-item" style="background-image: url(#)"> <div class="crs-screen-item-content"><h1>Lorem...</h1></div> </div> </div> </div> <div class="crs-bar"> <div class="crs-bar-roll-current"></div> <div class="crs-bar-roll-wrap"> <div class="crs-bar-roll"> <div class="crs-bar-roll-item" style="background-image: url(#)"></div> </div> </div> </div> </div> </body>
#my-slider { width: 100%; height: 404px; }
$("#my-slider").camRollSlider();
Responsible
@media (max-width: 640px) { #my-slider .crs-bar-roll-current { width: 38px; height: 38px; } #my-slider .crs-bar-roll-item { width: 30px; height: 30px; } }
Requirements
Browser must support jQuery 3+ and CSS Transition.