Basic Image Carousel Slider with jQuery - marquisina.js
File Size: | 3.11 KB |
---|---|
Views Total: | 1311 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
marquisina.js is a simple and lightweight jQuery plugin that makes it easier to implement an infinite-looping image carousel/slider on your web page.
How to use it:
1. Insert a list of images into a container element as shown below.
<div id="carousel"> <ul> <li><img src="http://lorempixel.com/230/167/city" alt=""></li> <li><img src="http://lorempixel.com/230/167/food" alt=""></li> <li><img src="http://lorempixel.com/230/167/animals" alt=""></li> <li><img src="http://lorempixel.com/230/167/cats" alt=""></li> <li><img src="http://lorempixel.com/230/167/fashion" alt=""></li> </ul> </div>
2. Create prev/next controls for the image carousel.
<a href="#" id="prev">«</a> <a href="#" id="next">»</a>
3. Load the jQuery marquisina.js plugin after you have jQuery library loaded.
#carousel { display: inline-block; vertical-align: middle; } #carousel { background-color: #88BC40; border-radius: 4px; border: 10px solid white; box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.3); overflow: hidden; position: relative; width: 460px; z-index: 5; } #carousel ul { margin: 0; padding: 0; position: relative; width: 1200px; } #carousel li { float: left; font-size: 30px; height: 167px; line-height: 167px; list-style: none; margin: 0; position: relative; width: 230px; } #next { left: -35px; } #next:hover { left: -25px; } #prev { right: -35px; } #prev:hover { right: -25px; }
4. The required CSS styles for the image carousel.
#carousel { display: inline-block; vertical-align: middle; } #carousel { background-color: #88BC40; border-radius: 4px; border: 10px solid white; box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.3); overflow: hidden; position: relative; width: 460px; z-index: 5; } #carousel ul { margin: 0; padding: 0; position: relative; width: 1200px; } #carousel li { float: left; font-size: 30px; height: 167px; line-height: 167px; list-style: none; margin: 0; position: relative; width: 230px; } #next { left: -35px; } #next:hover { left: -25px; } #prev { right: -35px; } #prev:hover { right: -25px; }
5. Call the plugin on document ready and specify the CSS selectors of prev/next controls.
$('#carousel').marquesina('#prev', '#next');
This awesome jQuery plugin is developed by fmrojas. For more Advanced Usages, please check the demo page or visit the official website.