When implementing the Slick Carousel with autoplay within an Isotope grid, the height of the image slides may occasionally reduce to 1 pixel when applying filters

I've been struggling with this issue for more than a day now, and despite searching through similar posts and trying their solutions, I still haven't been able to resolve it.

Here's an example of the problem: 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');
         $container.isotope({
           filter: filterValue
         });
       });
       
       // other code here...
       
     });
   });

Try filtering a few times quickly and you may notice the "1px image height" issue, which resolves itself upon transitioning to the next slide.

Plugins being used:

Slick -

Isotope -

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

The solution I attempted: Using the Slick Carousel with a background image in a Isotope (masonry) grid - height of slides becomes 1px

Who will come to my rescue and fix this pesky bug?

Thank you in advance!

jquerycssbootstrap-4jquery-isotopeslick.js

Answer №1

After some experimentation on JSFiddle, I was able to successfully resolve the issue!

Here's what I did:

  • Removed the img-fluid class from the image slides.
  • Implemented a function to pause auto play during filtering and resume once the transition is complete.
  • Set width and height to 100% for several containers.

I've kept the original faulty version (refer to code snippet) in the question, and you can view the working example here: 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'
       });

      // Add filter button click functionality
         $('.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
           });
 
   
         });
         // Update 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');
           });
         });
 
        // Adjusts slick-list height whenever isotope layout changes.
        $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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285b44414b43054b495a475d5b4d44681906100619">[email protected]</a>/slick/slick.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7407181d171f591715061b0107111834455a4c5a45">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9be8f7f2f8f0b6f8fae9f4eee8fef7dbaab5a3b5aa">[email protected]</a>/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.postim...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery datetimepicker does not have compatibility with HTML5 validation features

I currently have a date-time field in my form: <input type="text" class="form-control datepicker" required /> $('.datepicker').datetimepicker({ datepicker: true, timepicker: true, lang: 'pl' }); Each field in my form i ...

htmljqueryvalidationjquerydatetimepicker

The contact form is encroaching on the footer

The issue arises when the contact form overlaps with the footer. When testing the code on Codepen, the styles are correctly linked and working for everything except the contact form. I have attempted adjusting the padding, bottom position, etc., but nothin ...

htmlcssbootstrap-4

What is the method for importing .scss files throughout a Next.js application?

I'm looking to transform my React app into a Next.js app. In the current React setup, I have .scss CSS files being imported in various components. However, once I transfer the code to a Next.js environment, I encounter an error: Global CSS cannot be ...

cssreactjsnext.jssass

What is the best method for applying a style specifically to controls located on the lower part of the

I am currently working on designing a table in a webpage and need to set styles for the <td> tags. Is it possible to apply different styles to the upper and lower cells? Can I use a <style> that specifically targets the bottom <td> tags? ...

htmlcss

Adjust the button's hue upon clicking it

The current function is operational. Upon pressing the button, it toggles between displaying "click me" and "click me again". However, I desire the button to appear blue when showing "click me" and red when displaying "click me again". <!DOCTYPE html ...

javascripthtmlcss

Implementing a delete functionality within a loop on a JavaScript object array

I have a JavaScript object with the following structure: var partner = { p_name: { value: partner_name, label: "Name" }, p_id: { value: partner_ID, label: "ID" }, p_status: { value: partner_status, label: "Status" }, p_email: { value: partner_emai ...

javascriptjquery

Full progress sphere

Looking for some assistance with a circular progress component code that I have been working on. Despite my efforts, the circle is not completing when hovered over. Any suggestions on how to make it work would be greatly appreciated. button { bord ...

htmlcss

Maintaining content after page refresh with jQuery Ajax

Utilizing jquery and ajax in my project. Here's a snippet of the code I plan to implement. If I refresh the page after receiving a response (in this case, a form), I lose all the content. Is there a way to store/cache the response data in a variable s ...

jqueryajax

Is it possible to create a function that executes if a checkbox is checked, and another function if

When the radio button with the ID m1 is checked, my mesh updates its position. I attempted to make the mesh return to its original position if "#m1" is no longer checked. Is it necessary to trigger a function when checked and a different function when no ...

javascriptjquerythree.js

reveal or conceal content on hover of mouse pointer

I am currently working on a section that functions like jQuery tabs, but instead of requiring a click to activate, I want it to work on mouse hover. The current implementation is somewhat buggy - when hovering over a specific section, it displays as expe ...

jquerycsstabs

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

javascripthtmlcssiframereddit

Ajax request results in a 400 error code

Here is the structure of my Ajax call: function Submit() { var objectData = { email: $("#email").val(), firstName: $("#firstName").val(), lastName: $("#lastName").val(), loginMode: $("#login ...

javascriptjqueryajax

Eliminate extraneous space with the clearfix:after pseudo-element

Could use some help figuring out how to remove the unwanted whitespace caused by clearing the float (specifically after the tabs). Any suggestions on how to fix this issue? Take a look at the code snippet below (jsfiddle): /* Clearfix */ .clearfix:af ...

jqueryhtmlcss

Updating the titles of Bootstrap 4 Switches on the fly

Currently utilizing Bootstrap 4 Toggle on my website, I'm struggling to figure out how to dynamically modify the labels on the toggles at runtime. My objective is to implement a toggle-switch that, once activated, displays a countdown indicating the ...

javascripthtmljquerybootstrap-4

A step-by-step guide to adding a checkbox column dynamically within handsontable

I am currently utilizing handsontable within a jsfiddle at http://jsfiddle.net/kc11/cb920ear/1/. My task involves dynamically inserting a checkbox column before the existing data. The structure I am working with appears to be a multidimensional array, as s ...

javascriptjqueryarrayscheckboxhandsontable

DropdownList continues to accumulate previous elements without removing them (JQuery)

I have implemented two dropdown lists in my View The first one displays Companies, and the second one shows Vacancies related to the selected company. After selecting a company, I want the second selector to display only the Vacancies associated with tha ...

c#jqueryasp.net-mvc

Ways to link event listener for changing HTML elements

Hey there, I'm facing an issue with my jQuery onload function. It attaches a function call on mouseover of inline links based on their classname. I also want to load some html content dynamically using ajax. However, the function call attachment based ...

jquery

IE9 experiences difficulty with Ajax-based authentication

I have integrated Ajax-based login and signup functionalities within a Fancybox modal. When a user clicks on the login button, the form inside the Fancybox opens, the user submits the form, and the page reloads with the user being authenticated. I'm u ...

jqueryajaxinternet-explorerauthenticationinternet-explorer-9

How can I trigger a mousedown event on mobile devices without using jQuery?

Can I implement a straightforward mousedown/mouseup event in an Angular-based mobile app? While utilizing ngTouch for swiping, I've noticed it lacks support for a 'while-pressed' event. I've found that ngMousedown is ineffective on to ...

javascriptjqueryangularjstouch

Tips for aligning 2 divs in the same position?

I am working on a slider feature that includes both videos and pictures. I need to ensure that the videos are hidden when the device width exceeds 600px. Here is the HTML code snippet: <video class="player__video" width="506" height="506" muted preloa ...

htmlcss