我希望轮播的文字停止移动。我该怎么做？

Question

这是带轮播的 HTML 文档：

<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>

关于 FLICKITY 的信息是 HERE

这是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;
}

文本位于轮播单元格内。但我想知道，是否有任何方法可以将文本包含在轮播中而不继续自动播放。

Answer 1

INNER BANNER：您可以使 .main-carousel 元素的位置相对。

OUTER BANNER：您可以将 .desp 元素从 .main-carousel 元素中取出并使其成为绝对位置。

.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>

我希望轮播的文字停止移动。我该怎么做？

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

html

css

carousel

flickity