Small jQuery Carousel Slider with Cool CSS3 Transitions
File Size: | 170 KB |
---|---|
Views Total: | 2028 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A tiny and simple-to-use jQuery carousel slider plugin which enables you to switch a group of images (or Html content) with cool CSS3 powered transitions effects.
How to use it:
1. The markup structure to create a carousel slider containing mixed Html content.
<div id="slider"> <ul> <li> <a href="#"><img src="1.jpg" alt="" /></a> <div class="overlay"> <p> <a href="#">Caption 1</a> </p> </div> </li> <li> <a href="#"><img src="2.jpg" alt="" /></a> <div class="overlay"> <p> <a href="#">Caption 2</a> </p> </div> </li> <li> <a href="#"><img src="3.jpg" alt="" /></a> <div class="overlay"> <p> <a href="#">Caption 3</a> </p> </div> </li> <li> <a href="#"><img src="4.jpg" alt="" /></a> <div class="overlay"> <p> <a href="#">Caption 4</a> </p> </div> </li> <li> <a href="#"><img src="5.jpg" alt="" /></a> <div class="overlay"> <p> <a href="#">Caption 5</a> </p> </div> </li> <li> <a href="#"><img src="6.jpg" alt="" /></a> <div class="overlay"> <p> <a href="#">Caption 6</a> </p> </div> </li> </ul> </div>
2. Create next/prev links to navigate the carousel slider.
<a href="#" class="prev"> </a> <a href="#" class="next"> </a>
3. Load jQuery library and the jQuery JavaScript Carousel plugin at the bottom of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="carousel.js"></script>
4. The CSS for the next/prev navigation.
.prev { background: url(../images/left-on.png) no-repeat scroll 0 0 transparent; display: block; float: left; height: 40px; margin-top: 100px; width: 23px; } .prev-disable { background: url(../images/left-off.png) no-repeat scroll 0 0 transparent; } .next { background: url(../images/right-on.png) no-repeat scroll 0 0 transparent; display: block; float: right; height: 40px; margin-top: 100px; width: 23px; } .next-disable { background: url(../images/right-off.png) no-repeat scroll 0 0 transparent; }
5. The CSS/CSS3 style rules for the carousel images and transitions.
#slider ul li { position: absolute; } #slider ul li.prev-slide { opacity: 1; transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transition: opacity 400ms ease 0s, transform 400ms ease 0s; -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s; -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s; -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s; } #slider ul li.selected { opacity: 1; transform: translate(310px, 0px); -ms-transform: translate(310px, 0px); -webkit-transform: translate(310px, 0px); -o-transform: translate(310px, 0px); -moz-transform: translate(310px, 0px); transition: opacity 400ms ease 0s, transform 400ms ease 0s; -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s; -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s; -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s; } #slider ul li.next-slide { opacity: 1; transform: translate(620px, 0px); -ms-transform: translate(620px, 0px); -webkit-transform: translate(620px, 0px); -o-transform: translate(620px, 0px); -moz-transform: translate(620px, 0px); transition: opacity 400ms ease 0s, transform 400ms ease 0s; -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s; -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s; -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s; } #slider ul li.prev-hidden { opacity: 0; transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transition: opacity 400ms ease 0s, transform 400ms ease 0s; -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s; -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s; -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s; } #slider ul li.next-hidden { opacity: 0; transform: translate(620px, 0px); -ms-transform: translate(620px, 0px); -webkit-transform: translate(620px, 0px); -o-transform: translate(620px, 0px); -moz-transform: translate(620px, 0px); transition: opacity 400ms ease 0s, transform 400ms ease 0s; . -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s; -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s; -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s; }
6. Style the container overlay (image caption).
#slider .overlay { background: none repeat scroll 0 0 rgba(10, 10, 10, 0.5); padding: 10px; position: relative; top: -43px; width: 100%; } #slider .overlay > p { font-weight: bold; text-align: center; text-shadow: 2px 5px 2px rgba(132, 130, 125, 0.98); } #slider .overlay > p a { color: #fff; }
7. Initialize the carousel slider.
$('#content').Carousel('init', {});
This awesome jQuery plugin is developed by luigicr. For more Advanced Usages, please check the demo page or visit the official website.