Jquery slideshow do it yourself

Introduction

The network has an incredible amount of ready-made slideshows, in which you can add just pictures and enjoy how they change with the help of a wide variety of animations. Looking through them, I wanted to invent this bike myself. Without any volume effects, etc. The most common slideshow.

How it works

The principle of operation is simple: in a block that matches the dimensions of the slide, I insert a “longer” block, into which I will pack images aligned on the left side (float: left), and which will have the margin-left smoothly changed thanks to the jquery animate function .

Example

')
Here is a demo .

Implementation

I chose the size of the slides 371x199px.
To begin with, we will write HTML and CSS, from which we will further rely:

<div id="slideshow"> <div id="slideimages"> <img class="slideimage" src="/img/slides/0.jpg" id="1" data-title=" "> <img class="slideimage" src="/img/slides/1.jpg" id="2" data-title=" "> </div> <div id="controlrow"> <span id="slidecounter"></span> <!--  --> <div id="slidetitle"></div> <!-- --> <div id="slidecontrollers"> <div class="imtype" id="rew"></div> <!-- --> <div class="imtype pause" id="play-pause"></div> <!-- /--> <div class="imtype" id="few"></div> <!-- --> </div> </div> </div> 

 #slideshow { position:relative; /*   div#slidecontrollers*/ overflow:hidden; /*        div#slideimages*/ width:371px; /**/ height:199px; font-size:0; } #controlrow { position:absolute; /*   */ z-index:2; /*   */ bottom:8px; /**/ width:371px; opacity:0; /*  ,   */ filter:alpha(opacity=0); /*  ,     */ background: url('images/slidermenu.png') repeat-x; /**/ border-top: 1px solid rgba(255, 255, 255, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #slidecounter { float:left; /*   */ margin: 5px 9px; /**/ color: #727272; text-shadow: 0 0 1px #727272; font-size: 23px; } #slidetitle { float:left; /*   */ margin:11px 0; /**/ overflow:hidden; font-size:14px; color:#e5e5e5; } .slideimage { width:371px; /**/ float:left; /*   */ } #slidecontrollers { float:right; /*   */ width:57px; /**/ height:20px; box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); -moz-box-shadow:0 1px 0 rgba(255,255,255,0.16), inset 0 2px 3px rgba(0,0,0,0.6); border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#222 url('images/slidecontrol_bg.png') repeat-x; margin:6px 9px 4px; text-align:center; padding:4px; } .imtype { display:inline-block; /*   ,       */ width:13px; /**/ height:20px; background-repeat:no-repeat; background-position:center; cursor:pointer; } #rew { background-image:url('images/rew.png'); /* */ } #few { background-image:url('images/few.png'); /* */ } .play { background-image:url('images/play.png'); /* */ } .pause { background-image:url('images/pause.png'); /* */ } #play-pause { margin:0 8px; /**/ } 

Let's get to the fun part: make it all move.
First, create the variables:

 var start_num=1; //      var auto_few=1; // (1)  (0)   var slidespeed=200; //     () var intervalspeed=3000; // () var num; //   .    ,     var i = start_num; //     i   var intervalID; //   var lock = 0; //      ,    

Let's write the function to change the name of the slide:

 function change_title() { $('#slidecounter').html(i + '/' + num); //  var title = $('img.slideimage#'+i).attr('data-title'); //   $('#slidetitle').html(title); //   } 

Now let's write the forward and backward scrolling functions.

 function few() { //  if(lock == 0) { //       if(i>=num) { //      ,  ,      (  371px),   ,       $('#slideimages').animate({'margin-left':'0'},slidespeed,function(){lock=0}); i = 1; } else { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) - 371 + 'px'},slidespeed,function(){lock=0}); i++; } } lock = 1; change_title(); } function rew() { if(lock == 0) { if(i<=1) { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) - 371*(num-1) + 'px'},slidespeed,function(){lock=0}); i = num; } else { $('#slideimages').animate({'margin-left': parseInt($('#slideimages').css('margin-left')) + 371 + 'px'},slidespeed,function(){lock=0}); i--; } } lock = 1; change_title(); } 

Now let's add a function for the play / pause button.

 function play_pause() { if(auto_few == 0) { // ? auto_few = 1; // ,    $('#play-pause').removeClass('play').addClass('pause'); //  few(); //   intervalID = setInterval(autofew, intervalspeed); //  } else { auto_few = 0; // ,   $('#play-pause').removeClass('pause').addClass('play'); //  clearInterval(intervalID); //  } } 

Autoscroll start / stop function. We still need them:

 function stop_auto_few() { //  (. ) if(auto_few == 1) { auto_few = 0; $('#play-pause').removeClass('pause').addClass('play'); clearInterval(intervalID); } } function autofew() { if(auto_few == 1) { few(); } } 

Now the most important thing. What happens when the page is loaded?

 $(document).ready(function() { num = $('.slideimage').length; $('#slideimages').css({'width': 371*num + 'px','margin-left': (-371)*(start_num-1) + 'px'}); //           change_title(); //    if(auto_few == 0) { //  ,    $('#play-pause').removeClass('pause').addClass('play'); } else { // ,    intervalID = setInterval(autofew, intervalspeed); } $('#few').click(function() { //     few(); //   stop_auto_few(); //    "",       }); $('#rew').click(function() { rew(); stop_auto_few(); }); $('#play-pause').click(function() { play_pause(); }); $('#slideshow').mouseenter(function() { //    $('#controlrow').stop().animate({'opacity':'1.0','filter': 'alpha(opacity=100)'},100); }).mouseleave(function() { $('#controlrow').stop().animate({'opacity':'0.0','filter': 'alpha(opacity=0)'},500); }); }); 

Finally

Well that's all. It seems to be no tricky manipulations I did. I didn’t expect, of course, that basically the code with comments would turn out, but without further ado.

And again Demo | Source code