Einfach jquery Schieberegler

Question

Ich versuche, ein Skript zu verwenden, um einen einfachen Schieberegler zu machen. Funktioniert perfekt auf jsfiddle, aber nicht, wenn ich jede Stelle im Web kopieren/einfügen mache ... Was ist das Problem? Ich würde jede Hilfe zu schätzen wissen.

Dank

var $first = $('li:first', 'ul'), 
 
    $last = $('li:last', 'ul'); 
 
$("#next").click(function() { 
 
    var $next, $selected = $(".selected"); 
 

 

 
    $next = $selected.next('li').length ? $selected.next('li') : $first; 
 
    $selected.removeClass("selected"); 
 
    $next.addClass('selected'); 
 
}); 
 

 
$("#prev").click(function() { 
 
    var $prev, $selected = $(".selected"); 
 

 
    $prev = $selected.prev('li').length ? $selected.prev('li') : $last; 
 
    $selected.removeClass("selected"); 
 
    $prev.addClass('selected'); 
 
});

li {display:none} 
 

 
.selected {display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="prev">Previous</button> 
 
<button id="next">Next</button> 
 
<div> 
 
<ul id=""> 
 
<li id="pic1"><img src="http://www.cooksmarts.com/wp-content/uploads/2015/09/Pantry-Essentials-Lemons-400x250.jpg" alt="pic1"></li> 
 
<li id="pic2"><img src="https://tendertummys.com/wp-content/uploads/tomatoes-2.jpg" alt="pic2"></li> 
 
<li id="pic3"><img src="http://med.news.am/static/news/b/2014/08/3031.jpg" alt="pic3"></li> 
 
</ul> 
 
</div>

Dropbox link to the page

Answer 1

Sie müssen sicher sein, dass der DOM, bevor es die Manipulation bereit ist.
Wahrscheinlich jsfiddle kümmern, dass das Javascript ausgeführt wird, nachdem das DOM bereit war.
Sie haben zwei Möglichkeiten: Verschieben Sie das Skript-Tag direkt vor dem Body-End-Tag oder wickeln Sie Ihren Code in die Callback-Funktion $ (document) .ready(), die aufgerufen wird, nachdem das DOM bereit ist.

$(document).ready(function() { 
    var $first = $('li:first', 'ul'), 
     $last = $('li:last', 'ul'); 

    $("#next").click(function() { 
     var $next, $selected = $(".selected"); 

     $next = $selected.next('li').length ? $selected.next('li') : $first; 
     $selected.removeClass("selected"); 
     $next.addClass('selected'); 
    }); 

    $("#prev").click(function() { 
     var $prev, $selected = $(".selected"); 

     $prev = $selected.prev('li').length ? $selected.prev('li') : $last; 
     $selected.removeClass("selected"); 
     $prev.addClass('selected'); 
    }); 
});