在同位素网格中使用带自动播放功能的Slick Carousel时，过滤时图像幻灯片的高度有时会变为1px。

Question

我现在已经坚持了这个问题超过一天了，在经历了similair帖子并尝试他们的解决方案后，我仍然无法解决这个问题。

以下是我所说的一个例子： https://jsfiddle.net/Aorus/1c4xbpvr/7/

   $(function() {
     var isoGrid;
     var carousel = $(".portfolio-item-slide");

     var $container = $('.showcasegrid').imagesLoaded(function() {

       $isoGrid = $container.isotope({
         itemSelector: '.grid-item'
           //layoutMode: 'fitRows'
       });

       // bind filter button click
       $('.iso-filters-button-group').on('click', 'button', function() {
         var filterValue = $(this).attr('data-filter');
         // use filterFn if matches value
         // filterValue = filterFns[filterValue] || filterValue;
         $container.isotope({
           filter: filterValue
         });
       });
       // change is-checked class on buttons
       $('.iso-button-group').each(function(i, buttonGroup) {
         var $buttonGroup = $(buttonGroup);
         $buttonGroup.on('click', 'button', function() {
           $buttonGroup.find('.active').removeClass('active');
           $(this).addClass('active');
         });
       });

       // This runs whenever the isotope layout is resized.
       $isoGrid.isotope('on', 'layoutComplete', function(isoInstance, laidOutItems) {
         $(laidOutItems).each(function() {
           $(this.element).find('.slick-list').css({
             height: this.size.height
           });
         });
       });

       carousel.slick({
         accessibility: false,
         autoplay: true,
         autoplaySpeed: 3000,
         infinite: true,
         speed: 300,
         dots: true,
         arrows: false,
         fade: false,
         adaptiveHeight: false,
         onInit: function() {
           // This runs after the slickgrid is first initialized.
           this.$list.css('height', this.$slider.parents('.slide-container').outerHeight(true))
         }
       });

     });
   });

.showcasegrid {
  min-height: 600px;
}

.grid-item {
  position: relative;
  float: left;
  color: #262524;
}

.grid-item > * {
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


<div class="container-fluid">
  <div class="row my-4 justify-content-center">
    <div class="col-12 ">
      <div class="btn-group iso-button-group iso-filters-button-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary active" data-filter="*">Show All</button>

        <button type="button" class="btn btn-secondary" data-filter=".games">Games</button>
        <button type="button" class="btn btn-secondary" data-filter=".design">Design</button>
        <button type="button" class="btn btn-secondary" data-filter=".level-design">Level design</button>
        <button type="button" class="btn btn-secondary" data-filter=".narrative-design">Narrative Design</button>
        <button type="button" class="btn btn-secondary" data-filter=".programming">Programming</button>
        <button type="button" class="btn btn-secondary" data-filter=".unreal-blueprints">Unreal Blueprints</button>
      </div>
    </div>
  </div>


  <div class="row my-4 justify-content-center">
    <div class="col-12">
      <div class="showcasegrid">
        <article class="grid-item portfolio-item-53 col-3  games programming unreal-blueprints">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
            </div>
          </div>
          <div class="portfolio-item-desc"><h5>Project 1</h5></div>
        </article>
        <article class="grid-item portfolio-item-55 col-3  games unreal-blueprints">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
            </div>
          </div>
<div class="portfolio-item-desc"><h5>Project 2</h5></div>
        </article>
        <article class="grid-item portfolio-item-57 col-3  games design level-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
            </div>
          </div>
<div class="portfolio-item-desc"><h5>Project 3</h5></div>
        </article>
        <article class="grid-item portfolio-item-59 col-3  design level-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
            </div>
          </div>
<div class="portfolio-item-desc"><h5>Project 4</h5></div>
        </article>
        <article class="grid-item portfolio-item-61 col-3  design narrative-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
            </div>
          </div>
<div class="portfolio-item-desc"><h5>Project 5</h5></div>
        </article>
        <article class="grid-item portfolio-item-63 col-3  design level-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
            </div>
          </div>
<div class="portfolio-item-desc"><h5>Project 6</h5></div>
        </article>
        <article class="grid-item portfolio-item-65 col-3  games design level-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
              <div class="image"><img class="img-fluid" src="http://s14.postimg.org/3na88ng1d/default_profile_image.png" ></div>
            </div>
          </div>
<div class="portfolio-item-desc"><h5>Project 7</h5></div>
        </article>
      </div>
    </div>
  </div>

</div>

尝试快速过滤几次，一段时间后出现“1px图像高度”问题，它会在下一张幻灯片转换时自行修复。

我正在使用的插件：

光滑 - https://kenwheeler.github.io/slick/

同位素 - https://isotope.metafizzy.co/

Bootstrap - https://getbootstrap.com/docs/4.0/getting-started/introduction/

我尝试使用的解决方案：Using the Slick Carousel with a background image in a Isotope (masonry) grid - height of slides becomes 1px

谁将成为我的程序员，穿着闪亮的盔甲，让我免于这个烦人的错误？

提前致谢！

Answer 1

所以在JSFidle中更多地玩游戏后，我设法解决了它！

我做了什么：

• 从图像幻灯片中删除了img-fluid类。
• 添加了一种在发生过滤时暂停自动播放的方法 过滤转换完成后再次开始播放。
• 为几个容器添加了100％的宽度和高度。

我在问题中留下了旧版本（请参阅代码段），其工作示例可在此处找到：https://jsfiddle.net/Aorus/1c4xbpvr/17/

   $(function() {
     var isoGrid;
     var carousel = $(".portfolio-item-slide");

     var $container = $('.showcasegrid').imagesLoaded(function() {

       $isoGrid = $container.isotope({
         itemSelector: '.grid-item',
         layoutMode: 'fitRows'
       });

       // bind filter button click
       $('.iso-filters-button-group').on('click', 'button', function() {
         var filterValue = $(this).attr('data-filter');
         // use filterFn if matches value
         // filterValue = filterFns[filterValue] || filterValue;
         carousel.slick('slickPause');
         console.log('pause');
         $container.isotope({
           filter: filterValue
         });


       });
       // change is-checked class on buttons
       $('.iso-button-group').each(function(i, buttonGroup) {
         var $buttonGroup = $(buttonGroup);
         $buttonGroup.on('click', 'button', function() {
           $buttonGroup.find('.active').removeClass('active');
           $(this).addClass('active');
         });
       });

       // This runs whenever the isotope layout is resized.
       $isoGrid.isotope('on', 'layoutComplete', function(isoInstance, laidOutItems) {
         $(laidOutItems).each(function() {
           $(this.element).find('.slick-list').css({
             height: this.size.height
           });
         });
       });

       carousel.slick({
         accessibility: false,
         autoplay: true,
         autoplaySpeed: 3000,
         infinite: true,
         speed: 600,
         dots: true,
         arrows: false,
         fade: false,
         adaptiveHeight: true,
         variableWidth: false
       });

       $container.on('layoutComplete', function(event, laidOutItems) {
         carousel.slick('slickPlay');
         console.log('play');
       })

     });

   });

.showcasegrid {
  //transition: all 0.35s ease-out;
  min-height: 600px;
}

.grid-item {
  position: relative;
  float: left;
  //height: 250px;
  //padding: 10px;
  color: #262524;
}

.grid-item > * {
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
}

.slide-container {
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.slick-track {
  height: 100%;
}

.portfolio-item-slide {
  min-width: 150px;
}

.slick-list {
  width: 100% !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="container-fluid">
  <div class="row my-4 justify-content-center">
    <div class="col-12 ">
      <div class="btn-group iso-button-group iso-filters-button-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary active" data-filter="*">Show All</button>

        <button type="button" class="btn btn-secondary" data-filter=".games">Games</button>
        <button type="button" class="btn btn-secondary" data-filter=".design">Design</button>
        <button type="button" class="btn btn-secondary" data-filter=".level-design">Level design</button>
        <button type="button" class="btn btn-secondary" data-filter=".narrative-design">Narrative Design</button>
        <button type="button" class="btn btn-secondary" data-filter=".programming">Programming</button>
        <button type="button" class="btn btn-secondary" data-filter=".unreal-blueprints">Unreal Blueprints</button>
      </div>
    </div>
  </div>


  <div class="row my-4 justify-content-center">
    <div class="col-12">
      <div class="showcasegrid">
        <article class="grid-item portfolio-item-53 col-3  games programming unreal-blueprints">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
            </div>
          </div>
          <div class="portfolio-item-desc">
            <h5>Project 1</h5></div>
        </article>
        <article class="grid-item portfolio-item-55 col-3  games unreal-blueprints">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
            </div>
          </div>
          <div class="portfolio-item-desc">
            <h5>Project 2</h5></div>
        </article>
        <article class="grid-item portfolio-item-57 col-3  games design level-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
            </div>
          </div>
          <div class="portfolio-item-desc">
            <h5>Project 3</h5></div>
        </article>
        <article class="grid-item portfolio-item-59 col-3  design level-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
            </div>
          </div>
          <div class="portfolio-item-desc">
            <h5>Project 4</h5></div>
        </article>
        <article class="grid-item portfolio-item-61 col-3  design narrative-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
            </div>
          </div>
          <div class="portfolio-item-desc">
            <h5>Project 5</h5></div>
        </article>
        <article class="grid-item portfolio-item-63 col-3  design level-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
            </div>
          </div>
          <div class="portfolio-item-desc">
            <h5>Project 6</h5></div>
        </article>
        <article class="grid-item portfolio-item-65 col-3  games design level-design">
          <div class="slide-container">
            <div class="portfolio-item-slide">
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
              <div class="image"><img src="http://s14.postimg.org/3na88ng1d/default_profile_image.png"></div>
            </div>
          </div>
          <div class="portfolio-item-desc">
            <h5>Project 7</h5></div>
        </article>
      </div>
    </div>
  </div>

</div>