Remove arrows & pause and play button mobile & desktop remove counter on mobile

[jakethagun]

Hello i have a 2 part question. 

- On desktop and mobile I want to remove the pause and play button and just keep the dots.

- On mobile I want to remove the counter for collections too. 

- Bonus points to change the dots to white.

 

  

[Huptech-Web]

Good day, @jakethagun , Could you kindly provide me with the link to your store?

[jakethagun]

https://7e769e-70.myshopify.com/

Password: jake 

Thanks!

[Huptech-Web]

Hello @jakethagun, To accomplish this, you can easily uncheck the checkbox as depicted in the screenshot, or you can achieve the same result by adding a small snippet of code in the custom.css file.

.slideshow__controls .slider-button {
    display: none !important;
}
.slideshow__controls  .slideshow__autoplay.slider-button {
    display: none !important;
}
.slideshow__controls .slider-counter__link--active.slider-counter__link--dots .dot {
    background-color: grey;  /* you can change the color of dots to white */
}

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[jakethagun]

I want to keep the slides auto rotating though. I just wanted to remove the visuals besides the dots. Thank you though it removed the arrows etc and I changed it to white.

Any idea how to get rid of the collection counter/arrows on mobile? 

[Rahul_dhiman · Accepted solution]

Hello @jakethagun 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-slideshow.css
add this code at the end of the file

@media screen and (min-width: 750px) {
.slideshow__autoplay.slider-button {
display: none !important;
}
}
@media screen and (max-width: 749px) {
slideshow-component.page-width .slideshow__autoplay {
display: none !important;
}
}
.slider-counter__link--active.slider-counter__link--dots .dot {
background-color: white !important;
}
.slider-counter.caption {
display: none !important;
}
.slider-button {
display: none !important;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[jakethagun]

You are the best thank you!

[Rahul_dhiman]

Thanks.... always there to help you.
Please hit the like button also.