Flexslider 在过滤代码中不起作用

Question

我知道我的问题和其他人很相似，但是过滤代码不同。

我的问题：

对于 "Category 1"，flexslider 运行良好，但是一旦我单击 "Category 2"，flexslider 就无法运行。检查源代码后，幻灯片具有内联样式 width="0px"。

我参考了其他一些解决方案并在我这边应用，但没有用。

"Category 1"

点击"Category 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({
 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(slider){
   $('body').removeClass('loading');
 }
  });
});

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">
 <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>

Answer 1

我在您的 html 代码中发现了一些问题。即两个 id 同名（id="slider" 和 id="carousel"）只需更新它 slider1 和 轮播1

我认为你的问题已经解决了。

<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');
    }
  });
});

Answer 2

更新您的 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>

Flexslider 在过滤代码中不起作用

Flexslider doesn't work in filteration code

html

javascript

jquery

filter

flexslider