Question

我正在尝试使用jquery.flipster将2个轮播合并到我的网络应用程序中：https://github.com/drien/jquery-flipster

然而，我只是每次尝试展示一个旋转木马。当我单击标签以隐藏第一个标签并显示第二个标签时，第二个标签不会出现。检查Firefox中的元素，我可以看到<ul>下面的class="flipster"没有给出hide / show上的高度或宽度：

HTML：

<div class="carousel-1">
    <h2>Carousel 1</h2>
    <div class="flipster">
      <ul>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
      </ul>
    </div>
  </div>


  <p class="show-carousel-2">Click Me to toggle both carousels</p>


  <div class="carousel-2">
    <h2>Carousel 2</h2>
    <div class="flipster">
      <ul>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
        <li><img src="http://placehold.it/200x200" alt="" /></li>
      </ul>
    </div>
  </div>

脚本：

<script>
    $(function() {
      $(".flipster").flipster({
        style: 'carousel',
        enableNav: false,
        enableNavButtons: true,
        start: 0
      });
    });

    $(document).ready(function(){

      $(".carousel-2").hide();

      $( ".show-carousel-2" ).click(function() {
        $( ".carousel-1" ).toggle( "slow" );
        $( ".carousel-2" ).toggle( "slow" );
      });

    });
  </script>

Plunker：http://plnkr.co/edit/mqclzHJ1lLZCgr4j23AR?p=preview

我甚至尝试通过以下方式强制高度和宽度：

$( ".js-inject-carousel-css" ).css({"height": "176px !important", "width": "140px !important"});

将class js-inject-carousel-css添加到<ul>

仍然没有运气

Answer 1

我发现了问题并解决了这个问题。

而不是：

$( ".js-inject-carousel-css" ).css({"height": "176px !important", "width": "140px !important"});

我用过：

$( ".js-inject-carousel-css" ).css({"height": "176px", "width": "140px"});

基本上我删除了!important。这阻止了jQuery插入CSS值。

jquery.flipster在隐藏和显示2个轮播时没有显示

1 个答案: