Wie man Autoplay auf einem Div Inhalt Schieberegler setzen jquery

Question

Ich bin nicht groß auf Jquery und haben eine Situation hier;

Wie kann ich eine automatische Wiedergabe in diesem gleitenden Caroussel machen?

Das Karussell funktioniert das Hinzufügen einer "aktuellen" Klasse zu einer Li, die oben angezeigt wird, während die nicht "aktuellen" li sind versteckt;

Das Original-Skript, das ich nahm from here.

Folgen Sie den Code

function slide() { 
    var li = $("ul#latest-news-slider li.active"); 

    if (li.next().length > 0) { 
    li.removeClass("active", 3000, "easeInBack"); 
    li.next().addClass("active", 3000, "easeInBack"); 
    } else if (li.prev().length > 0) { 
    li.removeClass("active", 3000, "easeInBack"); 
    $("ul#latest-news-slider li") 
     .first("li") 
     .addClass("active", 3000, "easeInBack"); 
    } else { 
    return; 
    } 
} 

$(".next").click(function() { 
    var li = $("ul#latest-news-slider li.active"); 

    if (li.next().length > 0) { 
    li.removeClass("active", 100, "easeInBack"); 
    li.next().addClass("active", 100, "easeInBack"); 
    } else { 
    li.removeClass("active", 100, "easeInBack"); 
    $("ul#latest-news-slider li") 
     .first("li") 
     .addClass("active", 100, "easeInBack"); 
    } 
}); 

$(".prev").click(function() { 
    var li = $("ul#latest-news-slider li.active"); 

    if (li.prev().length > 0 && li.prev().is("li")) { 
    li.removeClass("active", 100, "easeInBack"); 
    li.prev().addClass("active", 100, "easeInBack"); 
    } else { 
    } 
}); 

Vielen Dank

Answer 1

nicht sicher, wie Sie dies genau implementieren, aber Sie eine setInterval nutzen könnten.

var interval; 
 

 
$("#start").on("click", function(){ 
 
    StartThis(1000); 
 
}); 
 

 
$("#stop").on("click", function(){ 
 
    StopThis(1000); 
 
}); 
 

 
// speed in miliseconds (1s) 
 
function StartThis(speed){ 
 
    interval = setInterval(function(){ 
 
      Next(); 
 
    }, speed); 
 
} 
 

 
// stop the movement 
 
function StopThis(){ 
 
    clearInterval(interval); 
 
} 
 

 
function Next(){ 
 
    console.log("do the next funciton"); 
 
/* 
 
    var li=$('ul#latest-news-slider li.active'); 
 

 
      if(li.next().length>0) 
 
      { 
 
       li.removeClass('active', 100, "easeInBack"); 
 
       li.next().addClass('active', 100, "easeInBack"); 
 

 
      }else { 
 
       li.removeClass('active', 100, "easeInBack"); 
 
       $('ul#latest-news-slider li').first('li').addClass('active', 100, "easeInBack"); 
 
      } 
 
      */ 
 
} 
 

 
StartThis(1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="start">START</button> 
 
<button id="stop">STOP</button>

Answer 2

Ich schätze Ihre Bemühungen wirklich, aber ich bin nicht qualifiziert, um es zu bekommen;

Es kann on here? (codepen link)

Funktionsschlitten() applyable sein {

  var li=$('ul#latest-news-slider li.active'); 

      if(li.next().length>0) 
      { 
       li.removeClass('active', 3000, "easeInBack"); 
       li.next().addClass('active', 3000, "easeInBack"); 

      }else if(li.prev().length>0){ 
       li.removeClass('active', 3000, "easeInBack"); 
       $('ul#latest-news-slider li').first('li').addClass('active', 3000, "easeInBack"); 
      }else 
      { 
       return; 
      } 
     } 

     $('.next').click(function(){ 

      var li=$('ul#latest-news-slider li.active'); 

      if(li.next().length>0) 
      { 
       li.removeClass('active', 100, "easeInBack"); 
       li.next().addClass('active', 100, "easeInBack"); 

      }else { 
       li.removeClass('active', 100, "easeInBack"); 
       $('ul#latest-news-slider li').first('li').addClass('active', 100, "easeInBack"); 
      } 
     }); 

     $('.prev').click(function(){ 

      var li=$('ul#latest-news-slider li.active'); 

      if(li.prev().length>0 && li.prev().is("li")) 
      { 
       li.removeClass('active', 100, "easeInBack"); 
       li.prev().addClass('active', 100, "easeInBack"); 

      }else { 

      } 
     });