CODEWITHSUNDEEP
javascriptjqueryslideshowslideslidesjs
Christos Hayward
Christos Hayward

Reputation: 5993

How can I switch slides automatically in SlideJS from SlidesJS.com?

I am working on getting SlideJS running, and have some aspects of presentation and behavior in order.

One thing I haven't yet managed is to get it to automatically slide, or transition, from one slide to the next.

The code that is getting the reported error is line 67 in SlideJS's main plugin file, at the last line besides the closing brace below; my copy is at https://cjshayward.com/wp-content/Slides-SlidesJS-3/source/jquery.slides.js:

  if (typeof TouchEvent !== "undefined") {
    $.data(this, "touch", true);
    this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
  }

Commenting out the assignment, with my invocation, suppresses the reported error, but I think the code may want more information than this line which appears to merely halve an existing setting. I can assign, without immediate reported error,

this.options.effect['qwerty'] = 'qwerty';

But I get a similar error (i.e. setting a property of undefined), if I have as much as:

this.options.effect.slide['qwerty'] = 'qwerty';

I've tried a number of configuration options, and I can see the manual circles to click to move between slides, but have not yet managed to get an automatic transition (the plugin supports slide or fade options; I want the 'slide' effect). My present options target is:

<script>// <![CDATA[
    jQuery(function(){
      jQuery('#slides').slidesjs({
        slide:
            {
            speed: 200
            },
        interval: 2000,
        active: true,
        auto: true,
        effect: 'slide',
        height: 528,
        interval: 5000,
        pauseOnHover: true,
        restartDelay: 2500,
        swap: false,
        width: 940
      });
    });
// ]]></script>

In view-source:http://www.slidesjs.com/, there are multiple sample invocatiosn, but the only invocation I see after slidejs.min.js's inclusion (the last script loaded from a URL) is:

  <script>
    $(function() {
      $('#slides').slidesjs({
        width: 940,
        height: 350,
        navigation: false
      });
    });
  </script>

Thanks,

Upvotes: 0

Views: 788

Answers (2)

Christos Hayward
Christos Hayward

Reputation: 5993

There were two issues.

One was that the HTML needed fixing.

The other was that the options were being presented, flat, where the source to http://www.slidesjs.com/examples/playing/ has:

    $(function() {
      $('#slides').slidesjs({
        width: 940,
        height: 528,
        play: {
          active: true,
          auto: true,
          interval: 4000,
          swap: true,
          pauseOnHover: true,
          restartDelay: 2500
        }
      });
    });

I presently have everything I want, besides the data initially displayed all at once before being Hijaxed (I should be able to address that several ways, and it's not my concern). Besides the HTML issue, there was another issue I had in that I was trying to use a flat dictionary to specify options when I needed to have one option/key (play) have its own dictionary as the value instead of e.g. a number or boolean as its value the way most other options appear to.

The updated JSfiddle I'm working from now is https://jsfiddle.net/ydvtynjL/

Upvotes: 0

Tony Hensler
Tony Hensler

Reputation: 1492

Have look at:-

https://jsfiddle.net/5x2tqdsv/

You need to fix your html and also remove the following line:-

effect: 'slide',

Upvotes: 1

Related Questions