https://moratelindo.co.id/js/modules/sliders.js

1var $bxsliderPrimary, $bxsliderCarousel, $bxsliderCarousel2, $bxsliderImages, $bxsliderInCarousel;
2var bxsliderArray = [];
3
4var sliderSettings = {
5    mode: 'fade',
6    auto: true,
7    pager: false
8};
9
10var carouselSettings = {
11    controls: true,
12    maxSlides: 3,
13    minSlides: 1,
14    moveSlides: 2,
15    pager: false,
16    slideMargin: 0,
17    nextText: '',
18    prevText: ''
19};
20
21// FlexSlider custom params
22var flexCarouselSettings = {
23    animation: "slide",
24    controlNav: false,
25    animationLoop: false,
26    slideshow: false,
27    itemWidth: 78,
28    itemMargin: 20
29};
30
31jQuery(function ($) {
32
33    $bxsliderPrimary = $('.j-slider-primary').bxSlider($.extend({}, sliderSettings, {
34        controls: false,
35        pager: true
36    }));
37
38    $bxsliderCarousel = $('.j-carousel-primary').bxSlider($.extend({}, carouselSettings, {
39        controls: false,
40        slideMargin: 30,
41        slideWidth: 568,
42        pager: true
43    }));
44
45    $bxsliderCarousel2 = $('.j-carousel-secondary').bxSlider($.extend({}, carouselSettings, {
46        slideMargin: 28,
47        slideWidth: 370
48    }));
49
50    $bxsliderCarousel3 = $('.j-carousel-sidebar').bxSlider($.extend({}, carouselSettings, {
51        slideMargin: 28,
52        slideWidth: 270
53    }));
54
55    logoSlider();
56
57    $bxsliderImages = $('.j-slider-images').bxSlider($.extend({}, carouselSettings, {
58        maxSlides: 1,
59        moveSlides: 1
60    }));
61
62    $bxsliderInCarousel = $('.j-slider-in-carousel').bxSlider($.extend({}, carouselSettings, {
63        maxSlides: 1,
64        moveSlides: 1,
65        pager: true
66    }));
67
68    // Multiple flexSlider with thumbnail slider
69    var $carousel = $('.flexslider-thumbnail'); // Img pagination
70    var $sliderBig = $('.flexslider-zoom'); // Big image slider
71
72    $carousel.each(function (index) {
73
74        if ($carousel.eq(index).length) {
75            // SM version
76            if ($(this).hasClass('carousel-sm')) {
77                $(this).flexslider($.extend({}, flexCarouselSettings, {
78                    asNavFor: '.flexslider-zoom:eq(' + index + ')'
79                }));
80            }
81            // MD version
82            else if ($(this).hasClass('carousel-md')) {
83                $(this).flexslider($.extend({}, flexCarouselSettings, {
84                    itemWidth: 105,
85                    itemMargin: 20,
86                    asNavFor: '.flexslider-zoom:eq(' + index + ')'
87                }));
88            }
89        }
90
91        if ($sliderBig.eq(index).length) {
92            $sliderBig.eq(index).flexslider({
93                animation: "slide",
94                controlNav: false,
95                animationLoop: false,
96                slideshow: true,
97                sync: '.flexslider-thumbnail:eq(' + index + ')',
98                after: function(slider) {
99                    /* auto-restart player if paused after action */
100                    if (!slider.playing) {
101                        slider.play();
102                    }
103                }
104            })
105        }
106    });
107
108    function logoSlider() {
109        $('.j-logo-slider:visible').each(function () {
110            var slider = $(this);
111            slider.bxSlider($.extend({}, carouselSettings, {
112                auto: true,
113                maxSlides: 5,
114                moveSlides: 3,
115                slideWidth: 208
116            }));
117        });
118    }
119
120    bxsliderArray.push($bxsliderPrimary, $bxsliderCarousel, $bxsliderCarousel2, $bxsliderCarousel3, $bxsliderImages, $bxsliderInCarousel);
121
122    function imgPreload($collection, $elEvent) {
123        var colLenght = $collection.length;
124        var counter = 0;
125        $collection.each(function () {
126            var src = $(this).attr('src');
127            var img = new Image();
128            img.src = src;
129            img.onload = function () {
130                counter++;
131                if (counter >= colLenght) {
132                    $elEvent.trigger('imgsLoaded');
133                    return false;
134                }
135            };
136        });
137    }
138
139    if ($('.slider-carousel-roundabout').length) {
140        var $carouselData = $('.carousel-roundabout-data');
141        imgPreload($('.roundabout-slide').find('img'), $('.slider-carousel-roundabout'));
142        var curSize;
143        $('.slider-carousel-roundabout').on('imgsLoaded', function () {
144            $carouselData.css('display', 'none');
145            $carouselData.clone()
146                .prependTo('.b-carousel-roundabout-wrap')
147                .removeClass('carousel-roundabout-data')
148                .addClass('b-carousel-roundabout')
149                .css('display', 'block');
150            $(window).on('resize', function () {
151                windowSize();
152            });
153            reloadSlider();
154        });
155
156        function reloadSlider() {
157            $('.b-carousel-roundabout').remove();
158            $carouselData.clone()
159                .prependTo('.b-carousel-roundabout-wrap')
160                .removeClass('carousel-roundabout-data')
161                .addClass('b-carousel-roundabout')
162                .css('display', 'block');
163            carouselInit();
164        }
165
166        function windowSize() {
167            if ($(window).width() > 768 && curSize != 'desktop') {
168                reloadSlider();
169                curSize = 'desktop';
170            }
171            else if ($(window).width() > 480 && $(window).width() <= 768 && curSize != 'tablet') {
172                reloadSlider();
173                curSize = 'tablet';
174            } else if ($(window).width() <= 480 && curSize != 'mobile') {
175                reloadSlider();
176                curSize = 'mobile';
177            }
178        }
179
180        function carouselInit() {
181            setTimeout(function () {
182                var $carou = $('.b-carousel-roundabout');
183                $carou.roundabout({
184                    childSelector: ".roundabout-slide",
185                    minOpacity: 1,
186                    autoplay: true,
187                    autoplayDuration: 4166,
188                    autoplayPauseOnHover: true,
189                    tilt: 5,
190                    minScale: 0.1,
191                    reflect: false
192                });
193                $carou.roundabout('animateToNextChild');
194            }, 50);
195        }
196
197    }
198});