Cacher is the code snippet organizer for pro developers

.main-image-nav--btn {
	position: absolute;
	border: 1px solid #e2e2e2;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 60px;
	width: 35px;
	font-size: 2rem;
	line-height: 4rem;
	text-align: center;
	color: #9e9e9e;
	cursor: pointer;
}
#js-main-left {
	left:0;
}
#js-main-next {
	right:0;
}
#js-main-dots ul {
	margin-top: 1rem;
	padding-left:0;
}
#js-main-dots ul li {
	height: 15px;
	width: 15px;
	border-radius: 50px;
	background: #ececec;
	display: inline-block;
	margin-right:0;
	margin-left: 1.50rem;
	cursor: pointer;
}
#js-main-dots ul li.active {
	background: #262626;
}
#js-main-dots ul li:first-child {
	margin-left: 0;
}

// --- Mobile slider for Images --- //
		function mobileImageSlider() {
			var totalThumbs = parseFloat($('#js-thumbnails .thumb-img').length - 1 ),
				currentImg = parseFloat($('#js-main-image-zoom').attr('data-index'));

				if (totalThumbs == 0 ) {
					$('.main-image-nav').hide();
				} else {
					$('#js-main-dots').html('');
					$('#js-main-dots').html('<ul class="inline-list"></ul>');
					for (var i = totalThumbs; i >= 0; i--) {
						if (i > 0){
							$('#js-main-dots ul').prepend('<li data-index="' + i + '"></li>');
						} else {
							$('#js-main-dots ul').prepend('<li class="active" data-index="' + i + '"></li>');
						}
					};
				}

			$('#js-main-prev').on('click', function() {
				$('#js-main-dots ul li.active').removeClass('active');
				if (currentImg == 0) {
					$('#js-thumbnails .thumb-img[data-index="'+ totalThumbs +'"').click();
					$('#js-main-dots ul li[data-index="'+ totalThumbs +'"').addClass('active');
					currentImg = totalThumbs;
				} else {
					var prevThumb = parseFloat(currentImg - 1);
					$('#js-thumbnails .thumb-img[data-index="' + prevThumb + '"').click();
					$('#js-main-dots ul li[data-index="' + prevThumb + '"').addClass('active');
					currentImg = prevThumb;
				}
			});

			$('#js-main-next').on('click', function() {
				$('#js-main-dots ul li.active').removeClass('active');
				if (currentImg == totalThumbs) {
					$('#js-thumbnails .thumb-img[data-index="0"').click();
					$('#js-main-dots ul li[data-index="0"]').addClass('active');
					currentImg = 0;
				} else {
					var nextThumb = parseFloat(currentImg + 1);
					$('#js-thumbnails .thumb-img[data-index="' + nextThumb + '"').click();
					$('#js-main-dots ul li[data-index="' + nextThumb + '"').addClass('active');
					currentImg = nextThumb;
				}
			});

			$('#js-main-dots ul li').on('click', function() {
				var clickedLI = parseFloat($(this).attr('data-index'));
				$('#js-thumbnails .thumb-img[data-index="' + clickedLI + '"').click();
				$('#js-main-dots ul li.active').removeClass('active');
				$(this).addClass('active');
				currentImg = clickedLI;
			});
		}
		mobileImageSlider();