No announcement yet.

Storefront Slider Module prev and next arrow buttons problem solution

  • Filter
  • Time
  • Show
Clear All
new posts

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

    Leave a comment:

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

    Leave a comment:

  • Storefront Slider Module prev and next arrow buttons problem solution

    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.