Flickity carousel cards overlapping amongst themselves

Question

I have two carousel on the same page. Reading multiple issues(https://github.com/metafizzy/flickity/issues/206) and the doc(https://flickity.metafizzy.co/options.html#carousel-cell2) I was able to make one of the carousel run perfectly.

The perfect one looks like this : https://i.stack.imgur.com/vw3Yj.jpg and the JQuery for it is :

$('.main-carousel').flickity({
  // options
  contain: true,
  initialIndex: 0,
    imagesLoaded: true,
    groupCells:2,
  resize: false,
});

Now, I tried to make the next one exactly with same options. But it keeps on overlapping. (https://i.stack.imgur.com/3unZS.jpg)

$('.school_section1').flickity({
  // options
  contain: true,
  initialIndex: 0,
  imagesLoaded: true,
  groupCells:2,
  resize: false,
});

As all almost all the css and options are same it should behave like the one above but it is not the case.

You can see the page here

I want the second one to behave like the first one. But I am unable to make it work.

score -1 · Answer 1 · answered Sep 04 '19 at 14:16

-1

I just saw the page. 

Try making these changes to the existing class. It should work.

.school_section1 .single-area {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.2);
    align-items: center;
    justify-content: space-around;
    width: 17%;
    height: 100%;
}

answered Sep 04 '19 at 14:16

vaishali

19
2

This is more of a "jugaad". I anyhow need 25% width or maybe 270px width. If i use it on a different width it would fail. Right now I have your changes applied, please take a look. – Bhanu Sep 04 '19 at 14:29

Flickity carousel cards overlapping amongst themselves

1 Answers1