Simplest jQuery Content Carousel Slider Plugin
File Size: | 8.19 KB |
---|---|
Views Total: | 2400 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A really simple jQuery slider plugin which allows you to infinitely and vertically loop through a list of Html content (e.g. text, images) with a bullets navigation.
Basic Usage:
1. Import jQuery library and the jQuery simple slider plugin into your document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/simpleslider.js"></script>
2. Create a list of Html content you wish to loop through, and a bullets navigation which allows you to navigate between the slides manually. The whole markup should be like this:
<div class="slide-wrap"> <div class="slide-mask"> <ul class="slide-group"> <li class="slide">Content 1</li> <li class="slide">Content 2</li> <li class="slide">Content 3</li> <li class="slide">Content 4</li> <li class="slide">Content 5</li> <li class="slide">Content 6</li> </ul> </div> <div class="slide-nav"> <ul> <li class="bullet"></li> <li class="bullet"></li> <li class="bullet"></li> <li class="bullet"></li> <li class="bullet"></li> <li class="bullet"></li> </ul> </div> </div>
3. The core CSS styles for the content slider.
.slide-wrap { margin: 5% auto 0; width: 50%; } .slide-mask { position: relative; overflow: hidden; height: 130px; } .slide-group { position: absolute; top: 0px; left: 0; width: 100%; } .slide { height: 130px; font: 100 90px/135px; font-size: 2em; color: #fff; text-align: center; text-transform: uppercase; list-style-type: none; margin-left: -70px; }
4. Style the navigation bullets whatever you like.
.slide-nav { text-align: center; } .slide-nav ul { margin: 0; padding: 0; list-style-type: none; } .slide-nav li { display: inline-block; width: 10px; height: 10px; background: rgb(175, 56, 56); cursor: pointer; margin-left: .5em; list-style-type: none; border-radius: 50%; } .slide-nav li.current { background: rgb(144, 39, 39); }
This awesome jQuery plugin is developed by philipehsing. For more Advanced Usages, please check the demo page or visit the official website.