i would like the images to show only and not the arrows in my image hero slider , please look
the dots and arrows have to go , they look kinda tacky
thank you
store url https://7kingdomsbar.myshopify.com/
password godgod294
Topic summary
A user wants to remove navigation elements (arrows, dots, and play/pause button) from their hero slider on a Brooklyn theme Shopify store, finding them visually unappealing.
Solution provided:
- Hide arrows: Add CSS code
button.slick-prev.slick-arrow, .slick-next { display: none !important; }to theme.scss.liquid - Hide dots: Use
ul.slick-dots { display: none !important; } - Hide play/pause button: Apply
button.hero__pause { display: none; }
Additional request:
The original poster asked about adding smooth transitions to the slideshow. The suggested code was .slick-track { transition: transform 2000ms ease 0s !important; }
Status:
The issue appears resolved for the original poster, who expressed gratitude. Another user with the same problem asked if they should use identical code for their hero slider.
button.slick-prev.slick-arrow, .slick-next {
display: none !important;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
thank you ! @oscprofessional how do i remove the dots as well ?
also the play sign how to remove from bottom. ? @oscprofessional
ul.slick-dots {
display: none !important;
}
@oscprofessional i only want pictures to show no navigation
button.hero__pause {
display: none;
}
thank you so much ! @oscprofessional
@oscprofessional do you know how to add a smooth transition to hero slideshow ? what can i add @oscprofessional
.slick-track {
transition: transform 2000ms ease 0s !important;
}
