Slim Infinite Image Carousel Plugin For jQuery - Slim Slider
File Size: | 14.2 KB |
---|---|
Views Total: | 6181 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Slim Slider is a really simple jQuery plugin used to create a nice clean, infinite-looping image carousel/slider from a plain Html list.
How to use it:
1. Insert a list of images into the carousel.
<div id="slider-inner"> <ul> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> <li><img src="img/5.jpg" alt=""></li> </ul> </div>
2. Create links for next/prev navigation.
<a href="#" id="previous">«</a> <a href="#" id="next">»</a>
3. Wrap the image list & navigation into a container. The full markup structure should be like this:
<div class="slider-demo"> <a href="#" id="previous">«</a> <div id="slider-inner"> <ul> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> <li><img src="img/5.jpg" alt=""></li> </ul> </div> <a href="#" id="next">»</a> </div>
4. Load the needed jQuery library and the slider.jquery.js
script at the bottom of the html page.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="js/slider.jquery.js"></script>
5. Initialize the image carousel.
$('#slider-inner').slider('#previous', '#next');
6. The sample CSS to style the image carousel. Feel free to add your own styles to the image carousel as you like.
/* Next/prev navigation */ a#next { left: -35px; transition: all ease 0.5s; } a#next:hover { left: -25px; } a#previous { right: -35px; transition: all ease 0.5s; } a#previous:hover { right: -25px; } .slider-demo { margin: 70px auto; text-align: center; width: 650px; } /* Sider wrapper */ .slider-demo a { background-color: #ededed; border-radius: 50%; color: #444; font-size: 5em; line-height: 60px; padding-bottom: 12px; position: relative; text-decoration: none; width: 72px; z-index: 2; } .slider-demo a:hover { color: black; background-color: #cdcdcd; } .slider-demo a, #slider-inner { display: inline-block; vertical-align: middle; } /* Primaty styles */ #slider-inner { border: 10px solid white; border-radius: 4px; box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.3); overflow: hidden; position: relative; width: 460px; z-index: 5; } #slider-inner ul { margin: 0; padding: 0; position: relative; width: 1200px; } #slider-inner li { background-color: #88BC40; font-size: 30px; float: left; height: 167px; line-height: 167px; list-style: none; margin: 0; position: relative; width: 230px; }
This awesome jQuery plugin is developed by jvdelso. For more Advanced Usages, please check the demo page or visit the official website.