Slick Slider on Brooklyn theme

Grace_01
Explorer
55 2 8

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=42587b8467d4fde...

 

0 Likes

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: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>'
});

 

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
0 Likes
Grace_01
Explorer
55 2 8

@Ajay_kumar_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: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>'
});

 

0 Likes

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

Expert Shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- kmajay8888@gmail.com | Skype :- kmajay888
0 Likes