https://www.nakheel.com/ResourcePackages/NakheelComponents/assets/…?package=NakheelComponents

1(function ($) { //an IIFE so safely alias jQuery to $
2    $.HomeVideoBanner = function (element) {
3
4        //stores the passed element as a property of the created instance.
5
6        if (element instanceof $) {
7            this.element = element
8        } else {
9            this.element = $(element);
10            this.elementSelector = element;
11        }
12
13        this.VideoIndex = 0;
14        this.TotalVideos = this.element.find("video").length - 1;
15    };
16
17    //assigning an object literal to the prototype is a shorter syntax
18    //than assigning one property at a time
19    $.HomeVideoBanner.prototype = {
20        Init: function () {
21            
22            if (this.element.length == 0) { return }
23            var swiper = new Swiper(this.elementSelector, $.HomeVideoBanner.defaultOptions);
24            
25            var that = this;
26            swiper.on('slideChange', function () {
27                that.NextSlide();
28            });
29            
30            var video = document.getElementById("video-" + this.VideoIndex);
31            this.ChangeVideo(video, swiper);
32
33            this.element.find(".swiper-pagination-bullet").on("click", function () {
34                var currentClickIndex = $(this).index();
35                that.InitVideo(swiper, currentClickIndex);
36            });
37
38            $(".banner-description").find(".title").on("click", function () {
39                var currentClickIndex = $(this).parent().index();
40                that.element.find(".swiper-pagination-bullet").eq(currentClickIndex).trigger('click');
41            });
42
43        },
44        InitVideo: function (swiper, videoStartIndex) {
45
46            this.VideoIndex = videoStartIndex;
47
48            this.element.find('video').off('ended');
49            
50            var currentVideo = document.getElementById("video-" + this.element[0].swiper.activeIndex);
51            currentVideo.pause();
52            currentVideo.currentTime = 0;
53
54            var video = document.getElementById("video-" + this.VideoIndex);
55            if (video && video.paused) {
56                video.play();
57                this.ChangeVideo(video, swiper);
58            }            
59        },
60        NextSlide: function () {
61            $('.box-outer .box').removeClass('active');
62            $('.box-outer .box').eq(this.VideoIndex == -1 ? 0 : this.VideoIndex).addClass('active');
63        },
64        ChangeVideo: function (video, swiper) {
65            var that = this;
66            video.onended = function () {
67                
68                var isNextSlide = true;
69                if (that.VideoIndex == that.TotalVideos) {
70                    that.VideoIndex = -1;
71
72                    swiper.slideTo(0, 1000);
73                    isNextSlide = false;
74                }
75
76                that.VideoIndex = that.VideoIndex + 1;
77                if (isNextSlide) {
78                    swiper.slideNext();
79                }
80                video = document.getElementById("video-" + that.VideoIndex);
81                if (video && video.paused) {
82                    video.play();
83                }
84
85                that.ChangeVideo(video, swiper);
86            };
87        }
88
89    };
90
91    $.HomeVideoBanner.defaultOptions = {
92        //autoplay: {
93        //    delay: 5000,
94        //    disableOnInteraction: false
95        //},
96        autoplay: false,
97        // effect: "fade",
98        speed: 1000,
99        loop: false,
100        pagination: {
101            el: ".swiper-pagination",
102            clickable: true
103        }
104    };
105
106}(jQuery));
107
108var homeVideoBanner = new $.HomeVideoBanner(".swiper-container");
109homeVideoBanner.Init();
110
111