Question

我复制粘贴ratchet slider的示例，但1）我的图片没有响应，2）文字没有显示在图片上或每张幻灯片上。

<div class="content">
    <div class="slider" id="mySlider">
      <div class="slide-group">
         <div class="slide">
            <img src="http://goratchet.com/assets/img/slide-1.png">
            <span class="slide-text">
              <span class="icon icon-left-nav"></span>
              Slide me
            </span>
         </div>
         <div class="slide">
            <img src="http://goratchet.com/assets/img/slide-2.png">
         </div>
         <div class="slide">
            <img src="http://goratchet.com/assets/img/slide-3.png">
         </div>
      </div>
    </div>

</div>

问：是否可以：

img {
    max-width:100%;
}

问：如何在每张幻灯片中显示文字？我一定错过了什么。

Here's my site如果你想看一下。

Answer 1

我确实遇到了完全相同的问题，但我认为我找到了问题并找到了解决方案。

似乎他们忘了在CSS文件中包含此代码：

.slider .slide-group .slide {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    font-size: 14px;
}
.slider .slide-group .slide-text {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 24px;
    text-shadow: 0 0 10px rgba(0,0,0,.5);
}
.slider .slide-group {
    position: relative;
    font-size: 0;
    white-space: nowrap;
    -webkit-transition: all 0 linear;
    -moz-transition: all 0 linear;
    transition: all 0 linear;
}
.slider .slide img {
    width: 100%;
    height: 570px;
    display: block;
}

棘轮滑块不显示文字

1 个答案: