Simple and Responsive jQuery Carousel Slider Plugin - simple Slider
File Size: | 6.76KB |
---|---|
Views Total: | 9119 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

simple Slider is a simple, lightweight and "expandable" jQuery carousel slider plugin with several options, which supports all the html elements like text, image, etc.
Features:
- Prev/Next Navigation
- Numbered Navigation
- Autoplay supported
- Multiple columns per slide supported
- Touchwipe support for mobile devices
- Responsive and cross-browser
Basic Usage:
1. Include jQuery library and jQuery simple Slider on the page
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="simpleslider.js"></script>
2. Include touchwipe.js for obtain touch gestures from mobile devices (OPTIONAL)
<script type="text/javascript" src="touchwipe.js"></script>
3. Markup html structure
<div class="carousel responsive"> <div class="carousel-container"> <div class="carousel-wrapper demo"> <div class="carousel-element"> Content 1 </div> <div class="carousel-element"> Content 2 </div> ... </div> </div> </div> </div>
4. The CSS
/* Containers */ .carousel { display: block; overflow: hidden; position: relative; width: 400px; margin: 10px auto; } .carousel-container { border: 1px solid #cccccc; margin: 20px 40px; display: block; overflow: hidden; width: 99%; margin: 0 auto; } .carousel-wrapper, .carousel-wrapper2 { clear: both; height: auto; overflow: hidden; margin: 0; } .carousel-element { width: 100%; height: 150px; float: left; margin: 0; padding: 0; border: 1px; } /* Text */ .infos { background: #e5e5e5; display: block; padding: 4px; } .infos p { margin: 0; padding: 2px !important; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 10px; } .infos p a { text-decoration: underline; color: #e16f00; text-transform: lowercase; } .carousel-element span.t1 { color: #53b9ff; font-size: 24px; font-family: Georgia; text-transform: uppercase; } .carousel-element span.t2 { color: #0b7cc3; font-size: 28px; font-family: Georgia; text-transform: uppercase; } .carousel-element span.t3 { color: #e37a00; font-size: 20px; font-family: Verdana; } .carousel-element span.t3 span { font-size: 28px; font-weight: bold; } .carousel-element span.t1, .carousel-element span.t2, .carousel-element span.t3 { display: block; text-align: center; line-height: 34px; } /* Prev/Next nav */ .carousel-nav, .carousel-index { display: block; margin: 0 auto; } .carousel-nav { position: absolute; margin-top: -40px; width: 100%; clear: both; float: left; } .carousel-nav .precedent { float: left; display: block; margin-left: 15px; margin-top: 0; color: #000; } .carousel-nav .suivant { float: right; display: block; margin-right: 15px; margin-top: 0; color: #000; } /* Numbered nav */ .carousel-index { display: block; margin: 0 auto; width: 100%; } .carousel-index a { display: block; padding: 5px; text-align: center; float: left; text-decoration: none; margin: 3px; background-color: #000; color: #fff; border: 1px solid white; width: 18px; } .carousel-index a:hover, .carousel-index a.clic { display: block; padding: 5px; text-align: center; float: left; text-decoration: none; margin: 3px; background-color: #fff; color: #000; border: 1px solid black; } /* Responsive slider */ .responsive { width: 80% !important; }
6. Call the plugin with all options
<script type="text/javascript"> jQuery(document).ready(function() { jQuery(".slider6").simpleSlider({ navigation: true, // display/hide Prev/Next buttons prevText: "Previous", // Set text for previous nav button. nextText: "Next", // Set text for next nav button. pagination: true, // Used to display/hide numbered navigation. autoplay: true, // Auto slide items. delay: 8000, // Time in milliseconds between transitions speed: 500, // Slide speed in milliseconds numItems: 1 // Display items in columns. }); }); </script>
This awesome jQuery plugin is developed by efardet. For more Advanced Usages, please check the demo page or visit the official website.