Hey guys, today in this post we are going to learn about How to Create a Simple Custom Auto Slider with Next and Previous Buttons in Javascript, Jquery and css.
Files we used in this post example:
nextPreviousSlider.html | HTML File | It is used for create a image slider with next previous button for display the browser. |
nextprevious.js |
JavaScript File | It is holding Next and Previous JavaScript Functioality. |
nextPrevious.css | Style CSS File | It is used for Image slider and Button Alignment. |
jQuery Library | JQuery Library Min File | It is a JQuey Library that is provided by JQuery |
Download Supported jQuery Library for Custom Banner Rotating Image with Text Slider.
Final Output
Other post that would you like to learn
Step 1:- Create HTML File : nextPreviousSlider.html
nextPreviousSlider.html [HTML File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jquery slider with next previous buttons</title> <script type="text/javascript" src="http://w3web.net/wp-includes/js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="include/nextPrevious.js"></script> <link rel="stylesheet" href="include/nextPrevious.css" type="text/css" media="all"> </head> <body> <div id="sliderContainer"> <a href="javascript:void(0)" id="pre" title="Previous"><abbr style="font-size:80px;">◃</abbr></a> <a href="javascript:void(0)" id="nxt" title="Next"><abbr style="font-size:80px;">▹</abbr></a> <ul class="slideList"> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider1.png" width="300" height="200" alt="w3web.net Auto Next Previous Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider2.png" width="300" height="200" alt="w3web.net Auto Next Previous Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider3.png" width="300" height="200" alt="w3web.net Auto Next Previous Javascript Slider Plugin"></li> <li><img src="https://www.w3web.net/wp-content/uploads/2020/08/w3webSlider4.png" width="300" height="200" alt="w3web.net Auto Next Previous Javascript Slider Plugin"></li> </ul> </div> </body> </html> |
Step 2:- Create JavaScript File : nextPrevious.js
nextPrevious.js [JavaScript File]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
$(document).ready(function(){ $('#sliderContainer').slideRotate(); }) $.fn.slideRotate=function(){ var thisObj = $(this); thisObj.find('ul.slideList li').not(':first').hide(); thisObj.append("<div id='roundList'></div>"); $('ul.slideList li').each(function(i){ $('#roundList').append("<a href='#'>"+i+"</a>"); $(this).attr('id', i); }) var i=0; var lastIndex = 0; var indexCount = $("ul.slideList li").index(); var roundCount = $('#roundList a').index(); $('#nxt').click(function(){ nxtPly(); }) function nxtPly(){ i++; if($("ul.slideList li:last").css('display')=='list-item') { i=0; } $('#pre').removeClass('active'); $("#roundList a").removeClass('active'); $("#roundList a:eq("+i+")").addClass('active'); $("ul.slideList li").hide(); $("ul.slideList li:eq("+i+")").show(); } $('#pre').click(function(){ prePly(); }) function prePly(){ i--; if($("ul.slideList li:first").css('display')=='list-item') { i=indexCount; $('#pre').addClass('active'); } $('#nxt').removeClass('active'); $("#roundList a").removeClass('active'); $("#roundList a:eq("+i+")").addClass('active'); $("ul.slideList li").hide(); $("ul.slideList li:eq("+i+")").show(); } var timeSpan = setInterval(function(){nxtPly()}, 5000); $("#roundList a:first").addClass('active'); $('#pre, #nxt, #roundList a').hover(function(){ clearInterval(timeSpan); }, function(){ timeSpan = setInterval(function(){nxtPly()}, 5000); }); $('#roundList a').click(function(){ var roundTxt = $(this).text(); $("#roundList a").removeClass('active'); $(this).addClass('active'); $("ul.slideList li").hide(); $("ul.slideList li:eq("+roundTxt+")").show(); }); } |
Step 3:- Create Style CSS : nextPrevious.css
nextPrevious.css [Style CSS File]
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body{ font-family:Arial, Helvetica, sans-serif;} #sliderContainer{ width:300px; margin:auto; position:relative;} ul.slideList{ margin:0; padding:0; list-style:none;} ul.slideList li{ width:300px; float:left; height:200px; position:absolute; border:1px #ccc solid; padding:5px;} a#pre{ font-size:16px; position:absolute; text-decoration:none; left:-50px; top:45px; padding:3px 10px;} a#pre:hover, a#pre.active { color:#FF0000; text-decoration:none;} a#nxt{ font-size:16px; position:absolute; text-decoration:none; right:-60px; top:45px; padding:3px 10px;} a#nxt:hover, a#nxt.active{ color:#FF0000; text-decoration:none;} #roundList{ font-size:12px; color:#000000; position:absolute; top:190px; left:10px;} #roundList a{ color:#FFFFFF; text-decoration:none; background:#0033FF; float:left; margin-right:5px; border:1px #0033FF solid; border-radius:40px; width:10px; height:10px; text-indent:10px; overflow:hidden;} #roundList a:hover, #roundList a.active{ background:#FF0000; border:1px #ff0000 solid;} |
Further post that would you like to learn
Hi,
Thanks for the information you have provided, This really mean alot to me.Guy’s Checkout more information here.
Thanks.
Good
Very Good
5 Internet Approval Site (Do Follow Backlinks)