https://visibility.sk/wp-content/themes/visibility/js/visibility-carousel.js?v=4.8

1/**
2 * Settings for Visibility carousel
3 * Is suitable if the carousel starts in an unusual position.
4 *
5 * Container class: visi-carousel
6 * Item class: visi-item
7 * Item data attribute: visi-item-$visiIncrement (start from 1)
8 *
9 * Dots container class: visi-carousel-dots
10 * Dot class: visi-dot
11 *
12 */
13
14/**
15 * All settings for custom owl dots
16 */
17$(function () {
18    setTimeout(function () {
19        $allPageVisiCarousels = $('.visi-carousel');
20        $allStartPosition = [];
21        $activeItemsAfterLoad = [];
22
23        $allPageVisiCarousels.each(function () {
24            var currentCarousel = $(this);
25            currentCarousel.addClass('dragscroll');
26
27            // Save start position of all carousels
28            var startPosition = parseInt($(this).find('.visi-item:first-child').css('left').replace('px', ''));
29            $allStartPosition.push(startPosition);
30
31            // Save active items of all carousels
32            $activeItemsAfterLoad.push(checkVisibleItem($(this)));
33
34            // Set active class for item by carousel
35            checkVisibleItem($(this));
36            setCarouselBtns($(this));
37        });
38    }, 200);
39
40    // Set custom carousel dots (after load page)
41    setTimeout(function () {
42        var index = 0;
43        $allPageVisiCarousels.each(function () {
44            setCustomCarouselDots($(this), index);
45            index++;
46        });
47    }, 300)
48
49	/**
50	 * Post carousel - single services
51	 * @param windowWidth
52	 */
53	const $servicesCarousel = $('.services-magazine-carousel');
54	$servicesCarousel.owlCarousel({
55		items: 1,
56		loop: false,
57		dots: true,
58		margin: 40,
59		stagePadding: 20,
60		responsive: {
61			0: {
62				items: 1,
63				margin: 20
64			},
65			520: {
66				items: 2
67			},
68			767: {
69				items: 3,
70				startPosition: 2
71			}
72		}
73	});
74
75	$('.arrows-magazine-carousel .next-item').click(function() {
76		$servicesCarousel.trigger('next.owl.carousel');
77	});
78	$('.arrows-magazine-carousel .prev-item').click(function() {
79		$servicesCarousel.trigger('prev.owl.carousel');
80	});
81});
82
83
84/**
85 * Check visible item and set active class
86 */
87function checkVisibleItem($obj) {
88    var windowWidth = $(window).width(); // window width
89    var item = $obj.find('.visi-item'); // get all item of carousel
90
91    item.each(function () {
92        var width = $(this).width(); // width of item
93        var leftPosition = $(this).offset().left; // left position of item
94        var fullPosition = width + leftPosition; // left position of item with its width
95
96        // If the item is within the screen add .active else remove .active
97        if (fullPosition <= (windowWidth + 20) && leftPosition >= 0) {
98            $(this).addClass('active');
99        } else {
100            $(this).removeClass('active');
101        }
102    });
103
104    // return count of current active items
105    return $obj.find('.visi-item.active').length;
106}
107
108
109/**
110 * Set custom carousel dots
111 *
112 * @param $obj
113 * @param $index
114 */
115function setCustomCarouselDots($obj, $index) {
116    var allItemsCount = $obj.find('.visi-item').length; // count of all items
117    var visibleItems = checkVisibleItem($obj); // count of visible items (have a .active class)
118    if (visibleItems === 0) {
119        visibleItems = 1;
120    }
121    var dotsCount = allItemsCount / visibleItems; // count of dots
122    var dotsCountDivision = allItemsCount % visibleItems; // division difference
123
124    // if the result is not an integer add +1 (add one dot)
125    if (dotsCountDivision != 0) {
126        dotsCount += 1;
127    }
128
129    if (dotsCount > 1) {
130        // Carousel dots structure

131        var container = $('<div class="visi-carousel-dots" data-index="' + $index + '" />');
132        for (var i = 1; i <= dotsCount; i++) {
133            var className = '';
134            if (i === 1) {
135                className = 'active';
136            }
137            container.append('<div onclick="clickOnDot($(this))" data-dot=' + i + ' class="visi-dot ' + className + '"><span></span></div>');
138        }
139        container.insertAfter($obj);
140    }
141}
142
143/**
144 * Click event
145 * Click event at custom dots
146 *
147 * @param $t
148 */
149function clickOnDot($t) {
150    var parent = $t.parent();
151    var parentCarousel = $t.parent().parent().find('.visi-carousel');
152    var index = parent.data('index');
153
154    //Remove .active from all dots
155    parent.find('.visi-dot').each(function () {
156        $(this).removeClass('active');
157    });
158
159    //Set .active to clicked dot
160    $t.addClass('active');
161    moveCarousel($t, parentCarousel, index);
162}
163
164
165/**
166 * Set carousel buttons
167 *
168 * @param $obj
169 */
170function setCarouselBtns($obj) {
171
172    var preVArrow = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">\n' +
173        '    <path id="link-spat" d="M34,19l-2.644-2.644L20.875,26.819V4h-3.75V26.819L6.663,16.338,4,19,19,34Z"\n' +
174        '          transform="translate(34 -4) rotate(90)" fill="#141313"/>\n' +
175        '</svg>';
176    var nextArrow = '<svg xmlns="http://www.w3.org/2000/svg" width="69.333" height="69.333"\n' +
177        '     viewBox="0 0 69.333 69.333">\n' +
178        '    <path id="Path_2" data-name="Path 2"\n' +
179        '          d="M73.333,38.667l-6.11-6.11L43,56.737V4H34.333V56.737L10.153,32.513,4,38.667,38.667,73.333Z"\n' +
180        '          transform="translate(-4 73.333) rotate(-90)" fill="#141313"/>\n' +
181        '</svg>';
182    var arrows = $('<div class="prev-item btn" onclick="clickOnBtn($(this))">' + preVArrow + '</div><div class="next-item btn" onclick="clickOnBtn($(this))">' + nextArrow + '</div>');
183
184    var allItemsCount = $obj.find('.visi-item').length; // count of all items
185    var visibleItems = checkVisibleItem($obj); // count of visible items (have a .active class)
186    if (visibleItems === 0) {
187        visibleItems = 1;
188    }
189    var dotsCount = allItemsCount / visibleItems; // count of dots
190    var dotsCountDivision = allItemsCount % visibleItems; // division difference
191
192    // if the result is not an integer add +1 (add one dot)
193    if (dotsCountDivision != 0) {
194        dotsCount += 1;
195    }
196
197    if (dotsCount > 1) {
198        arrows.appendTo($obj);
199    }
200}
201
202function clickOnBtn($t) {
203    var parent = $t.parent();
204    var owlDots = parent.next('.visi-carousel-dots');
205
206    if ($t.hasClass('prev-item')) {
207        owlDots.children().each(function () {
208            if ($(this).hasClass('active')) {
209                $(this).prev().click();
210                return false;
211            }
212        });
213    } else if ($t.hasClass('next-item')) {
214        owlDots.children().each(function () {
215            if ($(this).hasClass('active')) {
216                $(this).next().click();
217                return false;
218            }
219        });
220    }
221}
222
223
224/**
225 * Move event
226 * Scroll items (left or right)
227 * @param $t
228 */
229function moveCarousel($t, $carouselContainer, index) {
230    var windowWidth = $(window).width(); // window width
231    var clickedDot = $t.data('dot'); // clicked dot
232    var indexOfCarousel = index;
233    var activeItemsAfterLoad = $activeItemsAfterLoad[indexOfCarousel];
234
235    if ($t.is(':last-child')) {
236        var allItems = $carouselContainer.find('.visi-item').length;
237        var count = clickedDot * activeItemsAfterLoad;
238
239        if (allItems < count) {
240            var difference = count - allItems;
241            var lastVisibleItemId = clickedDot * activeItemsAfterLoad - difference;
242        } else {
243            var lastVisibleItemId = clickedDot * activeItemsAfterLoad;
244        }
245    } else if ($t.is(':first-child')) {
246        var start = $allStartPosition[indexOfCarousel];
247    } else {
248        var lastVisibleItemId = clickedDot * activeItemsAfterLoad;
249    }
250
251    var items = $carouselContainer.find('.visi-item');
252
253    if ($t.is(':first-child')) {
254        items.each(function () {
255            $(this).animate({
256                left: start
257            }, 1000, function () {
258                checkVisibleItem($carouselContainer);
259            });
260        });
261    } else {
262        var lastVisibileItem = $carouselContainer.find('.visi-item-' + lastVisibleItemId);
263        var lastItemPosition = lastVisibileItem.position().left + lastVisibileItem.outerWidth();
264        items.each(function () {
265            var leftPosition = windowWidth - lastItemPosition;
266            var left = parseInt($(this).css('left').replace('px', ''));
267            var finalPosition = leftPosition + left;
268
269            $(this).animate({
270                left: finalPosition
271            }, 1000, function () {
272                checkVisibleItem($carouselContainer);
273            });
274        });
275    }
276}
277
278/**
279 * Drag&Scroll Options
280 */
281$(function () {
282    var clickIsValid = true;

283    var delay = 100;
284    var wasPressed = false;
285
286    var dontClick = function () {
287        clickIsValid = false;
288    }
289
290    $('.visi-carousel').mousedown(function () {
291        cancelClick = setTimeout(dontClick, delay);
292    });
293
294    $('.visi-carousel').mouseup(function () {
295        clearTimeout(cancelClick);
296        if (clickIsValid) {
297            wasPressed = false;
298        } else {
299            wasPressed = true;
300            checkVisibleItem($(this));
301        }
302        clickIsValid = true;
303    });
304
305    $('.visi-carousel .visi-item').click(function () {
306        if (wasPressed == true) {
307            event.preventDefault();
308        }
309    });
310});