Slick slider full width to contain the first 3 slides to the width of Bootstrap's container

HTML & CSS
1

Hi,

I have the following fiddle:

What I am trying to do is to set the three slides on desktop to be the same width as a Bootstrap container, then follow down the same width on other devices.

As it’s full width, I am not sure how to do this. I guess I could use percentage, but obviously, this would depend on the user’s desktop.

Does anyone have any idea how I can do this?

Thanks!

2

Ok, I think I found a way, I set each slide to have a width:

width: 366px!important

3

Not sure if you meant this but simply adding the container class to the slider will make it the same width as the container?

<div class="general-slider container" id="newlisting">

Not sure if that’s what you meant though :slight_smile:

1 Like
4

I am trying to have the slider full width, but have the 3 inside slides the same width as the container.

5

Hi,

I seem to have another issue.

When I scroll through my slides, after it gets to slide 6 and you scroll, all of the slides seem to have the opacity: 0.5 applied to them.

This is my fiddle:

Can anyone see why this is?

Thanks

6

Had a quick look but couldn’t spot anything obvious. It looks like as the cycle ends the active classes take a time to be reapplied and so you get the opacity you set on all of them take effect.

I couldn’t see a css solution at the moment (but I’m working without internet at the moment so time is limited).

7

Thank you for your reply.

I had a quick look too and found out it could be a bug with the Slick library. I will have a look through and see if I can find a fix.

1 Like
8

This is not a real fix but perhaps may hide the effect a little.

.general-slider .item{
    margin: 0 10px;
    opacity: 0.5;
    transition:opacity .3s ease .5s
}
img{
    max-width: 100%;
    height: auto;
}
.general-slider .item.slick-active{
    opacity: 1;
    transition:opacity 0s 0s;
}
1 Like
9

Thank you for that, I will try that :slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.