How to change 'Previous & Next' into arrows on Brooklyn theme slider?

Store Design
1

Hello Community,

I have brooklyn theme and in below image I have enabled slider on product page it’s working perfect but how to change “Previous & Next” into arrow. Any help would appreciated.

https://ou9swffuy6vh1mmb-33737375879.shopifypreview.com/products_preview?preview_key=42587b8467d4fde9d4c138f0d22f743d

ASW2nkL
ASW2nkL520×760 61.5 KB

2

Hi @Grace_01

The Best way i found to do that is this. You can remove my HTML and place yours there.

Here’s an example:

$('.home-banner-slider').slick({
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 300,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: '
',
    nextArrow: '
'
});
3

@Ajay-app-dev Thanks for the reply.. could you please explain in detail.. I have added below code in theme.js document.ready but nothing changes

$('.product-single__photos').slick({
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 300,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: '
',
    nextArrow: '
'
});
4

@Grace_01 Replace this slick slider code with your existing slick slider code.