Storefront Slider Module prev and next arrow buttons problem solution

[Matt Zimmermann]

To correct for this in the product carousels, you should be able to add the z-index to the pages.css file. If you search for '.product-carousel .slick-next,', update date that call to the following and you should be good to go:

.product-carousel .slick-next,
.product-carousel .slick-prev {
    margin-top: 0;
    top: 32%;
    width: 2.5rem;
    height: 3.5rem;
    z-index: 1;
}

I looked at the demonstration site and found the same issue. The above corrected it.

[kayakbabe]

I figure out this causes me to have to adjust some other z-indexes. If you can, avoid doing this. I have ended up showing less items in the slick slider so that the bounding box of those visible items will not overlap the slick-arrow.

Just one of the problems were on the CTGY screen, the arrows were in front of the flyout menu.

[kayakbabe]

Just documenting in case anyone else has a slider or carousel button issue.

I altered the default settings of the levels theme to show more items and to slide more items.
This led to a situation where the previous arrow button when clicked actually linked to the first displayed product in the slider.
It is purely a css issue. There are probably many ways to solve it.
My solution was to add a z-index to the slick-arrow css class

I have a custom.css in my levels theme css folder to keep my css separate from any updates to theme.
This is what I added to my custom.css

.slick-arrow {z-index: 20;} /** force the slider arrow to be infront of everything else **/

it's working both on desktop and mobile.
I set a pretty high z-index because don't want to have to revise this later.