https://www.openpolytechnic.ac.nz/_resources/themes/openpolytechnic/javascript/story-slice.js?m=1790186485

1// also used for other carousels formed in the same way - i.e. kicks in on "mobile" - like the story page image gallery
2
3(function($){
4	$(document).ready(function() {
5		var container = $('.story-slice-container, .image-gallery');
6		container.each(function () {
7			var sliceElem = $(this);
8			if (sliceElem.hasClass('story-slice-container')) {
9				$(this).find('.cell.story-block').each(function () {
10					// copies the story block to add to carousel holder
11					var item = $(this).clone();
12					// looks for a "mobile" version of the image and, if there is one, replaces the "desktop" one
13					var mo = item.find('.media-object');
14					if (mo.data('mobile-image')) {
15						var altImg = 'url(' + mo.data('mobile-image') + ')';
16						var altMo = mo.css({backgroundImage: altImg});
17						altMo.removeAttr('data-mobile-image');
18						mo.remove();
19						altMo.appendTo(item.children('a'));
20					}
21					// item.find('.sb02').addClass('sb01').removeClass('sb02');
22					// item.find('.sb03').addClass('sb01').removeClass('sb03');
23
24					//  creates new story block item for carousel
25					sliceElem.find('.story-carousel .slides').append('<li class="owl-item story-block">' + item.html() + '</li>');
26				});
27			}
28			else if (sliceElem.hasClass('image-gallery')) {
29				$(this).find('img').each(function() {
30					var item = $(this).clone();
31					$('<li/>',{
32						'class': 'owl-item image-block',
33						html: item
34					}).appendTo(sliceElem.find('.image-gallery-carousel .slides'));
35				});
36			}
37
38			var owlCarousel2 = sliceElem.find('.owl-carousel');
39
40			owlCarousel2.on('initialized.owl.carousel', function(e) {
41				// var owlCarousel2Item = $('.owl-item');
42				storyslice_owlItemMakeInactive();
43				storyslice_owlItemMakeActive();
44			});
45
46			// after the carousel's been changed, adjust items' attributes
47			owlCarousel2.on('translated.owl.carousel', function(e){
48				storyslice_owlItemMakeInactive();
49				storyslice_owlItemMakeActive();
50			});
51
52			var dots;
53			if (sliceElem.hasClass('image-gallery')) {
54				dots = false;
55			}
56			else {
57				dots = true;
58			}
59			// initialize the owl carousel
60			owlCarousel2.owlCarousel({
61				loop: true,
62				dots: dots,
63				nav: true,
64				responsiveClass: true,
65				items: 1,
66				autoWidth: false,
67				margin: 0,
68				navText: [
69					'<div class="svg-icon svg-icon-slider-chevron-left"><svg><title>Previous</title><use xlink:href="_resources/themes/openpolytechnic/images/svg/op-sprite.svg#slider-chevron-left"></use></svg></div>',
70					'<div class="svg-icon svg-icon-slider-chevron-right"><svg><title>Next</title><use xlink:href="_resources/themes/openpolytechnic/images/svg/op-sprite.svg#slider-chevron-right"></use></svg></div>'
71				]
72				// responsive: {
73				// 	0: {
74				// 		autoWidth: false,
75				// 		margin: 0,
76				// 		items: 1
77				// 	},
78				// 	481: {
79				// 		autoWidth: true,
80				// 		margin: 20,
81				// 		items: 3
82				// 	}
83				// }
84			});
85
86			// listen for keyboard input
87            $(document).on('keydown', function(e){
88				var focusedElement = $(document.activeElement);
89				// only activate arrow keys if carousel is focused
90				if (focusedElement.parents('.owl-carousel').length) {
91					owlCarousel2.keyup(function (event) {
92						// handle cursor keys
93						if (event.keyCode == 37) {
94							// go left
95							owlCarousel2.trigger('prev.owl.carousel');
96						} else if (event.keyCode == 39) {
97							// go right
98							owlCarousel2.trigger('next.owl.carousel');
99						}
100					});
101				}
102			});
103		});
104	});
105	/* Changing owl item attributes
106	 * set the item itself and its children to be non-tabable when inactive
107	 * reverse when activated
108	 */
109	function storyslice_owlItemMakeInactive(){
110		$('.owl-carousel .owl-item:not(.active)').attr('role', 'option').attr('tabindex', '-1').attr('aria-selected', 'false').find('a').attr('tabindex', '-1');
111	}
112	function storyslice_owlItemMakeActive(){
113		$('.owl-carousel .owl-item.active').attr('role', 'option').attr('aria-selected', 'true').find('a').attr('tabindex', '0');
114	}
115})(jQuery);