Image Carousel on Product page (main product image)

[Ray UK]

Hi,

I am attempting to turn the static "main" image on the product page into a carousel by using the slick slider plugin.

I have managed to get all the images for the selected variant and the slider will work on page load.

This is the main image sliding to the left without user interaction.

 

Now the problem I am facing is that when the user selects a different variant/colour, the image list is re-populated and thats when my carousel stops working.

Does anybody know of a tutorial to accomplish this.

Thanks in advance

[elementChaosu]

Hello, I don't know tutorial. But there must be some javascript action (ajax propably) which exchanges images. And this action reloads the whole content of image container and at the same time destroys previously loaded slick carousel.
So the solution could be to set an event listener on that action (ajaxComplete eg.), that checks whether new content is loaded and fires function initising slick carousel on that container once again.
Hope that helps.

Edited January 25 by elementChaosu (see edit history)

[Prestashop Addict]

Il y a 21 heures, MerseyRay a dit :

Now the problem I am facing is that when the user selects a different variant/colour, the image list is re-populated and thats when my carousel stops working.

Does anybody know of a tutorial to accomplish this.

Thanks in advance

See slick documentation, you need to init slider again

[Ray UK]

Hi, thanks for the advice.

I gathered it would be something along those lines, however..im useless at jquery

Here is what im currently trying, but its not working

$('.images-container').addEventListener("onload", makeslider);

function makeslider() {
	$('.prod-thumb-carousel').slick({
		useCSS: false,
		infinite: true,
		arrows: false,
		speed: 200,
		autoplay: true,
		slidesToShow: 1,
		cssEase: 'ease',
		slidesToScroll: 1,
		lazyLoad: 'progressive'
	});
}

it was originally this

$(document).ready(function () {
  $('.prod-thumb-carousel').slick({

which works on page load only.

 

[Ray UK]

ok so I have managed to get this working, but i think something may be wrong somewhere.

When the page loads and it initialises the slick slider, you see the other images below the main image for a fraction of a second.. This is also causing the screen to flicker ( only noticable on mobile) when changing variants.

Im not sure if this is the right way to do the jquery listeners etc.

/* SLICK-SLIDE FOR Prod Carousels */
$(document).ready(function(){
  // call the function on page load
  makeslider();
});

$('.page-content').on('DOMSubtreeModified', function(){
    // call the function on variant change
  makeslider();
});

function makeslider() {

	$('.prod-thumb-carousel').slick({
		useCSS: false,
		infinite: true,
		arrows: true,
		speed: 200,
		autoplay: true,
		slidesToShow: 1,
		cssEase: 'ease',
		slidesToScroll: 1,
		lazyLoad: 'progressive'
	});
}

Any help appreciated

You can see the flicker on this page when changing colours (noticable on a mobile device).

https://www.northwestecigs.uk/pen-style-kits/146-621-pockex-aio-kit.html#/126-colour-red_gradient

You can see the slider working here.

https://www.northwestecigs.uk/refillable-pods/460-1229-aspire-gotek-x-replacement-pods-2pk.html

Edited January 27 by MerseyRay (see edit history)

[Ray UK]

Hi,

So whilst it is somewhat working, it seems that the code

DOMSubtreeModified

is not ideal for this because every time the slider moves, the content is changing and initialising the slick again so its throwing up lots of errors such as this

Uncaught TypeError: e.$slides is null

What would be the best on function to use instead of "DOMSubtreeModified"

Thanks

[Ray UK]

On 1/25/2024 at 8:58 PM, elementChaosu said:

So the solution could be to set an event listener on that action (ajaxComplete eg.), that checks whether new content is loaded and fires function initising slick carousel on that container once again.

@elementChaosu, I dont suppose you would know how to add that listener on the ajaComplete action?  As you can see above, I have somewhat got it working but its throwing up errors because of my attempt at jquery. 

Thanks

[Prestashop Addict]

Le 26/01/2024 à 7:50 PM, MerseyRay a dit :

Hi, thanks for the advice.

I gathered it would be something along those lines, however..im useless at jquery

Here is what im currently trying, but its not working

$('.images-container').addEventListener("onload", makeslider);

function makeslider() {
	$('.prod-thumb-carousel').slick({
		useCSS: false,
		infinite: true,
		arrows: false,
		speed: 200,
		autoplay: true,
		slidesToShow: 1,
		cssEase: 'ease',
		slidesToScroll: 1,
		lazyLoad: 'progressive'
	});
}

it was originally this

$(document).ready(function () {
  $('.prod-thumb-carousel').slick({

which works on page load only.

 

You have to bind the prestashop update product event to reinit the slider

[Ray UK]

1 hour ago, Prestashop Addict said:

You have to bind the prestashop update product event to reinit the slider

Hi PSAddict,

I think I have it sorted now. Im a novice at jquery code but with the help of google I seem to have it working as can be seen working on this link.

https://www.northwestecigs.uk/pod-style-kits/459-1227-aspire-flexus-q-kit.html

I done it by using this code

$( document ).on( "ajaxComplete", function() {

Thanks

[Prestashop Addict]

Hum, this is ja jquery support not PS 😞 Search for  js code based on

prestashop.on('updatedProduct', function (event) {

}