Flexslider無法在過濾代碼中工作

我知道我的問題與其他人非常相似，但過濾代碼不同。Flexslider無法在過濾代碼中工作

我的問題：

對於「類別1」中，flexslider工作完美，但一旦我點擊「類別2」中，flexslider不起作用。檢查源代碼後，幻燈片的內聯樣式寬度爲「0px」。

我已經提到了一些其他解決方案，並將其應用於我身邊，但無效。

「1類」

單擊「類別2」

我能做些什麼，使它的工作原理？希望你們中的一些人能夠向我提供一些建議。謝謝！

var selCatId = null; 
 
var pageLength = 8; 
 

 
// Filters. 
 
$('div.filter').on('click','a',function(e) { 
 

 
    e.preventDefault(); 
 

 
    // Get the category id from the href attribute. 
 
    selCatId = $(this).attr('href').substring(1); 
 
    
 
    // Create pagination. 
 
    var nPages = Math.ceil($('div#item-wrapper ul.items li.'+selCatId).length/pageLength), 
 
     pages = []; 
 
    
 
    // Create and show page numbers. 
 
    for (var i=1; i<=nPages; i++) 
 
     pages.push('<a href="#">'+i+'</a>'); 
 
    $('div.ctrl-nav').html(pages.join('')); 
 
    
 
    // Activate page number selection. 
 
    $('div.ctrl-nav a').click(function(e) { 
 
    
 
     e.preventDefault(); 
 
    
 
     var pageInit = (parseInt($(this).text())-1)*pageLength; 
 
     
 
     $('div#item-wrapper ul.items li').hide() 
 
             .filter('.'+selCatId) 
 
             .slice(pageInit,pageInit+pageLength) 
 
             .show(); 
 
     
 
     // Mark the active page. 
 
     $('div.ctrl-nav a').removeClass('selected').filter(this).addClass('selected'); 
 
    }); 
 
    
 
    // Show first page of the selected category. 
 
    $('div.ctrl-nav a:first').trigger('click'); 
 
}); 
 

 
// Show 'Category 1' when page loads. 
 
$('div.filter a:first').trigger('click'); 
 

 
$(window).load(function(){ 
 
    $('#carousel').flexslider({ 
 
\t animation: "slide", 
 
\t controlNav: false, 
 
\t animationLoop: false, 
 
\t slideshow: false, 
 
\t itemWidth: 210, 
 
\t itemMargin: 5, 
 
\t asNavFor: '#slider' 
 
    }); 
 

 
    $('#slider').flexslider({ 
 
\t animation: "slide", 
 
\t controlNav: false, 
 
\t animationLoop: false, 
 
\t slideshow: false, 
 
\t sync: "#carousel", 
 
\t start: function(slider){ 
 
\t $('body').removeClass('loading'); 
 
\t } 
 
    }); 
 
    
 
    $('#carousel1').flexslider({ 
 
\t animation: "slide", 
 
\t controlNav: false, 
 
\t animationLoop: false, 
 
\t slideshow: false, 
 
\t itemWidth: 210, 
 
\t itemMargin: 5, 
 
\t asNavFor: '#slider1' 
 
    }); 
 

 
    $('#slider1').flexslider({ 
 
\t animation: "slide", 
 
\t controlNav: false, 
 
\t animationLoop: false, 
 
\t slideshow: false, 
 
\t sync: "#carousel1", 
 
\t start: function(slider){ 
 
\t $('body').removeClass('loading'); 
 
\t } 
 
    }); 
 
});

div.ctrl-nav a { 
 
     padding: 5px; 
 
     margin-right: 2px; 
 
     color: white; 
 
     background: black; 
 
    } 
 

 
    div.ctrl-nav a.selected { 
 
     background: red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link href="http://flexslider.woothemes.com/css/flexslider.css" rel="stylesheet"/> 
 
    <script src="http://yourjavascript.com/110250337118/jquery-flexslider.js"></script> 
 

 
<div class="filter"> 
 
    <a href="#category-1">category 1</a> 
 
    <a href="#category-2">category 2</a> 
 
</div> 
 

 
<div id="item-wrapper"> 
 
\t <ul class="items"> 
 
\t \t <li class="category-1"> 
 
\t \t \t <section class="slider"> 
 
\t \t \t \t <div id="slider" class="flexslider"> 
 
\t \t \t \t \t <ul class="slides"> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="carousel" class="flexslider"> 
 
\t \t \t \t \t <ul class="slides"> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </section> 
 
\t \t </li> 
 
\t \t <li class="category-1">item 2</li> 
 
\t \t <li class="category-1">item 3</li> 
 
\t \t <li class="category-1">item 4</li> 
 
\t \t <li class="category-1">item 5</li> 
 
\t \t <li class="category-1">item 6</li> 
 
\t \t <li class="category-2"> 
 
\t \t \t <section class="slider"> 
 
\t \t \t \t <div id="slider1" class="flexslider"> 
 
\t \t \t \t \t <ul class="slides"> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="carousel1" class="flexslider"> 
 
\t \t \t \t \t <ul class="slides"> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t \t <li><img src="http://responsiveslides.com/1.jpg" /></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t </section> 
 
\t \t </li> 
 
\t \t <li class="category-2">item 8</li> 
 
\t \t <li class="category-2">item 9</li> 
 
\t \t <li class="category-2">item 10</li> 
 
\t \t <li class="category-2">item 11</li> 
 
\t \t <li class="category-2">item 12</li> 
 
\t \t <li class="category-1">item 13</li> 
 
\t \t <li class="category-1">item 14</li> 
 
\t \t <li class="category-2">item 15</li> 
 
\t </ul> 
 

 
\t <div class="ctrl-nav"> 
 
\t \t <a href="#" id="prev">Previous</a><a href="#" id="next">Next</a> 
 
\t </div> 
 
</div>

來源

2017-10-17 Eelyn

更新您的JavaScript。它解決了你的問題。
jsfiddel link

var selCatId = null; 
var pageLength = 8; 

// Filters. 
$('div.filter').on('click','a',function(e) { 

    e.preventDefault(); 

    // Get the category id from the href attribute. 
    selCatId = $(this).attr('href').substring(1); 
    // Create pagination. 
    var nPages = Math.ceil($('div#item-wrapper ul.items li.'+selCatId).length/pageLength), 
     pages = []; 

    // Create and show page numbers. 
    for (var i=1; i<=nPages; i++) 
     pages.push('<a class="'+i+'" href="#">'+i+'</a>'); 
    $('div.ctrl-nav').html(pages.join('')); 

    // Activate page number selection. 
    $('div.ctrl-nav a').click(function(e) { 
     e.preventDefault(); 

     var pageInit = (parseInt($(this).text())-1)*pageLength; 

     $('div#item-wrapper ul.items > li').hide(); 
     //$('div#item-wrapper ul.items > li.'+selCatId) 
     $('div#item-wrapper ul.items > li.'+selCatId).slice(pageInit,pageInit+pageLength).show();; 

     // Mark the active page. 
     $('div.ctrl-nav a').removeClass('selected').filter(this).addClass('selected'); 
    }); 

    // Show first page of the selected category. 
    $('div.ctrl-nav a:first').trigger('click'); 
    first(selCatId.split('-')[1]); 
}); 

// Show 'Category 1' when page loads. 
$('div.filter a:first').trigger('click'); 

function first(id){ 
    $('#carousel'+id).flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     itemWidth: 210, 
     itemMargin: 5, 
     asNavFor: '#slider'+id 
    }); 

    $('#slider'+id).flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     sync: "#carousel"+id, 
     start: function(slider){ 
      $('body').removeClass('loading'); 
     } 
    }); 
};

和HTML

<div class="filter"> 
    <a href="#category-1">category 1</a> 
    <a href="#category-2">category 2</a> 
    <a href="#category-3">category 3</a> 
</div> 

<div id="item-wrapper"> 
    <ul class="items"> 
     <li class="category-1"> 
      <section class="slider"> 
       <div id="slider1" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/2.jpg" /></li> 
         <li><img src="http://responsiveslides.com/3.jpg" /></li> 

        </ul> 
       </div> 
       <div id="carousel1" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/2.jpg" /></li> 
         <li><img src="http://responsiveslides.com/3.jpg" /></li> 

        </ul> 
       </div> 
      </section> 
     </li> 
     <li class="category-1">item 2</li> 
     <li class="category-1">item 3</li> 
     <li class="category-1">item 4</li> 
     <li class="category-1">item 5</li> 
     <li class="category-1">item 6</li> 
     <li class="category-2"> 
      <section class="slider"> 
       <div id="slider2" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/2.jpg" /></li> 
         <li><img src="http://responsiveslides.com/3.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 

        </ul> 
       </div> 
       <div id="carousel2" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/2.jpg" /></li> 
         <li><img src="http://responsiveslides.com/3.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 

        </ul> 
       </div> 
      </section> 
     </li> 
     <li class="category-2">item 8</li> 
     <li class="category-2">item 9</li> 
     <li class="category-2">item 10</li> 
     <li class="category-2">item 11</li> 
     <li class="category-2">item 12</li> 
     <li class="category-1">item 13</li> 
     <li class="category-1">item 14</li> 
     <li class="category-2">item 15</li> 
     <li class="category-1">item 16</li> 
     <li class="category-3"> 
      <section class="slider"> 
       <div id="slider3" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/3.jpg" /></li> 
         <li><img src="http://responsiveslides.com/2.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 

        </ul> 
       </div> 
       <div id="carousel3" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/2.jpg" /></li> 
         <li><img src="http://responsiveslides.com/3.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 

        </ul> 
       </div> 
      </section> 
     </li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
     <li class="category-3">item 15</li> 
    </ul> 

    <div class="ctrl-nav"> 
     <a href="#" id="prev">Previous</a><a href="#" id="next">Next</a> 
    </div> 
</div>

來源

2017-10-17 16:01:00

導致分頁的代碼無法正常工作。請檢查此https://jsfiddle.net/kmtw3wyw/1/。我已經添加了一個項目，即「項目16」，您可以看到它不會轉到第2頁。一頁有8個項目。 – Eelyn

這是分頁代碼的簡單問題。只需使用 $（'div＃item-wrapper ul.items> li。'+ selCatId）.slice（pageInit，pageInit + pageLength）。顯示（）; and comment out of // $（'div＃item-wrapper ul.items> li。'+ selCatId）.show（）; 立即查看 –

您的jsfiddel更新https://jsfiddle.net/kmtw3wyw/3/ –

我發現在HTML代碼中的一些問題。這是二ID是相同的名稱（ID = 「滑塊」和id = 「旋轉木馬」）剛剛更新slider1和carousel1

我覺得你的問題變得解決。

<div id="slider" class="flexslider">

<div id="carousel" class="flexslider">

固定的html代碼

<div class="filter"> 
    <a href="#category-1">category 1</a> 
    <a href="#category-2">category 2</a> 
</div> 

<div id="item-wrapper"> 
    <ul class="items"> 
     <li class="category-1"> 
      <section class="slider"> 
       <div id="slider" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
        </ul> 
       </div> 
       <div id="carousel" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
        </ul> 
       </div> 
      </section> 
     </li> 
     <li class="category-1">item 2</li> 
     <li class="category-1">item 3</li> 
     <li class="category-1">item 4</li> 
     <li class="category-1">item 5</li> 
     <li class="category-1">item 6</li> 
     <li class="category-2"> 
      <section class="slider"> 
       <div id="slider1" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
        </ul> 
       </div> 
       <div id="carousel1" class="flexslider"> 
        <ul class="slides"> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
         <li><img src="http://responsiveslides.com/1.jpg" /></li> 
        </ul> 
       </div> 
      </section> 
     </li> 
     <li class="category-2">item 8</li> 
     <li class="category-2">item 9</li> 
     <li class="category-2">item 10</li> 
     <li class="category-2">item 11</li> 
     <li class="category-2">item 12</li> 
     <li class="category-1">item 13</li> 
     <li class="category-1">item 14</li> 
     <li class="category-2">item 15</li> 
    </ul> 

    <div class="ctrl-nav"> 
     <a href="#" id="prev">Previous</a><a href="#" id="next">Next</a> 
    </div> 
</div>

相對更新JavaScript代碼像下面

$(window).load(function(){ 
    $('#carousel').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: false, 
    slideshow: false, 
    itemWidth: 210, 
    itemMargin: 5, 
    asNavFor: '#slider' 
    }); 

    $('#slider').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: false, 
    slideshow: false, 
    sync: "#carousel", 
    start: function(slider){ 
     $('body').removeClass('loading'); 
    } 
    }); 

    $('#carousel1').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: false, 
    slideshow: false, 
    itemWidth: 210, 
    itemMargin: 5, 
    asNavFor: '#slider1' 
    }); 

    $('#slider1').flexslider({ 
    animation: "slide", 
    controlNav: false, 
    animationLoop: false, 
    slideshow: false, 
    sync: "#carousel1", 
    start: function(slider1){ 
     $('body').removeClass('loading'); 
    } 
    }); 
});

來源

2017-10-17 06:14:01

我很抱歉。我錯誤地在這裏。事實上，我之前在代碼中添加了不同的id，但仍然無效。我已更改，請在我們的測試代碼中重試 – Eelyn

。我嘗試不同的方式。 @Eelyn –

你可以用我最新的代碼來測試它。我改變了一些東西來使過濾器功能起作用。在此之前，有一個錯誤。 – Eelyn

Flexslider無法在過濾代碼中工作

回答

相關問題