Question

在试验并尝试使用Cycle2插件后，我无法让主要幻灯片容器中的叠加标题和控件生效，我复制并粘贴它就像在演示网站中一样，对此有什么想法？提前谢谢。

<!-- slider -->
<div class="row padded hide-on-mobile cycle-slideshow"
    data-cycle-fx="scrollHorz" 
    data-cycle-speed="1500"
    data-cycle-pause-on-hover="true"
    data-cycle-caption-overlay="caption2"
    data-cycle-caption-template="Slide {{slideNum}} of {{slideCount}} - ({title})"
    >

    <div class="cycle-overlay"></div>

    <img src="http://placehold.it/1200x450/fff&text=slide1" data-cycle-title="Spring" data-cycle-desc="desc1">
    <img src="http://placehold.it/1200x450/fff&text=slide2" data-cycle-title="Redwoods" data-cycle-desc="desc2">
</div><!-- end of slide container -->

Answer 1

首先它可能有点混乱，因为叠加和标题是具有各自选项的不同元素，并且可以单独显示。

您的代码存在一些简单问题。第一个是data-cycle-caption-overlay="caption2"应为data-cycle-caption-plugin="caption2"。但是，除非您想要为标题设置动画，否则您实际上并不需要此选项（以及其他js插件）。

由于您只在幻灯片中使用了循环覆盖元素，因此需要将data-cycle-caption-template选项更改为data-cycle-overlay-template。

最后要在幻灯片中显示叠加层，您需要添加一些样式。

这里是更新的html：

<div class="row padded hide-on-mobile cycle-slideshow"
    data-cycle-fx="scrollHorz" 
    data-cycle-speed="1500"
    data-cycle-pause-on-hover="true"
    data-cycle-overlay-template="Slide {{slideNum}} of {{slideCount}} - {{title}} ({{desc}})"
    >

    <div class="cycle-overlay"></div>

    <img src="http://placehold.it/480x320/555&text=slide1" data-cycle-title="Spring" data-cycle-desc="desc1">
    <img src="http://placehold.it/480x320/555&text=slide2" data-cycle-title="Redwoods" data-cycle-desc="desc2">
</div>

和css：

/* slideshow */
.cycle-slideshow {
    width: 480px;
    height: 320px;
    overflow: hidden;
}

/* overlay */
.cycle-overlay { 
    width: 100%;
    padding: 15px;
    position: absolute; 
    bottom: 0; 
    z-index: 600;
    background: rgba(0, 0, 0, 0.7); 
    color: white;  
    font-family: tahoma, arial;
}

和working example on jsfiddle。

Cycle2 jQuery插件不嵌套字幕或下一个/上一个控件

1 个答案: