0

I have a Flickity carousel where everythign is set and working, except that it obnly shows the last of the pictures I have and it repeat it over the others (as if it's on top of them). I don't understand why.

This is my HTML:

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
   <div class="carousel-cell">
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
   </div>
   <div class="carousel-cell">
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
   </div>
   <div class="carousel-cell">
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
   </div>
</div>

And CSS:

.main-carousel {
  width: 90%;
  align-items: center;
  margin-top: 1%;
  margin-left: 5%;
  height: 420px;
}

.carousel-cell {
  width: 100%; /* full width */
  padding-left: 10px;
  height: 400px;
  background: #fff;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
 }

 .carousel-cell img {
  display: block;
  max-height: 100%;
 }

Thank you very much for your help!

.main-carousel {
  width: 90%;
  align-items: center;
  margin-top: 1%;
  margin-left: 5%;
  height: 420px;
}

.carousel-cell {
  width: 100%; /* full width */
  padding-left: 10px;
  height: 400px;
  background: #fff;
  /* center images in cells with flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-cell img {
  display: block;
  max-height: 100%;
}
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet"/>
<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
                      <div class="carousel-cell">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
                      </div>
                      <div class="carousel-cell">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
                      </div>
                      <div class="carousel-cell">
                        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
                      </div>
                    </div>

Thank you very much for your help!

Marco
  • 13
  • 2
  • 7
  • can you please create a pen or jsfiddle so we can check what is happening. – Chilll007 May 09 '18 at 12:28
  • I added the snippet, and it's really weird because it works perfectly there. This is the link to the website www.mariaghetti.eu and the carousel is in "works" -> "people of brussels" – Marco May 09 '18 at 12:42

1 Answers1

1

There are a few issues. You are loading Flickity before jQuery loads:

In the head of your document, you have:

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="css/flickity.css" media="screen">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="js/flickity-docs.min.js"></script>

and at the end of your page you have:

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="index.js"></script>

Also you are loading the flickity CSS twice as well as an unnecessary script flickity-docs.min.js. This script is just for the Docs from flickity's web page and not needed for the slider and it throws an error.

Try this: Put this in the head of your page:

  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

and your scripts at the bottom:

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="index.js"></script>
Macsupport
  • 5,406
  • 4
  • 29
  • 45
  • 1
    Thanks very much for your help, but unfortunately the issue is still there. It's weird because I realised that after I resize the page (and put it back to normal) the carousel works correctly. – Marco May 11 '18 at 16:37
  • There still is an error with `flickity-docs.min.js`. This is not part of Flickity and I'm wondering why you are using it? As I suggested in my answer, you should remove it and see if your carousel works. – Macsupport May 12 '18 at 14:40