SFNT Featured Products

[lesliekirk]

I want to remove the box to the left of the Featured Products carousel - when I try to adjust the javascript for the Product Carousel

slidesToScroll: 3,
slidesToShow: 3,

to

slidesToScroll: 4,
slidesToShow: 4,

the arrows disappear rendering the carousel inert.

How can I make this thing display 4 products and not kill it?

[lesliekirk]

How can I make this thing display 4 products and not kill it?

Note to self: Make sure you have more 4 products assigned to the category. If not, no arrows.

[kayakbabe]

When you changed to four products, did the previous arrow, the one on the left, get stuck "under" the first displayed product, so that if you try to click on the arrow, you are sent to the product screen instead? I tried just putting a z-index on the slick-arrow and that messed up a bunch of other stuff. I can't seem to figure out what css to put margins on to make it so the prev arrow on the storefront featured products slick slider won't be covered up by the product image. Have you gotten it figured out?

[lesliekirk]

I wish there was a way to add private tags to help remind the poster what store they may have been referring to (in case it's one they didn't want to publicize).

[lesliekirk]

When you changed to four products, did the previous arrow, the one on the left, get stuck "under" the first displayed product, so that if you try to click on the arrow, you are sent to the product screen instead? I tried just putting a z-index on the slick-arrow and that messed up a bunch of other stuff. I can't seem to figure out what css to put margins on to make it so the prev arrow on the storefront featured products slick slider won't be covered up by the product image. Have you gotten it figured out?

Did you ever get a solution to this? I'm now facing the same issue with another usage of the Levels Ready Theme.

[kayakbabe]

nope, i changed to three products showing. and I haven't had time to address the z index issue.

[lesliekirk]

I found this from Matt in another related post:

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; }

It fixed my issue, your mileage may vary.