jQuery .DIYSlider找不到幻燈片

Question

我使用的滑塊在https://github.com/pioul/jQuery.DIYSlider 處找到，當我在控制檯登錄Firefox時看到的網站運行時：No slides found for DIYslider。它看起來像腳本沒有看到我的DIV（ticket_s） 我做錯了什麼？

這裏是我的代碼：

HTML：

<div id="ticket_slider" style="position: relative; overflow: hidden; width: 980px; height: 105px;"> 
    <button id="go-left">«</button> <button id="go-right">»</button> 

    <div class="ticket_s " style="position: absolute; top: 0px; left: 0px; width: 0px; height: auto;"> 
     <a href="/papug/index.php/moje-zgloszenia-lista?view=ticket&amp;layout=default&amp;id=65" class="ticket_link"></a> 
     <p class="bold">Sprawa #1</p> 
     <p class="t_date">15.07.2014 </p> 
    </div> 

    <div class="ticket_s closed "> 
     <a href="/papug/index.php/moje-zgloszenia-lista?view=ticket&amp;layout=default&amp;id=66" class="ticket_link"></a> 
     <p class="bold">Sprawa #2</p> 
     <p class="t_date">15.07.2014 </p> 
    </div> 

    <div class="ticket_s "> 
     <a href="/papug/index.php/moje-zgloszenia-lista?view=ticket&amp;layout=default&amp;id=67" class="ticket_link"></a> 
     <p class="bold">Sprawa #3</p> 
     <p class="t_date">16.07.2014 </p> 
    </div> 
</div> 

JS

var $j = jQuery.noConflict(); 
$j(document).ready(function() { 

    $j("#ticket_slider").diyslider({ 
     width: "980px", // width of the slider 
     height: "105px", // height of the slider 
     display: 8, // number of slides you want it to display at once 
     loop: false // disable looping on slides 
    }); // this is all you need! 

    // use buttons to change slide 
    $j("#go-left").bind("click", function(){ 
     // Go to the previous slide 
     $j("#ticket_slider").diyslider("move", "back"); 
    }); 

    $j("#go-right").bind("click", function(){ 
     // Go to the previous slide 
     $j("#ticket_slider").diyslider("move", "forth"); 
    }); 
}); 

Answer 1

你至少缺少的插件，as documented here所需的額外<div>。

<div class="slider"><!-- The slider --> 
    <div><!-- A mandatory div used by the slider --> 
    <!-- Each div below is considered a slide --> 
    <div><img src="... "/></div> 
    <div><img src="... "/></div> 
    <div><img src="... "/></div> 
    </div> 
</div>