Shopify themes, liquid, logos, and UX
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.
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>'
});
@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: '<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>'
});
@Grace_01 Replace this slick slider code with your existing slick slider code.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024