To display multiple images under a specific area generally we use controls like Carousel or Slider. It was noticed these Control majorly appears in main page. Here in the below app I am creating an easily configurable jQuery image Slider. To show you the demo here I am with 3 files index.htm, slider.js and main.css. Slider.js and main.css embedded in index.htm file. By simply copying the below files you can create your own free Jquery Slider.
The logic I implemented here is so simple. In my HTML page I have 2 div’s. One is for slider images and the other one I am using for Auto Slide Show. In my first div I have a ul element. Under this in each li I am loading images using simple image tag from HTML. To customize my Jquery image slider better here I added 2 anchor tags for next and previous actions.
To maintain a healthy look and feel I have few CSS classes in style.css file. As it is a simple jquery slider the main logic is inside the js file. In js file I am with 4 variables. IndivisualSlideWidth and IndivisualSlideHeight are storing li width and height. NumberOfSlides storing total number of images I want to show in Slider. In TotalWidthOfAllSlides I am calculating and storing the total width of UL element. During slide show I am hiding the total length and showing each slide independently. After this in my js file I have 2 functions moveSlideLeft() and moveSlideRight(). These function are responsible for slides movement. To configure auto slider option under on change event of autoOptionCheckbox I am calling the moveSlideRight() function. Here for interval between each slide I declared 5000 milliseconds.
Jquery image Slider Sample Code
jquery-slider.htm
<!DOCTYPE html> <html> <head> <title>Simple JQuery image Slider</title> <!--JQuery CDN Link--> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <!--Applying Styles to the Page--> <link rel="stylesheet" href="main.css"> <script src="slider.js"></script> </head> <body> <h2>JQuery image Slider</h2> <div id="jq_slider"> <a href="#" class="go_next">>></a> <a href="#" class="go_prev"><<</a> <ul> <li><img src="Slide-A.jpg" alt="Katrina Kaif HD Still" title="Katrina Kaif HD Still" /></li> <li><img src="Slide-B.jpg" alt="Priyanka Chopra HD Still" title="Priyanka Chopra HD Still" /></li> <li><img src="Slide-C.jpg" alt="Deepika Paducon HD Still" title="Deepika Paducon HD Still" /></li> <li><img src="Slide-D.jpg" alt="Sonakshi Sinha HD Still" title="Sonakshi Sinha HD Still" /></li> </ul> </div> <div class="auto_slider"> <input type="checkbox" id="autoOptionCheckbox"> <label for="checkbox">Auto Slider Option</label> </div> </body> </html>
slider.js
$(document).ready(function () { /* The below two variables are defined for width and height of Slides */ var IndivisualSlideWidth = $('#jq_slider ul li').width(); var IndivisualSlideHeight = $('#jq_slider ul li').height(); /* The auto Slider Function */ $('#autoOptionCheckbox').change(function(){ /* Defining time in milliseconds for auto Slider option */ setInterval(function () { /* Calling the Function to rotate Slides */ moveSlideRight(); }, 5000); }); /* Counting the Number of Slides */ var NumberOfSlides = $('#jq_slider ul li').length; /* Calculating all Slides width for UL element */ var TotalWidthOfAllSlides = NumberOfSlides * IndivisualSlideWidth; /* Setting width and height for main div */ $('#jq_slider').css({ width: IndivisualSlideWidth, height: IndivisualSlideHeight }); $('#jq_slider ul').css({ width: TotalWidthOfAllSlides, marginLeft: - IndivisualSlideWidth }); $('#jq_slider ul li:last-child').prependTo('#jq_slider ul'); /* This Function is responsible for moving Slide to left */ function moveSlideLeft() { $('#jq_slider ul').animate({ left: + IndivisualSlideWidth }, 300, function () { $('#jq_slider ul li:last-child').prependTo('#jq_slider ul'); $('#jq_slider ul').css('left', ''); }); }; /* This Function is responsible for moving Slide to right */ function moveSlideRight() { $('#jq_slider ul').animate({ left: - IndivisualSlideWidth }, 300, function () { $('#jq_slider ul li:first-child').appendTo('#jq_slider ul'); $('#jq_slider ul').css('left', ''); }); }; /* Handling previous Click Funtionality */ $('a.go_prev').click(function () { moveSlideLeft(); }); /* Handling next Click Funtionality */ $('a.go_next').click(function () { moveSlideRight(); }); });
main.css
Using CSS style here I am applying style to my slider ul li elements plus adding hover effects.
html, body { margin: 0; padding: 0; font-family: 'Verdana'; background: #c8fcff; color: #000; } h2 { text-align: center; } #jq_slider { position: relative; overflow: hidden; border-radius: 6px; margin: 20px auto 0 auto; } #jq_slider ul { position: relative; margin: 0; padding: 0; list-style: none; } #jq_slider ul li { position: relative; display: block; width: 700px; height: 350px; text-align: center; float: left; margin: 0; padding: 0; } a.go_prev, a.go_next { position: absolute; z-index: 999; top: 40%; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #FFF; text-decoration: none; opacity: 0.7; cursor: pointer; font-weight: normal; font-size: 16px; } a.go_prev:hover, a.go_next:hover { opacity: 0.9; -webkit-transition: all 0.2s ease; } a.go_prev { border-radius: 0 3px 3px 0; } a.go_next { border-radius: 3px 0 0 3px; right: 0; } .auto_slider { margin: 10px auto; position: relative; font-size: 16px; width: 180px; }
Images for Jquery Slider
The following 4 images are used in the above demo app. You can download and try.
Slide-A.jpg
Slide-B.jpg
Slide-C.jpg
Slide-D.jpg