https://www.changan.cl/scripts/home/swiper_slider.js

1//// Section Swiper Banner Hero
2//const progressCircle = document.querySelector(".autoplay-progress svg");
3//const progressContent = document.querySelector(".autoplay-progress span");
4//var swiperBannerHome = new Swiper(".swiperHome", {
5
6//  centeredSlides: true,
7//  directon: "horizontal",
8
9//  autoplay: {
10//    delay: 3500,
11//    disableOnInteraction: false,
12//    pauseOnMouseEnter: true,
13//  },
14//  pagination: {
15//    el: ".swiper-pagination-hero-banner",
16//    clickable: true
17//  },
18
19//  on: {
20//    autoplayTimeLeft(s, time, progress) {
21//      progressCircle.style.setProperty("--progress", 1 - progress);
22//      progressContent.textContent = `${Math.ceil(time / 1000)}s`;
23
24//    }
25//  },
26
27//});
28
29
30//Section Timer - HomePage
31
32function ready(callbackFunc) {
33    if (document.readyState !== 'loading') {
34        // Document is already ready, call the callback directly
35        callbackFunc();
36    } else if (document.addEventListener) {
37        // All modern browsers to register DOMContentLoaded
38        document.addEventListener('DOMContentLoaded', callbackFunc);
39    } else {
40        // Old IE browsers
41        document.attachEvent('onreadystatechange', function () {
42            if (document.readyState === 'complete') {
43                callbackFunc();
44            }
45        });
46    }
47}
48
49
50
51/*==== home parte 1 swiper banner===*/
52ready(function () {
53    let remainingProgress;
54    let progressbar;
55    let missingTime;
56    let durationTime = 3500;
57    var swiper = new Swiper(".swiperHome", {
58        centeredSlides: true,
59        loop: true,
60        autoplay: {
61            delay: durationTime,
62            disableOnInteraction: false,
63        },
64        pagination: {
65            el: ".swiper-pagination-hero-banner",
66            clickable: true,
67            type: "bullets",
68            renderBullet: function (index, className) {
69                return (
70                    '<div class="' + className + '"><div class="icon"></div><div id="container' + (index + 1) + '" ></div> </div>'
71                );
72            },
73        },
74    });
75
76    function Progress(index) {
77        
78        const container = document.querySelector(`#container${index}`);
79        if (container != null) {
80            container.parentElement.querySelector('.icon').classList.add('pause');
81    }
82        progressbar = createProgress(`#container${index}`);
83        progressbar.animate(1, {
84            duration: durationTime, step: function (state, circle, attachment) {
85                remainingProgress = state.offset;
86            }
87        });
88        document.querySelector(`#container${index}`).parentElement.querySelector('.icon').innerHTML =
89            `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
90                <path d="M4.5 20.5H9.5V3.5H4.5V20.5ZM14.5 3.5V20.5H19.5V3.5H14.5Z" fill="var(--brand)"/>
91            </svg>
92 `
93    }
94    
95    function createProgress(container) {
96        //get the window screen width to confirm the color of the trail on the progress bar
97        var trailcolor = "";
98        if (window.screen.width <= 1366) {
99            trailcolor = "var(--brand-white)";
100        } else {
101            trailcolor = "#fff";
102        }
103
104        var bar = new ProgressBar.Circle(container, {
105            strokeWidth: 6,
106            easing: "easeInOut",
107            color: "var(--brand)", //***Progress Color*/
108            // trailColor: "#566573",/**Pagination Color*/
109            trailColor: trailcolor,
110            trailWidth: 6,
111            svgStyle: null,
112        });
113        return bar;
114    }
115    function progressComplete() {
116        document.querySelectorAll(`.swiper-pagination-hero-banner .icon`).forEach(element => {
117            element.classList.remove('play');
118            element.classList.remove('pause');
119        });
120        document.querySelectorAll(`.swiper-pagination-hero-banner div div`).forEach(element => {
121            element.innerHTML = "";
122        });
123    }
124    document.querySelectorAll('.swiper-pagination-hero-banner .swiper-pagination-bullet').forEach(element => {
125        element.addEventListener('click', () => {
126            if (element.classList.contains('swiper-pagination-bullet-active')) {
127                if (swiper.autoplay.running) {
128                    swiper.autoplay.stop();
129                    progressbar.stop()
130                    element.querySelector('.icon').classList.remove('pause');
131                    element.querySelector('.icon').classList.add('play');
132                    element.querySelector('.icon').innerHTML =
133                        `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
134                            <path d="M4 3L20 12L4 21V3Z" fill="var(--brand)" />
135                        </svg> `
136
137                } else {
138                    progressComplete();
139                    swiper.autoplay.start();
140                    Progress(swiper.realIndex + 1);
141                }
142            }
143        })
144    });
145    Progress(1);
146    swiper.on('slideChange', function (event) {
147        progressComplete();
148        Progress(this.realIndex + 1)
149        if (!swiper.autoplay.running) {
150            swiper.autoplay.start();
151        }
152    })
153
154});
155
156
157// Section Swiper News
158// const swiperHomeNews = new Swiper('.home_noticias_div_swiper', {
159//     direction: 'horizontal',
160//     noSwiping: true,
161//     watchOverflow: true,
162//     init: true,
163
164
165//     navigation: {
166//         nextEl: ".swiper-button-next",
167//         prevEl: ".swiper-button-prev",
168
169//     },
170
171    
172
173//     breakpoints: {
174//         // when window width is >= 1280px
175//         1280: {
176//             slidesPerView: 4.02,
177//             spaceBetween: 24
178//         },
179//         // when window width is >= 1024px
180//         1024: {
181//             slidesPerView: 3.02,
182//             spaceBetween: 30
183//         },
184//         // when window width is >= 640px
185//         640: {
186//             slidesPerView: 2.02,
187//             spaceBetween: 20
188//         },
189
190//         // when window width is >= 320px
191//         320: {
192//             slidesPerView: 1.2,
193//             spaceBetween: 20
194//         }
195//     }
196// });
197
198// Swiper blog articulo
199const fractionPagination = document.querySelector(".container-inner-mobile .fraction-pagination");
200const sampleSlider = new Swiper('.sample-slider', {
201    
202
203navigation: {  //(arrows)
204    nextEl: ".swiper-button-nex",
205    prevEl: ".swiper-button-prev",
206            
207    },
208
209    /*Events changed slide and count slides fraction pagination*/
210    on: {
211        slideChange: function (e) {
212
213            fractionPagination.innerHTML = `<span>${e.activeIndex + 1}</span>/${e.slides.length}`
214           
215        }
216    },
217
218breakpoints: {
219    // when window width is >= 1280px
220    1280: {
221        slidesPerView: 3.2,
222            spaceBetween: 5
223    },
224    // when window width is >= 1024px
225    1024: {
226        slidesPerView: 3,
227            spaceBetween: 5
228    },
229    // when window width is >= 640px
230    640: {
231        slidesPerView: 1,
232            spaceBetween: 0
233    },
234
235    // when window width is >= 320px
236    320: {
237        slidesPerView: 1,
238            spaceBetween: 0
239    }
240}
241
242})
243