Responsive Infinite Carousel with jQuery and CSS3
File Size: | 2.53 KB |
---|---|
Views Total: | 11022 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A fully responsive jQuery carousel slider which allows you to infinitely loop through a set of Html contents with CSS3 transitions and transforms.
How to use it:
1. Include the necessary jQuery library at the bottom of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2. Include the jQuery transit plugin after jQuery library to help you do CSS3 transformations and transitions in jQuery.
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
3. Create a carousel slider following the Html structure like this:
<div class="wrapper"> <div class="carousel"> <div class="carousel__content"> <div class="item"> <p class="title">First</p> <img src="1.jpg" alt=""> </div> <div class="item"> <p class="title">Second</p> <img src="2.jpg" alt=""> </div> <div class="item"> <p class="title">Third</p> <img src="3.jpg" alt=""> </div> </div> <div class="carousel__nav"> <a href="#" class="nav nav--left">Previous</a> <a href="#" class="nav nav--right">Next</a> </div> </div> </div>
4. The required CSS styles for the carousel slider.
.carousel { width: 100%; position: relative; } .carousel .carousel__content { width: auto; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transition: translate3d(0, 0, 0); } .carousel .carousel__content .item { display: block; float: left; width: 100%; position: relative; } .carousel .carousel__content .item .title { position: absolute; top: 50%; left: 0; margin: -33px 0 0 0; padding: 0; font-size: 3rem; width: 100%; text-align: center; letter-spacing: .3rem; color: #FFF; } .carousel .carousel__content .item .title--sub { margin-top: 20px; font-size: 1.2em; opacity: .5; } .carousel .carousel__content .item img { width: 100%; max-width: 100%; display: block; } .carousel .carousel__nav { position: absolute; width: 100%; top: 50%; margin-top: -17px; left: 0; z-index: 1; } .carousel .carousel__nav .nav { position: absolute; top: 0; color: #000; background: #FFF; padding: 8px 12px; font-weight: bold; text-decoration: none; font-size: .8rem; transition: padding .25s ease; } .carousel .carousel__nav .nav:hover { padding: 8px 20px; } .carousel .carousel__nav .nav--left { border-radius: 0px 3px 3px 0px; } .carousel .carousel__nav .nav--right { right: 0; border-radius: 3px 0px 0px 3px; }
5. You can also add an extra CSS to the wrapper to show the items outside the wrapper.
<div class="wrapper wrapper--demo"> <style> .wrapper--demo { overflow: visible; } .wrapper--demo:after, .wrapper--demo:before { content: ""; position: absolute; width: 800px; height: 100%; top: 0; left: 100%; background: rgba(255, 255, 255, 0.8); z-index: 2; } .wrapper--demo:before { left: -800px; } </style>
6. The Javascript to enable the responsive infinite carousel.
(function() { var carouselContent, carouselIndex, carouselLength, firstClone, firstItem, isAnimating, itemWidth, lastClone, lastItem; carouselContent = $(".carousel__content"); carouselIndex = 0; carouselLength = carouselContent.children().length; isAnimating = false; itemWidth = 100 / carouselLength; firstItem = $(carouselContent.children()[0]); lastItem = $(carouselContent.children()[carouselLength - 1]); firstClone = null; lastClone = null; carouselContent.css("width", carouselLength * 100 + "%"); carouselContent.transition({ x: "" + (carouselIndex * -itemWidth) + "%" }, 0); $.each(carouselContent.children(), function() { return $(this).css("width", itemWidth + "%"); }); $(".nav--left").on("click", function() { if (isAnimating) { return; } isAnimating = true; carouselIndex--; if (carouselIndex === -1) { lastItem.prependTo(carouselContent); carouselContent.transition({ x: "" + ((carouselIndex + 2) * -itemWidth) + "%" }, 0); return carouselContent.transition({ x: "" + ((carouselIndex + 1) * -itemWidth) + "%" }, 1000, "easeInOutExpo", function() { carouselIndex = carouselLength - 1; lastItem.appendTo(carouselContent); carouselContent.transition({ x: "" + (carouselIndex * -itemWidth) + "%" }, 0); return isAnimating = false; }); } else { return carouselContent.transition({ x: "" + (carouselIndex * -itemWidth) + "%" }, 1000, "easeInOutExpo", function() { return isAnimating = false; }); } }); $(".nav--right").on("click", function() { if (isAnimating) { return; } isAnimating = true; carouselIndex++; return carouselContent.transition({ x: "" + (carouselIndex * -itemWidth) + "%" }, 1000, "easeInOutExpo", function() { isAnimating = false; if (firstClone) { carouselIndex = 0; carouselContent.transition({ x: "" + (carouselIndex * -itemWidth) + "%" }, 0); firstClone.remove(); firstClone = null; carouselLength = carouselContent.children().length; itemWidth = 100 / carouselLength; carouselContent.css("width", carouselLength * 100 + "%"); $.each(carouselContent.children(), function() { return $(this).css("width", itemWidth + "%"); }); return; } if (carouselIndex === carouselLength - 1) { carouselLength++; itemWidth = 100 / carouselLength; firstClone = firstItem.clone(); firstClone.addClass("clone"); firstClone.appendTo(carouselContent); carouselContent.css("width", carouselLength * 100 + "%"); $.each(carouselContent.children(), function() { return $(this).css("width", itemWidth + "%"); }); return carouselContent.transition({ x: "" + (carouselIndex * -itemWidth) + "%" }, 0); } }); }); }).call(this);
This awesome jQuery plugin is developed by lucasmotta. For more Advanced Usages, please check the demo page or visit the official website.