No announcement yet.

Storefront Slider Module prev and next arrow buttons problem solution

  • Filter
  • Time
  • Show
Clear All
new posts

    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.

    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.


      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.
      Matt Zimmermann

      Miva Web Developer
      Alchemy Web Development
      Site Development - Maintenance - Consultation

      Miva Certified Developer
      Miva Professional Developer | Twitter