https://stecter.ru/bitrix/templates/dresscodeV2/components/dressco…/detail/js/morePicturesCarousel.js

1var startMorePicturesElementCarousel;
2
3$(function () {
4	startMorePicturesElementCarousel = function () {
5		//kill last binds
6		$(document).off("changeSlide", "#moreImagesCarousel", changeSlideControl);
7		$(document).off("click", "#moreImagesRightButton", rightMoveCarousel);
8		$(document).off("click", "#moreImagesLeftButton", leftMoveCarousel);
9
10		//settings
11		var maxVisibleElements = 5;
12		var windowWidth = $(window).innerWidth();
13		var resizeVisibleElements = {
14			4096: 5,
15			1366: 4
16		};
17
18		$.each(resizeVisibleElements, function (resolution, visibleElements) {
19			if (windowWidth <= resolution) {
20				maxVisibleElements = visibleElements;
21				return false;
22			}
23		});
24
25		var $moreImagesCarousel = $("#moreImagesCarousel").addClass("show");
26		var $moreImagesSlideBox = $moreImagesCarousel.find(".slideBox");
27		var $moreImagesItems = $moreImagesSlideBox.find(".item");
28
29		var elementsCount = $moreImagesItems.length;
30		var maxPosition = $moreImagesItems.length - maxVisibleElements;
31		var currentPosition = 0;
32		var startPosition = 0;
33
34		$moreImagesItems.eq(0).addClass("selected").find("a").addClass("zoom");
35
36		if (elementsCount <= maxVisibleElements) {
37			$("#moreImagesRightButton, #moreImagesLeftButton").hide();
38			startPosition = (100 / maxVisibleElements) * ((maxVisibleElements - elementsCount) / 2);
39		} else {
40			$("#moreImagesRightButton, #moreImagesLeftButton").show();
41		}
42
43		$moreImagesSlideBox.css({
44			width: elementsCount * 100 + "%",
45			left: startPosition + "%"
46		});
47
48		$moreImagesItems.css({
49			width: 100 / elementsCount / maxVisibleElements + "%"
50		});
51
52		var carouselMoving = function (to) {
53			if (elementsCount > maxVisibleElements) {
54				$moreImagesSlideBox.finish().animate(
55					{
56						left: "-" + (100 / maxVisibleElements) * to + "%"
57					},
58					200
59				);
60			}
61		};
62
63		var leftMoveCarousel = function (event) {
64			if (--currentPosition < 0) {
65				currentPosition = maxPosition;
66			}
67			return event.preventDefault(carouselMoving(currentPosition));
68		};
69
70		var rightMoveCarousel = function (event) {
71			if (++currentPosition > maxPosition) {
72				currentPosition = 0;
73			}
74			return event.preventDefault(carouselMoving(currentPosition));
75		};
76
77		var changeSlideControl = function (event, position) {
78			if (typeof position != "undefined" && elementsCount > maxVisibleElements) {
79				if (position >= maxVisibleElements) {
80					currentPosition = position + 1 - maxVisibleElements;
81				} else {
82					currentPosition = 0;
83				}
84
85				carouselMoving(currentPosition);
86			}
87		};
88
89		//binds
90		$(document).on("click", "#moreImagesRightButton", rightMoveCarousel);
91		$(document).on("click", "#moreImagesLeftButton", leftMoveCarousel);
92
93		//event
94		$(document).on("changeSlide", "#moreImagesCarousel", changeSlideControl);
95	};
96
97	//resize control
98	$(window).on("resize", function () {
99		startMorePicturesElementCarousel();
100	});
101
102	startMorePicturesElementCarousel();
103});