how to remove the arrows and play button but keep the dots

[Lamyglam]

hello, my site is Lamyglam.Com. does anyone know how I can remove the arrows and play button but keep the dots? Also tried to change the dots colours to white, but they all changed white can I make it so that it shines white only if its in the shown picture. When it is not I want it to be transparent with only the outer circle.

[KabirDev · Accepted solution]

Hi @Lamyglam, add the below code to your theme's CSS file.

.slideshow__autoplay .icon.icon-play, .slideshow__autoplay .icon.icon-pause, .slider-button {
    display: none !important;
}
button.slider-counter__link.slider-counter__link--dots.link .dot {
    background: transparent !important;
}
button.slider-counter__link.slider-counter__link--dots.link.slider-counter__link--active .dot {
    background: #fff !important;
}

[Made4uo-Ribe · Accepted solution]

Hi @Lamyglam 

Do you mean like this? 

if it is, check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
button.slideshow__autoplay, .slider-button {
    display: none !important;
}
@media screen and (min-width: 750px) {
.slider-counter .slider-counter__link--dots .dot {
    background-color: transparent !important;
}
}
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    border: none !important;
}
</style>

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[KabirDev · Accepted solution]

Hi @Lamyglam, add the below code to your theme's CSS file.

.slideshow__autoplay .icon.icon-play, .slideshow__autoplay .icon.icon-pause, .slider-button {
    display: none !important;
}
button.slider-counter__link.slider-counter__link--dots.link .dot {
    background: transparent !important;
}
button.slider-counter__link.slider-counter__link--dots.link.slider-counter__link--active .dot {
    background: #fff !important;
}

[Lamyglam]

thank you so much, it works!!!!  do you know if there is a possibility to make those edges where the dots are between them disappear?

[KabirDev · Accepted solution]

Sure, add the code below.

.slideshow__controls {
    border: 0 !important;
}

[Lamyglam]

perfect thank you so much

[Made4uo-Ribe · Accepted solution]

Hi @Lamyglam 

Do you mean like this? 

if it is, check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
button.slideshow__autoplay, .slider-button {
    display: none !important;
}
@media screen and (min-width: 750px) {
.slider-counter .slider-counter__link--dots .dot {
    background-color: transparent !important;
}
}
.slideshow__controls.slideshow__controls--top.slider-buttons.no-js-hidden {
    border: none !important;
}
</style>

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Lamyglam]

thank you so much!!!