jQuery dynamic div slider

531 views Asked by At

For some reason I am having a lot of trouble finding this...

Basically looking for a jquery slider plugin (with next and previous button), where the content can be any thing (div's,text, images, a combination,etc). The problem comes that I the content will be dynamically added, for example, if I have something like

<ul>
    <li> /* some divs, images, etc*/ </li>
    <li> /* some divs, images, etc*/ </li>
    <li> /* some divs, images, etc*/ </li>
</ul>

then I can dynamically add "

  • " tags to the "" via javascript and this wont break the slider.

    I am currently using easy slider but it dosent really support the contents of the slider being 'dynamic'

    thanks in advance.

  • 1

    There are 1 answers

    0
    YashPatel On

    Try This

    this is custom way of creating a slider for next previous

    jQuery.fn.extend({
      slideRightShow: function(speed) {
        return this.each(function() {
            $(this).show('slide', {direction: 'right'}, +speed || 1000);
        });
      },
      slideLeftHide: function(speed) {
        return this.each(function() {
          $(this).hide('slide', {direction: 'left'}, +speed || 1000);
        });
      },
      slideRightHide: function(speed) {
        return this.each(function() {
          $(this).hide('slide', {direction: 'right'}, +speed || 1000);
        });
      },
      slideLeftShow: function(speed) {
        return this.each(function() {
          $(this).show('slide', {direction: 'left'}, +speed || 1000);
        });
      }
    });
    

    Try This Fiddle