jquery simple image slideshow tutorial

Question

Where can I find a simple jquery image slideshow tutorial for beginners from scratch (without plugins) without left and right navigation button?

thank you.

Answer 1

This is by far the easiest example I have found on the net. http://jonraasch.com/blog/a-simple-jquery-slideshow

Summaring the example, this is what you need to do a slideshow:

HTML:

<div id="slideshow">
    <img src="img1.jpg" style="position:absolute;" class="active" />
    <img src="img2.jpg" style="position:absolute;" />
    <img src="img3.jpg" style="position:absolute;" />
</div>

Position absolute is used to put an each image over the other.

CSS

<style type="text/css">
    .active{
        z-index:99;
    }
</style>

The image that has the class="active" will appear over the others, the class=active property will change with the following Jquery code.

<script>
    function slideSwitch() {
        var $active = $('div#slideshow IMG.active');
        var $next = $active.next();    

        $next.addClass('active');

        $active.removeClass('active');
    }

    $(function() {
        setInterval( "slideSwitch()", 5000 );
    });
</script>

If you want to go further with slideshows I suggest you to have a look at the link above (to see animated oppacity changes - 2n example) or at other more complex slideshows tutorials.

Answer 2

I dont know why you havent marked on of these gr8 answers... here is another option which would enable you and anyone else visiting to control transition speed and pause time

JAVASCRIPT

$(function () {

    /* SET PARAMETERS */
    var change_img_time     = 5000; 
    var transition_speed    = 100;

    var simple_slideshow    = $("#exampleSlider"),
        listItems           = simple_slideshow.children('li'),
        listLen             = listItems.length,
        i                   = 0,

        changeList = function () {

            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);
            });

        };

    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);

});

.

HTML

<ul id="exampleSlider">
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
</ul>

.
If your keeping this simple its easy to keep it resposive
best to visit the: DEMO

.
If you want something with special transition FX (Still responsive) - check this out
DEMO WITH SPECIAL FX

Answer 3

Here is my adaptation of Michael Soriano's tutorial. See below or in JSBin.

$(function() {
  var theImage = $('ul#ss li img');
  var theWidth = theImage.width();
  //wrap into mother div
  $('ul#ss').wrap('<div id="mother" />');
  //assign height width and overflow hidden to mother
  $('#mother').css({
    width: function() {
      return theWidth;
    },
    height: function() {
      return theImage.height();
    },
    position: 'relative',
    overflow: 'hidden'
  });
  //get total of image sizes and set as width for ul 
  var totalWidth = theImage.length * theWidth;
  $('ul').css({
    width: function() {
      return totalWidth;
    }
  });

  var ss_timer = setInterval(function() {
    ss_next();
  }, 3000);

  function ss_next() {
    var a = $(".active");
    a.removeClass('active');

    if (a.hasClass('last')) {
      //last element -- loop
      a.parent('ul').animate({
        "margin-left": (0)
      }, 1000);
      a.siblings(":first").addClass('active');
    } else {
      a.parent('ul').animate({
        "margin-left": (-(a.index() + 1) * theWidth)
      }, 1000);
      a.next().addClass('active');
    }
  }

  // Cancel slideshow and move next manually on click
  $('ul#ss li img').on('click', function() {
    clearInterval(ss_timer);
    ss_next();
  });

});

* {
  margin: 0;
  padding: 0;
}
#ss {
  list-style: none;
}
#ss li {
  float: left;
}
#ss img {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="ss">
  <li class="active">
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg">
  </li>
  <li>
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg">
  </li>
  <li class="last">
    <img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg">
  </li>
</ul>

Answer 4

This lookslike something you would be interested in

http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/