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>