Create A Basic Automatic Slideshow/Carousel with jQuery
File Size: | 198 KB |
---|---|
Views Total: | 1715 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple jQuery content slider plugin which allows you to present any content (e.g. text, images) in an auto-fading & infinite slideshow (Carousel).
How to use it:
1. Insert images & text into the slideshow with follows.
<div id="slider"> <div class="slide"> <div class="slide-copy"> <h2>Slide One</h2> <p>Text content here</p> </div> <img src="img/slide1.jpg" class="active"> </div> <div class="slide"> <div class="slide-copy"> <h2>Slide Two</h2> <p>Text content here</p> </div> <img src="img/slide2.jpg"> </div> <div class="slide"> <div class="slide-copy"> <h2>Slide Three</h2> <p>Text content here</p> </div> <img src="img/slide3.jpg"> </div> <div class="slide"> <div class="slide-copy"> <h2>Slide Four</h2> <p>Text content here</p> </div> <img src="img/slide4.jpg"> </div> <div class="slide"> <div class="slide-copy"> <h2>Slide Five</h2> <p>Text content here</p> </div> <img src="img/slide5.jpg"> </div> </div>
2. Create a next/prev navigation for the slideshow.
<img src="img/arrow-left.png" alt="Previous" id="prev"> <img src="img/arrow-right.png" alt="Next" id="next">
3. The basic slideshow styles.
#slider { width: 940px; height: 350px; overflow: hidden; float: left; padding: 3px; border: #666 solid 2px; border-radius: 5px; } #slider img { width: 940px; height: 350px; } .slide { position: absolute; } .slide-copy { position: absolute; bottom: 0; left: 0; padding: 20px; background: 7f7f7f; background: rgba(0,0,0,0.5); } #prev, #next { float: left; margin-top: 130px; cursor: pointer; position: relative; z-index: 100; } #prev { margin-right: -45px; } #next { margin-left: -45px; }
4. Include the necessary jQuery library in the web page.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
5. Enable the slideshow with a little bit JavaScript.
$(document).ready(function(){ //Set options var speed = 500; //fade speed var autoswitch = true; // auto slider option var autoswitch_speed = 4000 //auto slider speed // Add initial active class $(".slide").first().addClass("active"); // Hide all slides $(".slide").hide(); // Show first slide $(".active").show(); // Next Handler $('#next').on('click', nextSlide); // Prev Handler $('#prev').on('click', prevSlide); // Auto Slider Handler if(autoswitch == true){ setInterval(nextSlide,autoswitch_speed); } // Switch to next slide function nextSlide(){ $('.active').removeClass('active').addClass('oldActive'); if($('.oldActive').is(':last-child')){ $('.slide').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); } $('.oldActive').removeClass('oldActive'); $('.slide').fadeOut(speed); $('.active').fadeIn(speed); } // Switch to prev slide function prevSlide(){ $('.active').removeClass('active').addClass('oldActive'); if($('.oldActive').is(':first-child')){ $('.slide').last().addClass('active'); } else { $('.oldActive').prev().addClass('active'); } $('.oldActive').removeClass('oldActive'); $('.slide').fadeOut(speed); $('.active').fadeIn(speed); } });
This awesome jQuery plugin is developed by pmdenlinger. For more Advanced Usages, please check the demo page or visit the official website.