javascript - 如何显示带标题的 slider ？

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

You can add a simple, default caption by including an empty div in your slideshow container with the class cycle-caption

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