Make the Carousel Vertical

Hi there, is it possible for me to make the carousel vertical and displayed to the left of main image?
I am using the defaultClean theme with some modifications.

Hello,

Yes, the Cloud Zoom plugin features such an option. You will have to go to Configuration-> Settings -> All settings (advanced) and add setting with the name cloudzoomsettings.ispicturethumbnailscarouselvertical-defaultclean and with value true. Now you just have to add styling to the holder of the carousel.

If you want to enable the carousel to be vertical only on desktop devices you have to change one setting in the same place. Use the search to find the cloudzoomsettings.defaultresponsivebreakpointsforthumbnailscarousel and change is value to:
[{"breakpoint":1001,"settings":{"arrows":false,"dots":true,"vertical":false}},{"breakpoint":600,"settings":{"slidesToShow":4,"slidesToScroll":4,"arrows":false,"dots":true,"vertical":false}},{"breakpoint":400,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":false,"dots":true,"vertical":false}}]

I hope I was useful.

Thank´s for your reply, It´s working well.

How can I change the number of products displayed in the carousel, It´s set to 5 products now but I would like it to be only 3?

I have managed to make the slides to show only 3 thumbnails by changing the setting: cloudzoomsettings.defaultresponsivebreakpointsforthumbnailscarousel to [{"breakpoint":1920,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":600,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":400,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}}]
This works but I wonder if it could not be done better?

Anyhow, for some reason my thumbnails appear to small in my carousel, if there are only 2 pictures the thumbnails show fine (70px width and height) but if there are more pictures the thumbnails in the carousel are only 30px and there seems to be a script that sets that size and I can´t figure out where to change it, any help with this?

I fixed the thumbnail size in the carousel (just a css issue) but I can´t help to think that my code for the number of products shown in the cqarousel should be better, It´s now like this:

[{"breakpoint":3840,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":1024,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":600,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}},{"breakpoint":400,"settings":{"slidesToShow":3,"slidesToScroll":3,"arrows":true,"dots":false}}]

Hello,

The setting you have changed is usually intended to work on mobile resolutions and that is why it is called defaultresponsivebreakpointsforthumbnailscarousel. You have set a breakpoint of 3840px, which is basically including all desktop resolutions, so any code you have added in this breakpoint will work on desktop resolutions. This is not the way this setting is intended to work but I don't think that there will be a problem if you leave it as it is. If you want to set the number visible items and number of items to scroll the way we intended it to work, however, you will just have to add two more settings just as the one that you added for the vertical carousel.
Just go to Configuration-> Settings -> All settings (advanced) and add the folowing settings:
cloudzoomsettings.numberofpicturethumbnailsincarousel-defaultclean
cloudzoomsettings.numberofscrollablepicturethumbnailsincarousel-defaultclean

Now if you add a value of 3 to both settings you can get rid of the 3840 breakpoint in the responsive object.

Thank you Nikola, I will add the settings and change the responsive settings, this is very much appreciated.