Minimal Content Carousel Slider Plugin with jQuery and CSS3
File Size: | 3.1 KB |
---|---|
Views Total: | 2039 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple and easy-to-use jQuery & CSS3 carousel slider which allows to cycle through a set of Html contents with smooth sliding effect.
How to use it:
1. Include the Font Awesome 4 for the control icons.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
2. Create a content slider with controls as follows. Use Html5 data-color attribute to specify the background color for each slide.
<div id="slider-wrap"> <ul id="slider"> <li data-color="#1abc9c"> <div> <h3>Slide #1</h3> <span>Sub-title #1</span> </div> </li> <li data-color="#1abc9c"> <div> <h3>Slide #2</h3> <span>Sub-title #2</span> </div> </li> <li data-color="#1abc9c"> <div> <h3>Slide #3</h3> <span>Sub-title #3</span> </div> </li> </ul> <!--controls--> <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div> <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div> <div id="counter"></div> <div id="pagination-wrap"> <ul> </ul> </div> <!--controls--> </div>
3. The required CSS/CSS3 styles for the content slider.
* { margin: 0; padding: 0; list-style: none; } #slider-wrap { width: 600px; height: 400px; position: relative; overflow: hidden; } #slider-wrap ul#slider { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #slider-wrap ul#slider li { float: left; position: relative; width: 600px; height: 400px; } #slider-wrap ul#slider li > div { position: absolute; top: 20px; left: 35px; } #slider-wrap ul#slider li > div h3 { font-size: 36px; text-transform: uppercase; } #slider-wrap ul#slider li > div span { font-family: Neucha, Arial, sans serif; font-size: 21px; } #slider-wrap ul#slider li i { text-align: center; line-height: 400px; display: block; width: 100%; font-size: 90px; } /*btns*/ .btns { position: absolute; width: 50px; height: 60px; top: 50%; margin-top: -25px; line-height: 57px; text-align: center; cursor: pointer; background: rgba(0,0,0,0.1); z-index: 100; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; -ms-transition: all 0.1s ease; transition: all 0.1s ease; } .btns:hover { background: rgba(0,0,0,0.3); } #next { right: -50px; border-radius: 7px 0px 0px 7px; } #previous { left: -50px; border-radius: 0px 7px 7px 7px; } #counter { top: 30px; right: 35px; width: auto; position: absolute; } #slider-wrap.active #next { right: 0px; } #slider-wrap.active #previous { left: 0px; } /*bar*/ #pagination-wrap { min-width: 20px; margin-top: 350px; margin-left: auto; margin-right: auto; height: 15px; position: relative; text-align: center; } #pagination-wrap ul { width: 100%; } #pagination-wrap ul li { margin: 0 4px; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: 0.5; position: relative; top: 0; } #pagination-wrap ul li.active { width: 12px; height: 12px; top: 3px; opacity: 1; box-shadow: rgba(0,0,0,0.1) 1px 1px 0px; } /*ANIMATION*/ #slider-wrap ul, #pagination-wrap ul li { -webkit-transition: all 0.3s cubic-bezier(1, .01, .32, 1); -moz-transition: all 0.3s cubic-bezier(1, .01, .32, 1); -o-transition: all 0.3s cubic-bezier(1, .01, .32, 1); -ms-transition: all 0.3s cubic-bezier(1, .01, .32, 1); transition: all 0.3s cubic-bezier(1, .01, .32, 1); }
4. Include the latest version of jQuery library at the end of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
5. The JQuery script to enable the content slider.
var pos = 0; // current position var totalSlides = $('#slider-wrap ul li').length; var sliderWidth = $('#slider-wrap').width(); $(document).ready(function(){ $('#slider-wrap ul#slider').width(sliderWidth*totalSlides); $('#next').click(function(){ slideRight(); }); $('#previous').click(function(){ slideLeft(); }); var autoSlider = setInterval(slideRight, 3000); $.each($('#slider-wrap ul li'), function() { var c = $(this).attr("data-color"); $(this).css("background",c); var li = document.createElement('li'); $('#pagination-wrap ul').append(li); }); countSlides(); pagination(); $('#slider-wrap').hover( function(){ $(this).addClass('active'); clearInterval(autoSlider); }, function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); } ); }); function slideLeft(){ pos--; if(pos==-1){ pos = totalSlides-1; } $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos)); countSlides(); pagination(); } function slideRight(){ pos++; if(pos==totalSlides){ pos = 0; } $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos)); countSlides(); pagination(); } function countSlides(){ $('#counter').html(pos+1 + ' / ' + totalSlides); } function pagination(){ $('#pagination-wrap ul li').removeClass('active'); $('#pagination-wrap ul li:eq('+pos+')').addClass('active'); }
This awesome jQuery plugin is developed by andrecortellini. For more Advanced Usages, please check the demo page or visit the official website.