https://www.agriturismoamatrice.com/template/template-default/js/carousel.js

1window.addEventListener('load', function(){
2    
3    /** Crea l'oggetto carousel per ogni elemento trovato **/
4    const sezioni_carousel = document.getElementsByClassName('owl-carousel');
5    const conta_sezioni_carousel = sezioni_carousel.length;
6    if(conta_sezioni_carousel > 0){
7        for(var indicecarousel = 0; indicecarousel < conta_sezioni_carousel; indicecarousel++){
8            let object_carousel = sezioni_carousel[indicecarousel];
9            let idcarousel = object_carousel.id;
10            let tempo = parseInt(object_carousel.dataset.tempo);
11            let effettoin = object_carousel.dataset.effettoin;
12            let effettoout = object_carousel.dataset.effettoout;
13            let elementi_item = parseInt(object_carousel.dataset.item);
14            let indicatori_nav = false;
15            let indicatori_dot = (object_carousel.dataset.dot === '1') ? true : false;
16            let intervallo = tempo*1000;
17
18            let elemento_carousel = document.querySelector('div#'+idcarousel);
19            
20            let animateOut = effettoout;
21            let animateIn = effettoin;
22            
23            /** Inizializza il carousel per ogni oggetto trovato **/
24            if(window.innerWidth < 680){
25                $(elemento_carousel).owlCarousel({
26                    animateOut: animateOut,
27                    animateIn: animateIn,
28                    items:1,
29                    loop:true,
30                    autoplay:true,
31                    autoplayTimeout:intervallo,
32                    autoplayHoverPause:true,
33                    margin: 0,
34                    /*autoHeight: true,*/
35                    nav:indicatori_nav,
36                    dots:indicatori_dot
37                });
38            }
39            else{
40                $(elemento_carousel).owlCarousel({
41                    animateOut: animateOut,
42                    animateIn: animateIn,
43                    items:elementi_item,
44                    loop:true,
45					rewind:false,
46                    smartSpeed: 600,
47                    autoplaySpeed: 600,
48                    navSpeed: 600,
49                    dotsSpeed: 600,
50                    slideTransition: 'linear',
51                    autoplay:true,
52                    autoplayTimeout:intervallo,
53                    autoplayHoverPause:true,
54                    margin: 0,
55                    /*autoHeight: true,*/
56                    nav:indicatori_nav,
57                    dots:indicatori_dot,
58                    responsive: {
59                        0:{
60                            items:1,
61                            dots:indicatori_dot,
62                            nav:indicatori_nav
63                        },
64                        600:{
65                            items:(elementi_item < 2) ? 1 : 2,
66                            dots:indicatori_dot,
67                            nav:indicatori_nav
68                        },
69                        1025:{
70                            items:(elementi_item < 3) ? elementi_item : 3,
71                            dots:indicatori_dot,
72                            nav:indicatori_nav
73                        },
74                        1080:{
75                            items:elementi_item,
76                            dots:indicatori_dot,
77                            nav:indicatori_nav
78                        }
79                    }
80                });
81            }
82        }
83    }
84
85    $('.owlNext').click(function() {
86        let idcarousel = this.dataset.idowl;
87        if(!idcarousel){
88            return;
89        }
90        
91        let carousel = $('div#owlcarousel-'+idcarousel);
92        let owl = carousel.data('owl.carousel');
93        
94        carousel.trigger('stop.owl.autoplay');
95        
96        let animateIn = $(carousel).data('effettoin');
97        let animateOut = $(carousel).data('effettoout');
98        
99        $('div#owlcarousel-'+idcarousel+' .owl-item').removeClass('[class*="animna"]');
100        
101        owl.options.animateIn = animateIn;
102        owl.options.animateOut = animateOut;
103        
104        carousel.trigger('refresh.owl.carousel');
105        
106        carousel.trigger('next.owl.carousel');
107    });
108
109    $('.owlPrev').click(function() {
110        let idcarousel = this.dataset.idowl;

111        if(!idcarousel){
112            return;
113        }
114        
115        let carousel = $('div#owlcarousel-'+idcarousel);
116        let owl = carousel.data('owl.carousel');
117        
118        carousel.trigger('stop.owl.autoplay');
119
120        let effettoin = $(carousel).data('effettoin');
121        let effettoout = $(carousel).data('effettoout');
122
123        let animateIn = cambia_effetto_prev(effettoin);
124        let animateOut = cambia_effetto_prev(effettoout);
125        
126        $('div#owlcarousel-'+idcarousel+' .owl-item').removeClass('[class*="animna"]');
127
128        owl.options.animateIn = animateIn;
129        owl.options.animateOut = animateOut;
130
131        carousel.trigger('refresh.owl.carousel');
132         
133        carousel.trigger('prev.owl.carousel');
134    });
135});
136
137function cambia_effetto_prev(nome_effetto){
138    switch(nome_effetto){
139        case 'animate__slideInRight': 
140            return 'animate__slideInLeft';
141        break;
142        
143        case 'animate__slideOutLeft': 
144            return 'animate__slideOutRight';
145        break;
146        
147        case 'animate__slideInDown':
148            return 'animate__slideInUp';
149        break;
150        
151        case 'animate__slideOutDown':
152            return 'animate__slideOutUp';
153        break;
154        
155        case 'animate__fadeInRight':
156            return 'animate__fadeInLeft';
157        break;
158        
159        case 'animate__fadeOutLeft':
160            return 'animate__fadeOutRight';
161        break;
162        
163        case 'animate__backInRight':
164            return 'animate__backInLeft';
165        break;
166        
167        case 'animate__backOutLeft':
168            return 'animate__backOutRight';
169        break;
170        
171        default:
172            return nome_effetto;
173    }
174}