Container within slider breaks slider (Slick.js)

Question

I'm using Slick Slider, a very versatile JQuery carousel plugin.

However the effect I'm trying to accomplish requires me to nest an extra element within the slider. This extra element ends up breaking the slider functionality.

Here's the page in question. Note how I have a blurred after pseudo element blocking the right side of the carousel (image below depicts current workaround, not the desired effect).

I'd like the ul that holds all the carousel <li>'s to be partially covered on the right side using a child element whose overflow is hidden.

So it would look something like this:

<ul class="slick-slider">
   <div class="container">
    <div class="slick-list">
        <div class="slick-track">
         <li class="slick-slide">carousel item content</li>
         <li class="slick-slide">carousel item content</li>
         ...
        </div>
    </div>
   </div>
</ul>

and .container would have CSS like

.container {overflow: hidden; display: block; width: 90%; border-right: 1px solid #fff;}

The only challenge is that this breaks the carousel. I've tried applying the overflow CSS to the already existing .slick-list element, but the parent elements automatically resize everything else in the slider when I do this.

Any ideas on how I can get the slider to ignore the container I want to nest?

EDIT: Here's a gif of me applying the overflow to the parent container and it automatically resizing (the div.cardoverflow is a parent of the <ul> in this example). I've also tried to do this by adding a margin-left to the <ul> and it still automatically resizes.

Answer 1

First of all, you can't have div elements as direct children of ul. Can I use div as a direct child of UL?

I don't understand why your container can't be outisde of the ul, with overflow hidden? And just put the arrow outside them both?

<div class="mainContainer">
    <button class="slick-prev-arrow" />
        <div class="container">
            <ul class="slider">
                 <li>slide1</li>
                 <li>slide2</li>
            </ul>
        </div>
    <button class="slick-next-arrow" />
</div>

Note that Slick lets you choose your arrow elements if you want, so you can place them anywhere in your HTML, they don't even have to be buttons (although that's probably better for accessibility).

$('ul.slider').slick({
    nextArrow:'.slick-next-arrow',
    prevArrow:'.slick-prev-arrow'
});