This time I will share jQuery Plugin and tutorial about Ultra-light jQuery Content Slider Plugin – basicSlider, hope it will help you in programming stack.
This is a lightweight, simple-to-use jQuery slider which helps you create a basic slider / carousel UI from an unordered list of web content. The slider will automatically slide to next slide content in every 3 seconds. Also comes with a loading element which indicates the remaining delay time.
How to use it:
1. Insert a list of web content together with the navigation controls into the webpage.
04 |
<div class="loading"></div> |
07 |
<div class="arrow arrow-left"></div> |
11 |
<li class="slide slide1"></li> |
12 |
<li class="slide slide2"></li> |
13 |
<li class="slide slide3"></li> |
14 |
<li class="slide slide4"></li> |
15 |
<li class="slide slide5"></li> |
16 |
<li class="slide slide6"></li> |
20 |
<div class="arrow arrow-right"></div> |
2. The main CSS styles for the slider.
03 |
<!-- Loading element --> |
04 |
<div class="loading"></div> |
07 |
<div class="arrow arrow-left"></div> |
11 |
<li class="slide slide1"></li> |
12 |
<li class="slide slide2"></li> |
13 |
<li class="slide slide3"></li> |
14 |
<li class="slide slide4"></li> |
15 |
<li class="slide slide5"></li> |
16 |
<li class="slide slide6"></li> |
20 |
<div class="arrow arrow-right"></div> |
3. Style the next/right navigation:
04 |
background: rgba(255,255,255,0.0); |
08 |
.arrow:hover { background: rgba(255,255,255,0.3); } |
5. Place jQuery library and the core JavaScript file app.js at the bottom of the page.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="app.js"></script> |
6. Initialize the slider and done.
This awesome jQuery plugin is developed by mayo83. For more Advanced Usages, please check the demo page or visit the official website.
