Question

JQuery的

$('.slider').cycle({
    fx: 'scrollHorz',
    slides: '>a',
    swipe: true,
    easing: 'easeInOutExpo',
    prev:'.btn_prev',
    next:'.btn_next',
    timeout: 5000,
    speed: 1000,
});

HTML

<div class="slider">

    <a class="cycle-slide">
        <img src="slide07.jpg">
        <div class="caption">
            skdfksfksdfksdhfvdkvdk
        </div>
    </a>


    <a class="cycle-slide">
        <img src="slide07.jpg">
        <div class="caption">
            skdfksfksdfksdhfvdkvdk
        </div>
    </a>

    <a class="cycle-slide">
        <img src="slide07.jpg">

        <div class="caption">
            skdfksfksdfksdhfvdkvdk
        </div>
    </a>

</div>

CSS

.caption {
    position: absolute;
    top: 0;
    right: 0;
    background: #000;
    opacity: 0.7;
    height: 100%
    width: 300px;
}

想要在黑色背景中设置标题，并在右侧显示不透明度。但标题根本没有出现。一直在努力让标题出现在右侧的图像上。

在周期网站上查看演示，如果使用alt，它会显示标题，它会显示在底部。不确定为什么字幕不能正常工作。

更新：发出箭头 - 下一个和上一个

 <a href="#" class="btn_prev"></a>
          <a href="#" class="btn_next"></a>

如何让它们留在所有幻灯片的标题区域，以便它们一起滑动？

Answer 1

根据caption demo

您可以通过在您的内容中添加一个空div来添加一个简单的默认标题带有类循环标题的幻灯片容器

根据文档，您使用的是名为caption的类，而不是cycle-caption。

Answer 2

见下面的CSS：

CSS

.caption {
position: relative;
top: 0;
right: 0;
color:#fff;
background: #000;
opacity: 0.7;
height: 100%
width: 300px;
display:block;
text-align:right;
}

如何显示带标题的滑块？

2 个答案: