0

Cycle2 プラグインを実験して試した後、オーバーレイ キャプションとコントロールをメイン スライド コンテナ内に配置することができません。デモ Web サイトと同じようにコピーして貼り付けました。これについて何か考えはありますか? 前もって感謝します。

<!-- 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

オーバーレイとキャプションは独自のオプションを持つ異なる要素であり、別々に表示できるため、最初は少し混乱する可能性があります。

コードにはいくつかの単純な問題があります。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;
}

およびjsfiddleの実例。

于 2014-03-27T02:10:52.710 に答える