Cycle2 轮播在 DIV 时无法工作

Question

所以我的页面中有一个 cycle2 轮播，效果很好。现在我已经将轮播的内容放在 DIV 中，这样我就可以在鼠标悬停时在图像上显示内容。

当我删除 div (img_ct) 时，轮播会正常工作，但我需要那里的 div 才能使用悬停效果。知道哪里出了问题吗？正在使用的代码下方：

<div class="cycle-slideshow" style="width:auto;"
 data-cycle-fx=carousel
 data-cycle-timeout=4000
 data-cycle-prev="> .cycle-prev"
 data-cycle-next="> .cycle-next"
 >

@foreach ($elements['instagram-highlights']['subs'] as $item)

    <div class="img_ct">
        <img class="instagram-home-items" src="{{ $item['instagram-items']['image'] }}">

        <div class="text-content">
            {!! $item['instagram-items']['textfield'] !!}
        </div>
    </div>
@endforeach

    <div class= "cycle-prev slider-nav-insta"><i class="fa fa-angle-left"></i></div>
    <div class= "cycle-next slider-nav-insta"><i class="fa fa-angle-right"></i></div>

以及 CSS（包括悬停等）：

    .text-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(29, 106, 154, 0.72);
    color: #fff;
    display:none;
    opacity: 0;
    -webkit-transition:opacity 0.2s;
}

.img_ct{
    position:relative;
    width:33%;
    float:left;
}


.instagram-home-items{
    display:block;
}

.img_ct:hover .text-content {
    display:block;
    opacity: 1;
}

编辑：Zgood 提供的代码有效，但现在 CSS 有点搞砸了。悬停应该只在实际悬停的项目上，但它会在所有项目上进行。有什么想法吗？

Answer 1

我认为您需要的是 API page 上的 slides 选项。

A selector string which identifies the elements within the slideshow container that should become slides. By default, Cycle2 finds all image elements that are immediate children of the slideshow container.

因此在您的情况下，您需要 slides 值为 > .img_ct。由于您使用 data- 属性声明它，因此您的代码可能如下所示：

<div class="cycle-slideshow" style="width:auto;"
 data-cycle-slides="> .img_ct"
 data-cycle-fx="carousel"
 data-cycle-timeout="4000"
 data-cycle-prev="> .cycle-prev"
 data-cycle-next="> .cycle-next"
 >

更新

对于你更新的问题，可能与这种风格有关：

.img_ct:hover .text-content {
    display:block;
    opacity: 1;
}

Cycle2 将在当前活动的幻灯片上放置一个活动的 class。它叫做 .cycle-slide-active。所以我认为您应该更新上述样式以仅针对活动幻灯片。像这样：

.img_ct.cycle-slide-active:hover .text-content {
        display:block;
        opacity: 1;
    }

Cycle2 轮播在 DIV 时无法工作

Cycle2 Carousel not working when it's in a DIV

html

css

carousel

blade

cycle2