htmlcsscarouselflickity

I want the text of the carousel to stop moving. How can I do It?


Here is the HTML doc with a carousel :

<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="CSS/flickity.css">  // it Could be a CDN
  </head>
  <body>
      <div class="main-carousel" data-flickity='{ "wrapAround": true,"pageDots": false,"autoPlay": 1500,"imagesLoaded": false}'>
        <div class="carousel-cell">
          <div class="desp">HELLOW WORLD</div>
         </div>
        <div class="carousel-cell">
         </div>
       </div>
     <script src="lib/jquery-3.5.1.js"></script>    // it could be a CDN
    <script src="lib/flickity.js" charset="utf-8"></script> // it could be a CDN
  </body>
</html>

INFO ABOUT FLICKITY is HERE

HERE IS THE CSS

.main-carousel .carousel-cell{
  width:100%;
  height:400px;
  display:block;
}
.main-carousel .carousel-cell:nth-child(1){
  background : black;
}
.main-carousel .carousel-cell:nth-child(2){
  background : blue;
}
.main-carousel .carousel-cell .desp{
    font-size:25px;
    margin; 50px;
    background: yellow;
    padding: 20px;
}

The text is inside the carousel-cell. But I want to know , if there is any way to include the text inside the carousel and not move on autoplay.


Solution

  • INNER BANNER: You can make the position of the .main-carousel element relative.

    OUTER BANNER: You can take the .desp element out of the .main-carousel element and make the position absolute.

    .main-carousel .carousel-cell {
      width: 100%;
      height: 400px;
      display: block;
      position: relative;
    }
    
    .main-carousel .carousel-cell:nth-child(1) {
      background: black;
    }
    
    .main-carousel .carousel-cell:nth-child(2) {
      background: blue;
    }
    
    /*.outer-banner {
      position: absolute;
      background: yellow;
      z-index: 1;
      padding: 20px;
      font-size: 25px;
      margin: 50px;
      width: -webkit-fill-available;
    }*/
    
    .inner-banner {
      position: absolute;
      background: red;
      z-index: 1;
      padding: 20px;
      font-size: 25px;
      margin: 50px;
      width: -webkit-fill-available;
    }
    <html lang="en" dir="ltr">
    
    <head>
      <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
    </head>
    
    <body>
      <!--<div class="outer-banner">OUTER BANNER</div>-->
      <div class="carousel main-carousel" data-flickity='{ "cellSelector": ".carousel-cell", "wrapAround": true,"pageDots": false,"autoPlay": 1500,"imagesLoaded": false}'>
        <div class="inner-banner">INNER BANNER</div>
        <div class="carousel-cell">
        </div>
        <div class="carousel-cell">
        </div>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    </body>
    
    </html>