Vertical Thumbnail Carousel Sizing & Tweaks

[sammybrichard]

Hey, I'm trying to implement a vertical thumbnail carousel on my product pages using the shopify dawn theme. 

I have implemented the following code on my base.css file to move the thumbnail carousel to the left hand side:

/* Change thumbnail on product page to side*/

@media (min-width: 1024px) {
	 .product--thumbnail_slider {
		 position: relative;
	}
	 .product--thumbnail_slider media-gallery {
		 display: flex;
		 flex-direction: row-reverse;
	}
	 .product--thumbnail_slider .slider-mobile-gutter:not(.thumbnail-slider) {
		 width: calc(100% - 100px);
	}
	 .product--thumbnail_slider .thumbnail-slider {
		 width: 100px;
		 padding-right: 10px;
         align-items: flex-start
	}
	 .product--thumbnail_slider .slider-button {
		 display: none !important;
	}
	 .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up {
		 padding: 0;
		 display: block;
	}
	 .product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
		 width: 100%;
	}
}

This was successful however there are two things I want to fix:

1. Carousel should cut off and be scrollable at the height of the main product image

2. Main product image should have left / right options to scroll between.

My store is suaveanddebonair.com, you can see what I mean in the attached screenshot.

[ShraddhaLath]

did you find any solution ?

[MRamzan]

Quick solution to display thumbnail images vertically: