“同位素”与“CarouFredsel”不能很好地发挥作用

Question

我正尝试与Caroufredsel一起使用同位素，但没有成功。

我使用：

HTML + WP：

事实上同位素和Caroufredsel都使用相同ID，这是主要的矛盾。

<section class="products"> 

    <nav id="f1" class="usNavi"> 
     <div class="wrap"> 
      <ul id="filter" class="filter" data-key="filter"> 
       <li><a href="#" data-filter="*">Todos</a></li> 
       <li><a href="#" data-filter=".p-10">EcoLife Technologies</a></li> 
       <li><a href="#" data-filter=".p-6">SilverLine</a></li> 
       <li><a href="/productos/">Regresar</a></li> 
      </ul> 
     </div> 
    </nav> 

    <div id="heaters"> 

     <div class="arrow-nav"> 
      <a id="left" class="left" href="#"></a> 
      <a id="right" class="right" href="#"></a> 
     </div> 


    <ul id="carrusel" class="carrusel clearfix"> 

      <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
      <?php 
      $cat = get_the_category(); 
      ?> 
      <li class="product <?php foreach($cat as $cate){ 
       $id = $cate->cat_ID; 
       echo "p-$id"; 
      } 
      ?> heater-<?php the_ID(); ?>"> 
      <figure class="clearfix"> 
       <?php the_post_thumbnail(); ?> 
      </figure> 

      <h2><?php the_title(); ?></h2> 
      <h3><?php get_spec_0_1(); ?></h3> 
      <h4><?php get_spec_6_1(); ?></h4> 
      <a href="<?php the_permalink(); ?>">Ver</a> 
      <small> 
       Uso Recomendado para 
       <figure class="clearfix"> 
        <?php get_spec_300(); ?> 
       </figure> 
       <strong>personas.</strong> 
      </small> 

     </li> 

    <?php endwhile; endif; ?> 
    <?php wp_reset_query(); ?> 

</ul> 
</section> 

这是我怎么称呼CarouFredsel和同位素....

<script> 

jQuery(function($) { 


    var _onBefore = function() { 
     $(this).find('li').stop().css('opacity', '0.25'); 
    }; 

    var _onAfter = function() { 
     $(this).find('li').stop().css('opacity', '1'); 
    }; 

    //isotope 

    var $container = $('#carrusel'); 

    $('#filter a').click(function(){ 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ 
      filter: selector, 
      animationOptions: { 
       duration: 750, 
       easing: 'linear', 
       queue: false 

      } 
     }); 
     return false; 
    }); 

    $container.isotope({ 
     filter: '*', 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: false 
     } 
    }); 

    $("#carrusel").carouFredSel({ 
     auto : false, 
     width: '100%', 
     height: '100%', 


     scroll: { 
      duration: 750 

     }, 
     prev: { 
      button: "#left", 
      key: "left", 
      items: 2, 
      onBefore: _onBefore, 
      onAfter: _onAfter 

     }, 
     next: { 
      button: "#right", 
      key: "right", 
      items: 2, 
      onBefore: _onBefore, 
      onAfter: _onAfter 
     } 

    }); 




}); 
</script> 

感谢

Answer 1

同样在这里，我花了几个小时，并不能找到一个解决方案。旋转木马不会滚动。

我认为这与同位素将物质转化为绝对定位的事实有关。