Simple Cross-device Carousel Slider Plugin with jQuery - Infinite Slider
File Size: | 521 KB |
---|---|
Views Total: | 2802 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Infinite Slider is a lightweight (~4kb minified) jQuery plugin to create a touch-enabled, infinite-looping and auto-scrolling content carousel on your web page/application.
How to use it:
1. Load jQuery library and the jQuery infinite slider plugin on the web page.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/infinite-slider-min.js"></script>
2. Load the jQuery touchSwipe plugin to detect single and multiple finger swipes, pinches on the touch devices, with a fallback to mouse 'drags' on the desktop.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
3. Create content slides and insert your images into the content carousel using CSS background-image
property.
<div class="slider-wrapper"> <div class="slider-box" style="background-image: url('1.jpg');"> CONTENT 1 ... </div> <div class="slider-box" style="background-image: url('2.jpg');"> CONTENT 2 ... </div> <div class="slider-box" style="background-image: url('3.jpg');"> CONTENT 3 ... </div> </div>
4. The basic CSS styles for the content carousel.
.slider-wrapper { height: 380px; position: relative; } .slider-content { height: 380px; } .slider-box { background-repeat: no-repeat; float: left; height: 380px; }
5. The required CSS to style & position the carousel controls.
.slider-btns { background-image: url('../images/arrows.png'); background-repeat: no-repeat; cursor: pointer; display: block; height: 50px; margin-top: -25px; position: absolute; top: 50%; width: 50px; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ -o-user-select: none; user-select: none; } .slider-prev { background-position: 0px -50px; left: -25px; } .slider-prev:hover { left: -28px; } .slider-next { right: -25px; } .slider-next:hover { right: -28px; } .slider-nav { bottom: 5px; height: 18px; left: 0px; position: absolute; text-align: center; width: 100%; } .slider-nav li.slider-nav-items { background-color: #FFFFFF; border: 4px solid #FFFFFF; border-radius: 100%; cursor: pointer; display: inline-block; height: 10px; margin: 0px 5px; text-indent: -99999px; width: 10px; } .slider-nav li.slider-nav-items:hover { background-color: #444444; } .slider-nav li.slider-nav-items.active { background-color: #00BAFF; } .slider-play-toggle { background-image: url('../images/auto-play-toggle.png'); background-position: 0px -20px; background-repeat: no-repeat; bottom: 5px; cursor: pointer; display: block; height: 20px; position: absolute; right: 5px; width: 20px; z-index: 1; } .slider-play-toggle.stop, .slider-play-toggle.pause { background-position: 0px 0px; }
6. Initialize the content slider with options.
$(function(){ $(".slider-wrapper").infiniteSlider({ animateType : false, // autoplay interval // default: false autoPlaySpeed : 2000, // custom button text btnsText : { next : "", prev : "", pause : "", play : "" }, // stop auto-scrolling on mouse hover // default: false hoverPause : true, // display navigation // default: false navigation : true, // responsive layout responsive : false, // animation speed speed : "normal", // enable touch events // default: false swipe : true, swipeLimit : false, // width of the content slider // default: "100%" width : "100%" }); });
Change log:
2015-08-13
- Update infinite-slider.js
This awesome jQuery plugin is developed by karo73. For more Advanced Usages, please check the demo page or visit the official website.