CODEWITHSUNDEEP
htmlcsscarousellaravel-bladecycle2
Stefan Neuenschwander
Stefan Neuenschwander

Reputation: 833

Cycle2 Carousel not working when it's in a DIV

So I have a cycle2 Carousel in my page, which worked perfectly. Now I've been putting the content of the carousel in a DIV so I can show content over the images when it's being hovered.

The carousel works as it should when I remove that div (img_ct) but I need that div there to use the hover effect. Any idea where it goes wrong? Below the code being used:

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

And the CSS (which includes the hover etc):

    .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;
}

EDIT: The code Zgood provided works, but now the CSS screws up a bit. The hover should only be on the item that is actually being hovered, but it goes on all the items. Any idea's on that?

Upvotes: 0

Views: 1480

Answers (1)

zgood
zgood

Reputation: 12581

I think what you need is the slides option on the API page.

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.

So in your case you would need that slides value to be > .img_ct. Since you are declaring it with the data- attributes your code might look like this:

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

Update

For your updated problem, it probably has to do with this style:

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

Cycle2 will put an active class on slide that are currently active. Its called .cycle-slide-active. So I think you should update the above style to only target active slides. Like this:

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

Upvotes: 2

Related Questions