Need help with slider

[ncsjcnjs]

Hello community, the sliders on my best seller are only appearing on hover. i want them to remain. also, the sliders are appearing on the product cards. i want them aside. any solutions?

website url: trendlabb.com

[abdulmoeed37]

Hi, please add the following code at the end of your featured-collection.css file.

.product-slider--nav-button {
 opacity: 1 !important;
 visibility: visible !important;
}

[thescriptflow]

Hey @ncsjcnjs I hope you ae doing well. I check the slider. And found that when I hover on slider container then the arrows visible. You can say initial the opacity is zero and when I hover on it then it's opacity become 1. After spending my 15 minutes I finally find the class that effect on hover.

So you have to paste this code this in featured-colection.css.

Here is how you can find featured-collection.css file.

1. Go to Shopify admin.
2. Click on Online Store.
3. Select the theme that you want to Edit. Now click on three dots and then click on Edit Code.
4. In the Edit Code search for featured-collection.css file. Go to the end and paste the following code.

.product_slider_wrapper .product-slider--nav-button {
  opacity: 1 !important;
  visibility: visible !important;
}

If this was helpful mark as Solution and Like it.

Thanks

[suyash1 · Accepted solution]

@ncsjcnjs please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

.product_slider_wrapper .product-slider--nav-button{opacity: 1 !important;}
.swiper-button-next.product-slider--nav-button {right: -5rem !important;}
.swiper-button-prev.product-slider--nav-button {left: -5rem !important;}