Flexible & Responsive jQuery Carousel Plugin
File Size: | 5.07 KB |
---|---|
Views Total: | 2027 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A flexible and responsive jQuery carousel plugin which allows you to cycle through a set of slide items as many as possible based on the container's width.
How to use it:
1. Create the Html for a product carousel with next/pre controls.
<div class="carousel-wrapper" id="products"> <ul class="carousel-inner clearfix"> <li class="item"> <p class="item-info"> Slide 1 </p> </li> <li class="item"> <p class="item-info"> Slide 2 </p> </li> <li class="item"> <p class="item-info"> Slide 3 </p> </li> <li class="item"> <p class="item-info"> Slide 4 </p> </li> ... </ul> <a href="#" class="carousel-left"></a> <a href="#" class="carousel-right"></a> </div>
2. The required CSS styles for the product carousel.
.carousel-wrapper { width: 100%; height: 250px; overflow: hidden; position: relative; } .carousel-inner { height: 100%; position: relative; padding: 0 0 0 50px; left: 0; margin: 0; transition: all 1s; } .carousel-inner .item { height: 100%; float: left; list-style: none; padding: 0; margin: 0 50px 0 0; } .carousel-inner .item:before { counter-increment: item; content: counter(item); } .carousel-left, .carousel-right { width: 30px; height: 100%; position: absolute; top: 0; } .carousel-left:before, .carousel-right:before { content: ""; background: #666; width: 30px; height: 100%; position: absolute; top: 0; opacity: 0.5; } .carousel-left:hover:before, .carousel-right:hover:before { opacity: 0.8; } .carousel-left { left: 0; } .carousel-right { right: 0; }
3. Add your own styles to the product carousel.
.carousel-wrapper { background: #055252; padding: 30px 0; } .carousel-inner .item { background: #eee; padding: 1em 2em; font-size: 1.2em; box-sizing: border-box; box-shadow: 1px 1px 3px 0 #333; } .carousel-inner .item:hover { background: #fff; box-shadow: 1px 1px 3px 2px #333; } .carousel-left:before, .carousel-right:before { background: url(arrows.png) no-repeat; width: 50px; } .carousel-left:before { left: 0; background-position: -20% center; } .carousel-right:before { right: 0; background-position: -40px center; }
4. Include the necessary jQuery library at the end of your web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
5. The core Javascript for the carousel.
var Carousel = function (elId, mode) { var wrapper = document.getElementById(elId); var innerEl = wrapper.getElementsByClassName('carousel-inner')[0]; var leftButton = wrapper.getElementsByClassName('carousel-left')[0]; var rightButton = wrapper.getElementsByClassName('carousel-right')[0]; var items = wrapper.getElementsByClassName('item'); this.carouselSize = items.length; this.itemWidth = null; this.itemOuterWidth = null; this.currentStep = 0; this.itemsAtOnce = 3; this.minItemWidth = 200; this.position = innerEl.style; this.mode = mode; this.init = function (mode) { this.itemsAtOnce = mode; this.calcWidth(wrapper, innerEl, items); cb_addEventListener(leftButton, 'click', this.goLeft.bind(this)); cb_addEventListener(rightButton, 'click', this.goRight.bind(this)); cb_addEventListener(window, 'resize', this.calcWidth.bind(this, wrapper, innerEl, items)); }; return this.init(mode); }; Carousel.prototype = { goLeft: function(e) { e.preventDefault(); if (this.currentStep) { --this.currentStep; } else { this.currentStep = this.carouselSize - this.itemsAtOnce; } this.makeStep(this.currentStep); return false; }, goRight: function(e) { e.preventDefault(); if (this.currentStep < (this.carouselSize - this.itemsAtOnce)) { ++this.currentStep; } else { this.currentStep = 0; } this.makeStep(this.currentStep); return false; }, makeStep: function(step) { this.position.left = -(this.itemOuterWidth * step) + 'px'; }, calcWidth: function(wrapper, innerEl, items) { this.beResponsive(); var itemStyle = window.getComputedStyle(items[0]); var innerElStyle = innerEl.style; var carouselLength = this.carouselSize; var wrapWidth = wrapper.offsetWidth - parseInt(itemStyle.marginRight, 10) * (this.itemsAtOnce + 1); innerElStyle.display = 'none'; this.itemWidth = wrapWidth / this.itemsAtOnce; this.itemOuterWidth = this.itemWidth + parseInt(itemStyle.marginRight, 10); for (i = 0; i < carouselLength; i++) { items[i].style.width = this.itemWidth + 'px'; } innerElStyle.width = this.itemOuterWidth * this.carouselSize + 'px'; innerElStyle.display = 'block'; }, beResponsive: function() { var winWidth = window.innerWidth; if (winWidth >= 650 && winWidth < 950 && this.itemsAtOnce >= 2) { this.itemsAtOnce = 2; } else if (winWidth < 650) { this.itemsAtOnce = 1; } else { this.itemsAtOnce = this.mode; } } } /** * Cross-browser Event Listener **/ function cb_addEventListener(obj, evt, fnc) { if (obj && obj.addEventListener) { obj.addEventListener(evt, fnc, false); return true; } else if (obj && obj.attachEvent) { return obj.attachEvent('on' + evt, fnc); } return false; }
6. Initialize the carousel and set how many items will be shown on one slide.
if (document.getElementById('products')) { var productsCarousel = new Carousel('products', 5); }
This awesome jQuery plugin is developed by anilkabobo. For more Advanced Usages, please check the demo page or visit the official website.