Cycle2 Карусель не работает, когда она в DIV

Так что на моей странице есть карусель 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 немного облажался. Наведение должно быть только на элементе, который находится на самом деле, но он распространяется на все элементы. Есть идеи по этому поводу?

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;
    }
Другие вопросы по тегам