Search code examples
jquerycssjslider

Auto change JSlide


I'm currently using JSlide to create a carousel for a friend, I have a problem with the changing of slides.

Is it possible to change it so it will automatically slide through each one at a specific time interval? For example, let's say 5s delay before slider changes?

Another thing is the removal of the pagination buttons, I'm assuming I just remove the pagination code from the function? I'm not entirely sure

Anyway, here's the whole code below:

HTML

<div class="slidescontainer">
    <div id="slides">
      <img src="http://i39.tinypic.com/30sh5wo.jpg" alt="Banner 1">
      <img src="http://i41.tinypic.com/w5gds.jpg" alt="Banner 2">
      <img src="http://i41.tinypic.com/17rd3l.jpg" alt="Banner 3">
      <img src="http://i40.tinypic.com/4u8ajn.jpg" alt="Banner 4">
      <img src="http://i42.tinypic.com/30a8l1g.jpg" alt="Banner 5">
      <img src="http://i39.tinypic.com/259x57a.jpg" alt="Banner 6">
      <img src="http://i39.tinypic.com/2r6hbv5.jpg" alt="Banner 7">
    </div>
  </div>

SCRIPT

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://static.tumblr.com/wxsnpan/qjsmqsq7r/jquery.slides.min.js"></script>
  <script>
    $(function() {
      $('#slides').slidesjs({
        width: 940,
        height: 528,
        navigation: {
          effect: "fade"
        },
        pagination: {
          effect: "fade"
        },
        effect: {
          fade: {
            speed: 400
          }
        }
      });
    });
  </script>

Solution

  • is this jsFiddle answer to your questions?

    For the auto-slide option, i change your script to

    play: {
          active: true,
          auto: true,
          interval: 4000,
          swap: true,
          pauseOnHover: true,
          restartDelay: 2500,
          effect:"fade"
        }
    

    For the pagination the developers allow you to disable it with this option,

    pagination: {
      active: false
    }
    

    You can find a lot of informations for this script on SlideJS website

    i hope this will help you.