CODEWITHSUNDEEP
jqueryslider
Alex Pain
Alex Pain

Reputation: 27

Auto play slider content jquery

I need to create one line slider to rotate list of h3 automatically.

I have created wrapper, and inner elements. Now i have a function to show one element, hide all another. After delay i try to catch next element, and show it.

I try to 

(function($) {
  $(document).ready(function() {
    function context(obj, func) {
      return function() {
        func(obj);
      }
    };
    var bestNews = {
      i: 0,
      init: function(id) {
        this.items = $(id);
        this.item = this.items[this.i];
        return this;
      },
      run: function() {
        var next = context({
          obj: this
        }, function(data) {
          data.obj.i++;
          if (data.obj.i >= data.obj.items.length) {
            data.obj.i = 0;
          }
          data.obj.item = data.obj.items[data.obj.i];

          var next_run = context({
            obj: data.obj
          }, function(data) {
            data.obj.run();
          });
          $(data.obj.item).show('drop', {
            direction: 'left'
          }, 1000, next_run);
        });
        $(this.item).delay(6000).effect('drop', {
          direction: 'right'
        }, 1000, next);
      }
    }
    bestNews.init('.slideshoww h3').run();

  });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshoww">
  <h3>Text 1</h3>
  <h3>Text 2</h3>
  <h3>Text 3</h3>
</div>

But have error...

Uncaught TypeError: $(...).delay(...).effect is not a function

Upvotes: 1

Views: 81

Answers (1)

Dipiks
Dipiks

Reputation: 3928

.effect() is a function of jquery ui, you have to include it in your project

.effect() [.effect( effect [, options ] [, duration ] [, complete ] )]

Description: Apply an animation effect to an element.

Returns: jQuery object

Here are a working snippet with the good version of jQuery-ui :

(function($) {
  $(document).ready(function() {
    function context(obj, func) {
      return function() {
        func(obj);
      }
    };
    var bestNews = {
      i: 0,
      init: function(id) {
        this.items = $(id);
        this.item = this.items[this.i];
        return this;
      },
      run: function() {
        var next = context({
          obj: this
        }, function(data) {
          data.obj.i++;
          if (data.obj.i >= data.obj.items.length) {
            data.obj.i = 0;
          }
          data.obj.item = data.obj.items[data.obj.i];

          var next_run = context({
            obj: data.obj
          }, function(data) {
            data.obj.run();
          });
          $(data.obj.item).show('drop', {
            direction: 'left'
          }, 1000, next_run);
        });
        $(this.item).delay(6000).effect('drop', {
          direction: 'right'
        }, 1000, next);
      }
    }
    bestNews.init('.slideshoww h3').run();

  });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div class="slideshoww">
  <h3>Text 1</h3>
  <h3>Text 2</h3>
  <h3>Text 3</h3>
</div>

Upvotes: 1

Related Questions