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

标签 jquery css bootstrap-4 jquery-isotope slick.js

我在这个问题上停留了一天多，在浏览了类似的帖子并尝试了他们的解决方案后，我仍然没有设法解决这个问题。

以下是我所讨论内容的示例: 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

谁将成为我穿着 Shiny 盔甲的程序员，拯救我免受这个恼人的错误的困扰？

提前致谢!

最佳答案

因此，在 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>

关于jquery - 当在同位素网格中使用带有自动播放功能的 Slick Carousel 时，过滤时图像幻灯片的高度有时会变为 1px。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48139429/

上一篇：php - 有条件地自定义 WooCommerce 结账字段

下一篇：jquery - 指令 AngularJS 仅输入 1 到 10 范围内的数字，jquery 指令 AngularJS

相关文章：

javascript - 如何拒绝输入字段中的相同日期？

javascript - Angular ui-sortable 不适用于移动设备

html - 使flash成为html中的背景(全屏)

html - Bootstrap 4 支持 IE 10

css - Bootstrap 4 上的非 12 整除相等列

jquery - 如何手动为此调用构建超时功能

jquery - 当空间用完时，flexbox 会在另一个地方继续堆放元素

css - 在CSS中将图像定位在div下

html - 我可以指定一个文本框的位置并在没有顶部的情况下将其向下移动吗

css - 如何使用 CSS flexbox 在 Bootstrap 4 下拉项中将图标右对齐

©2024 IT工具网  联系我们