Announcement

Collapse
No announcement yet.

Storefront Slider Module prev and next arrow buttons problem solution

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

    #2
    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.

    Comment


      #3
      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:
      Code:
      .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
      https://www.alchemywebdev.com
      Site Development - Maintenance - Consultation

      Miva Certified Developer
      Miva Professional Developer

      https://www.dev4web.net | Twitter

      Comment

      Working...
      X