0

在试验和尝试了 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 -->
4

1 回答 1

0

一开始可能会有点混乱，因为叠加层和标题是具有自己选项的不同元素，可以单独显示。

您的代码有一些简单的问题。第一个是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;
}

和一个关于 jsfiddle 的工作示例。

于 2014-03-27T02:10:52.710 回答