https://www.accessbankplc.com/scripts/js/slider.js

1// EXTEND jQuery
2$.js = function (el) {
3    return $('[data-js=' + el + ']')
4};
5
6/**
7*
8* @param d
9* @returns {string}
10* @private
11*/
12function _pad(d) {
13    return (d < 10) ? '0' + d.toString() : d.toString();
14}
15
16var _img;
17function isImageOk(img) {
18    _img = img.data('img');
19    if (typeof _img === 'undefined') {
20        var _img = new Image();
21        _img.src = img.attr('src');
22        img.data('img', _img);
23    }
24    if (!_img.complete) {
25        return false;
26    }
27    if (typeof _img.naturalWidth !== "undefined" && _img.naturalWidth === 0) {
28        return false;
29    }
30    return true;
31}
32var imagesToLoad = null;
33
34(function ($) {
35    $.fn.queueLoading = function () {
36        var maxLoading = 2;
37        var images = $(this);
38        if (imagesToLoad === null || imagesToLoad.length === 0) {
39            imagesToLoad = images;
40        } else {
41            imagesToLoad = imagesToLoad.add(images);
42        }
43        var imagesLoading = null;
44
45        function checkImages() {
46            imagesLoading = imagesToLoad.filter('.is-loading');
47            imagesLoading.each(function () {
48                var image = $(this);
49                if (isImageOk(image)) {
50                    image.addClass('is-loaded').removeClass('is-loading');
51                    image.trigger('loaded');
52                }
53            });
54            imagesToLoad = images.not('.is-loaded');
55            loadNextImages();
56        }
57
58        function loadNextImages() {
59            imagesLoading = imagesToLoad.filter('.is-loading');
60            var nextImages = imagesToLoad.slice(0, maxLoading - imagesLoading.length);
61            nextImages.each(function () {
62                var image = $(this);
63                if (image.hasClass('is-loading')) return;
64                image.attr('src', image.attr('data-src'));
65                image.addClass('is-loading');
66            });
67            if (imagesToLoad.length != 0) setTimeout(checkImages, 25);
68        }
69
70        checkImages();
71    };
72}(jQuery));
73
74var
75    slideshow,
76    slideshowDuration = 4000,
77    loaderAnim = true;
78
79/**
80* cities slider - prev/next
81*/
82function sliderArrows() {
83    $('.slideshow .arrows .arrow').on('click', function () {
84        TweenMax.to($('.page.is-active i.is-animating'), 1, { x: '101%' });
85        slideshowNext($(this).closest('.slideshow'), $(this).hasClass('prev'), false);
86        loaderAnim = false;
87    });
88
89    $('.slideshow').each(function () {
90        var $this = $(this);
91        var mc = new Hammer(this);
92        mc.on("swipe", function (ev) {
93            if (ev.direction === 4) {
94                slideshowNext($(ev.target).closest('.slideshow'), true, false);
95            } else if (ev.direction === 2) {
96                slideshowNext($(ev.target).closest('.slideshow'), false, false);
97            } else {
98                return false;
99            }
100        });
101    });
102}
103
104/**
105* cities slider - pages/nav
106*/
107function sliderPages() {
108    $('.slideshow .pages .page').on('click', function () {
109        TweenMax.to($('.page.is-active i.is-animating'), 1, { x: '101%' });
110        slideshowSwitch($(this).closest('.slideshow'), $(this).index(), true);
111        loaderAnim = true;
112    });
113
114    $('.slideshow .pages').on('check', function () {
115        var pages = $(this).find('.page'),
116            index = slideshow.find('.slides .is-active').index();
117        pages.removeClass('is-active');
118        pages.eq(index).addClass('is-active');
119        sliderNavloader();
120    });
121}
122
123/**
124* home slider
125*/
126function homeSlider() {
127
128    /**
129    * first call loader on slider navigation
130    */
131    sliderNavloader();
132
133    /**
134    * preload slider images
135    */
136    $('img.queue-loading').queueLoading();
137
138    $('[data-js="city-slider"]').each(function () {
139        slideshow = $(this);
140        var images = slideshow.find('.image').not('.is-loaded');
141        images.on('loaded', function () {
142            var image = $(this);
143            var slide = image.closest('.access-slide');
144            slide.addClass('is-loaded');
145        });
146        images.queueLoading();
147        var timeout = setTimeout(function () {
148            slideshowNext(slideshow, false, true);
149            loaderAnim = true;
150        }, slideshowDuration);
151        slideshow.data('timeout', timeout);
152    });

153}
154
155/**
156*
157* @param slideshow
158* @param index
159* @param auto
160*/
161function slideshowSwitch(slideshow, index, auto) {
162    if (slideshow.data('wait')) {
163        return;
164    }
165    var slides = slideshow.find('.access-slide'),
166        pages = slideshow.find('.pages'),
167        activeSlide = slides.filter('.is-active'),
168        activeSlideImage = activeSlide.find('.image-container'),
169        newSlide = slides.eq(index),
170        newSlideImage = newSlide.find('.image-container'),
171        newSlideContent = newSlide.find('.slide__slide-content'),
172        newSlideElements = newSlide.find('.slide__slide-content > *'),
173        timeout = slideshow.data('timeout'),
174        transition = slideshow.attr('data-transition');
175
176    if (newSlide.is(activeSlide)) {
177        return;
178    }
179    newSlide.addClass('is-new');
180    clearTimeout(timeout);
181    slideshow.data('wait', true);
182
183    if (transition === 'fade') {
184        newSlide.css({ display: 'block', zIndex: 2 });
185        newSlideImage.css({ opacity: 0 });
186        TweenMax.to(newSlideImage, 1, {
187            alpha: 1, onComplete: function () {
188                newSlide.addClass('is-active').removeClass('is-new');
189                activeSlide.removeClass('is-active');
190                newSlide.css({ display: '', zIndex: '' });
191                newSlideImage.css({ opacity: '' });
192                slideshow.find('.pages').trigger('check');
193                slideshow.data('wait', false);
194                if (auto) {
195                    timeout = setTimeout(function () {
196                        slideshowNext(slideshow, false, true);
197                    }, slideshowDuration);
198                    slideshow.data('timeout', timeout);
199                }
200            }
201        });
202    } else if (transition === 'transform') {
203
204        // TODO
205
206    } else {
207        if (newSlide.index() > activeSlide.index()) {
208            var newSlideRight = 0,
209                newSlideLeft = 'auto',
210                newSlideImageRight = -slideshow.width() / 8,
211                newSlideImageLeft = 'auto',
212                newSlideImageToRight = 0,
213                newSlideImageToLeft = 'auto',
214                newSlideContentLeft = 'auto',
215                newSlideContentRight = 0,
216                activeSlideImageLeft = -slideshow.width() / 4;
217        } else {
218            var newSlideRight = '',
219                newSlideLeft = 0,
220                newSlideImageRight = 'auto',
221                newSlideImageLeft = -slideshow.width() / 8,
222                newSlideImageToRight = '',
223                newSlideImageToLeft = 0,
224                newSlideContentLeft = 0,
225                newSlideContentRight = 'auto',
226                activeSlideImageLeft = slideshow.width() / 4;
227        }
228
229        newSlide.css({ display: 'block', width: 0, right: newSlideRight, x: newSlideLeft, zIndex: 2 });
230        newSlideImage.css({ width: slideshow.width(), right: newSlideImageRight, x: newSlideImageLeft });
231        // newSlideContent.css({width: slideshow.width(), x: newSlideContentLeft, right: newSlideContentRight});
232        activeSlideImage.css({ x: 0 });
233
234        TweenMax.set(newSlideElements, { y: 20, force3D: true });
235        TweenMax.to(activeSlideImage, 1, { x: activeSlideImageLeft, ease: Expo.easeInOut });
236        TweenMax.to(newSlide, 1, { width: slideshow.width(), ease: Expo.easeInOut });
237        TweenMax.to(newSlideImage, 1, {
238            right: newSlideImageToRight,
239            x: newSlideImageToLeft,
240            ease: Expo.easeInOut
241        });
242
243        TweenMax.staggerFromTo(newSlideElements, 0.8, { alpha: 0, y: 60 }, {
244            alpha: 1,
245            y: 0,
246            ease: Expo.easeOut,
247            force3D: true,
248            delay: 0.6
249        }, 0.1, function () {
250            newSlide.addClass('is-active').removeClass('is-new');
251            activeSlide.removeClass('is-active');
252            newSlide.css({ display: '', width: '', x: '', zIndex: '' });
253            newSlideImage.css({ width: '', right: '', x: '' });
254            newSlideContent.css({ width: '', x: '' });
255            newSlideElements.css({ opacity: '', transform: '' });
256            activeSlideImage.css({ x: '' });
257            slideshow.find('.pages').trigger('check');
258            slideshow.data('wait', false);
259            if (auto) {
260                timeout = setTimeout(function () {
261                    slideshowNext(slideshow, false, true);
262                }, slideshowDuration);
263                slideshow.data('timeout', timeout);
264            }
265        });
266    }
267
268    /**
269    * update counter
270    */
271    $.js('counter-from').html(_pad(newSlide.index() + 1));
272}
273
274/**
275*
276* @param slideshow
277* @param previous
278* @param auto
279*/
280function slideshowNext(slideshow, previous, auto) {
281    var slides = slideshow.find('.access-slide'),
282        activeSlide = slides.filter('.is-active'),
283        newSlide = null;
284    if (previous) {
285        newSlide = activeSlide.prev('.access-slide');
286        if (newSlide.length === 0) {
287            newSlide = slides.last();
288        }
289    } else {
290        newSlide = activeSlide.next('.access-slide');
291        if (newSlide.length === 0) {
292            newSlide = slides.filter('.access-slide').first();
293        }
294    }
295
296    slideshowSwitch(slideshow, newSlide.index(), auto);
297}
298
299/**
300* loader on slider nav
301*/
302function sliderNavloader() {
303    if ($('.page.is-active').length > 0) {
304        var $self = $('.page.is-active i');
305        $self.addClass('is-animating');
306
307        TweenMax.fromTo($self, 4, { x: '-100%' }, {
308            x: '0%', onComplete: function () {
309                if (loaderAnim === true) {
310                    TweenMax.to($self, 1, {
311                        x: '101%', onComplete: function () {
312                            // TweenMax.to($self, 0, { x: '-101%' });
313                            $self.removeClass('is-animating');
314                        }
315                    });
316                }
317            }
318        });
319    }
320}
321
322
323
324sliderArrows();
325sliderPages();
326homeSlider();