Glide: Display none and Glide

[protasisimone]

Hi,
I've created 3 carousel in 3 different div. I've used a Tabbed Content with display:block and display:none. When i load a page i see a right carousel but when I change the tab and I trigger display for another tab content the carousel isn't show correctly.
When resize a windows or moving the carousel the layout is correctly but this problem affected other slide with display: none.

Any solutions for this?

Thanks for ur support.

[protasisimone]

I've change display property with height: 0 and opacity: 0 and this fixed a problem.

[Mathebibel]

Problem

The above workaround might do the job in some applications. In my case there was some inexpected behavior: I defined cursor: move; on the divs and because height:0; opacity:0; doesn't really hide the elements like display:none; would do I saw the different mouse cursor on the elements AFTER the carousel (e.g. on the next heading).

Solution

If you switch from display:none; to display:block; you just have to call the update function.

Example

document.getElementById('glide-' + i).classList.remove("hidden");
glideUpdate();

with

function glideUpdate() {
  for (var i = 1; i <= glideMax; i++) {
    glideArray[i].update(); // update function provided by glide.js
  }
}

and

const glideMax = 8; // max number of gliders on one page

let glideArray = [];

for (var i = 1; i <= glideMax; i++) {

    var glide = document.getElementById('glide-' + i);

    glideArray[i] = new Glide(glide, {
          // Your options
        }).mount()
    }
}

Depending on your application there are ways to improve my code. For example it would be better to call the update function only on one glider not on all.