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

Я думаю, что вам нужно это slides вариант на странице API.

Строка селектора, которая идентифицирует элементы в контейнере слайд-шоу, которые должны стать слайдами. По умолчанию 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;
    }