Question

我正在为我的网页添加一个轮播。我设法使用了flickity主题。它有效，但是当我尝试添加图像时，它们不会出现。我不确定如何正确添加图像并摆脱旋转木马中每张幻灯片中当前显示的1,2,3。控制台中也没有错误。

这是我的HTML

<section id="cities">
<div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">Destinations</h2>
        <hr class="my-4">
      </div>
    </div>
    <div class="gallery js-flickity">
 <div class="gallery-cell"> <img src="img/ny.jpg" alt="First slide">
<h2>
 <span>New York</span>
</h2>
</div>

<div class="gallery-cell">
<img src="img/paris.jpg" alt="Second slide">
<div class="col-md-12 text-center">
<h2>
    <span>Paris</span>
</h2>
</div>

<div class="gallery-cell">
<img src="img/london.jpg" alt="Third slide"> 
<div class="col-md-12 text-center">
<h2>
    <span>London</span>
</h2>
</div>
</div>
</section>

这是我的CSS

 .gallery-cell {
 width: 100%;
 height: 200px;
 margin-right: 10px;
 counter-increment: gallery-cell;
 }

  /* cell number */
 .gallery-cell:before {
 display: block;
 text-align: center;
 content: counter(gallery-cell);
 line-height: 200px;
 font-size: 80px;
 color: white;
 }


 /* big buttons, no circle */
 .flickity-prev-next-button {
  width: 100px;
 height: 100px;
 background: transparent;
 }
 /* arrow color */
 .flickity-prev-next-button .arrow {
  fill: white;
 }
 .flickity-prev-next-button.no-svg {
  color: white;
 }
 .flickity-prev-next-button:hover {
  background: transparent;
 }
 /* hide disabled button */
 .flickity-prev-next-button:disabled {
  display: none;
 }

 /* position dots in gallery */
.flickity-page-dots {
 bottom: 0px;
 }
 /* white circles */
 .flickity-page-dots .dot {
 width: 12px;
 height: 12px;
 opacity: 1;
 background: transparent;
 border: 2px solid white;
 }
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
background: white;
}

如果有任何想法，请告诉我。谢谢

Answer 1

那件事的文件非常糟糕。下面是一个有效的代码片段，但要使其正常工作，您需要：

在css中删除或注释掉这部分：

＆＃13;

a href tag

＆＃13;

并调整此部分的高度：

＆＃13;

.gallery-cell:before {
  display: block;
  text-align: center;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
 }

＆＃13;

上面代码段中的背景是丑陋的绿色。所以，你也可以删除它。

这是主要的片段：

＆＃13;

.gallery-cell {
  width: 100%;
  height: 400px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

＆＃13;

注意：由于文档非常差/不存在，我无法看到它们是否支持文本和图像。他们的网站上没有带文字的例子。

将图像添加到轮播

1 个答案: