Cycle2 Carousel 在 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 选项。

一个选择器字符串，用于标识幻灯片中的元素 应该成为幻灯片的容器。默认情况下，Cycle2 查找所有 作为幻灯片容器的直接子级的图像元素。

因此，在您的情况下，您需要将 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 将在当前活动的幻灯片上放置一个活动类。它被称为.cycle-slide-active。所以我认为您应该更新上述样式以仅针对活动幻灯片。像这样：

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