Replace the previous and next slider buttons with text

Antoine.dvc

Hello,

Is it possible to replace the previous and next buttons of the slider with text? (write with the typography of the site "previous" on the left, "next" on the right.)

Thank you very much!

Richard

Dear @Antoine-dvc

Not with standard options and will need to be custom coded by you - but I can set you in the right direction 🌝

https://laytheme.com/documentation/custom-javascript.html

https://laytheme.com/documentation/custom-css-styling.html

https://stackoverflow.com/questions/1309452/how-to-replace-innerhtml-of-a-div-using-jquery

The following jQuery will target the classes next & previous relating to the Carousel ( you probably should specify which next and previous if there are multiple on your website) And change the inner HTML ( an image ) to some Text.

jQuery('.next').html('next');

jQuery('.previous').html('Previous');

Screen Shot 2022-01-25 at 9.15.45 AM.png

You will also need to define some CSS for your text to match the design of your website:

.next{
    font-family: georgia,palatino,serif;;
    font-size:35px;
}

Screen Shot 2022-01-25 at 9.18.23 AM.png

Hope this helps & best wishes

Richard

Antoine.dvc

@Richard said in Replace the previous and next slider buttons with text:

And change the inner HTML ( an image ) to some Text.

Hi Richard, Thanks for your feedback.

I understand pretty much, however how can I change the inner HTML ( an image ) to some Text ? I managed in the google chrome console to make "previous" appear by including this line "<button class="flickity-prev-next-button previous" type="button">previous</button>" however I can't seem to do it in the laytheme.

Here'is a screenshot
Thanks a lot,

Capture d’écran 2022-01-25 à 10.32.30.png

Richard

Dear @Antoine-dvc

As a first test wrap the code into a 'newpage event" within your Custom <head> Content:

https://laytheme.com/documentation/custom-javascript.html

<script>
window.laytheme.on("newpageshown", function(){

// insert your desired code here

});
</script>

Lay Theme Forum

Replace the previous and next slider buttons with text

Dear @Antoine-dvc

Hope this helps & best wishes

Richard

Dear @Antoine-dvc

Best

Richard

Before you post:

When you post:

Online Users