Tamaño de texto
Otras opciones
Planes Cuenta Corriente Cuentas Digitales Crédito Hipotecario Tarjetas de Crédito Crédito de Consumo Billetera Digital Ahorro Financiamiento Aplicaciones Servicios
Inversiones Pagos en Línea Recargas celular Divisas al extranjero Consejos para una nueva propiedad Consejos al comprar un auto Consejos para viajar Tarjeta de Débito: Uso en el extranjero Tarjeta de Crédito: Uso en el extranjero Portabilidad Financiera IVA Digital
¿Como podemos ayudarte?
Cerrar
var app = new Vue({ el: "#bch-custom-slider", delimiters: ["${", "}"], data: { slides: [], pills: [], currentSlide: null, timerInterval: 0, timerTimeout: 0, initTimerTime: "", pauseTimerTime: "", touchStartX: 0, touchEndX: 0, touchStartY: 0, touchEndY: 0, }, methods: { // Retorna el dataset del slide activo getActiveSlide() { return Number(document.querySelector(".slide__body--show").dataset.id); }, // Actualiza el slider en base al slide activo updateActiveSlide(currentElement, currentSlide) { // Anula el setInterval clearInterval(this.timerInterval);
// Actualiza las clases de los slides según el slide activo this.slides[currentElement - 1].classList.toggle("slide__body--show"); this.slides[currentSlide - 1].classList.toggle("slide__body--show");
// Actualiza las clases de los pills según el slide activo this.pills[currentElement - 1].classList.toggle("pill__slide--active"); this.pills[currentSlide - 1].classList.toggle("pill__slide--active");
// Desplaza el pill activo al centro de la pantalla // Si es el ultimo slide, lo desplaza al final de la pantalla var pill = this.pills[currentSlide - 1]; if (currentSlide === this.slides.length) { pill.parentNode.parentNode.scrollLeft = pill.offsetLeft; } else { pill.parentNode.parentNode.scrollLeft = pill.offsetLeft - 15; }
// Inicia el setInterval this.startTimer(); }, // Realiza el cambio de slide desde los controles de navegación changeSlide(value) { // Obtiene el slide activo const currentElement = this.getActiveSlide();
// Actualiza el valor del slide activo this.currentSlide = currentElement; this.currentSlide += value;
// Si el slide activo es 0 o el ultimo slide, se cambia el slide activo a 1 if ( this.currentSlide === 0 || this.currentSlide == this.slides.length + 1 ) { this.currentSlide = this.currentSlide === 0 ? this.slides.length : 1; }
// Actualiza el slider this.updateActiveSlide(currentElement, this.currentSlide);
let currentSlideActive = document.querySelector(".slide__body--show");
// Identifica la slide activa para evento custom if(currentSlideActive.dataset.slug == 'fan-de-fan'){ console.log('este es fan'); //this.confettiMillon(); } }, // Realiza el cambio de slide desde los pills changeSlideFromPill(value) { // Obtiene el slide activo const currentElement = this.getActiveSlide();
// Actualiza el valor del slide activo this.currentSlide = value;
// Actualiza el slider this.updateActiveSlide(currentElement, this.currentSlide); }, // Inicia el setInterval startTimer() { this.timerInterval = setInterval(() => { this.changeSlide(1); }, 9000); },
//Confetti confettiMillon() {
function celebrate() { var duration = 2 * 1000; var animationEnd = Date.now() + duration; var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
function randomInRange(min, max) { return Math.random() * (max - min) + min; }
var interval = setInterval(function () { var timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) { return clearInterval(interval); } var particleCount = 50 * (timeLeft / duration); // since particles fall down, start a bit higher than random confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } })); confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } })); }, 250); } //celebrate(); }, // Función para habilitar el touch handleGesture() { // Obtiene el desplazamiento en Eje X let horizontalMovement = this.touchEndX - this.touchStartX; // Si el desplazamiento es negativo se convierte en positivo para hacer comparación if (horizontalMovement < 0) { horizontalMovement = horizontalMovement * -1; } // Obtiene el desplazamiento en Eje Y let verticalMovement = this.touchEndY - this.touchStartY; // Si el desplazamiento es negativo se convierte en positivo para hacer comparación if (verticalMovement < 0) { verticalMovement = verticalMovement * -1; } // Si el desplazamiento en Eje X es mayor al desplazamiento en Eje Y, se cambia el slide, sino se omite para no interrumpir el scroll de la página if (horizontalMovement > verticalMovement) { if (this.touchEndX < this.touchStartX) { // Desplazamiento hacia la derecha this.changeSlide(1); } if (this.touchEndX > this.touchStartX) { // Desplazamiento hacia la izquierda this.changeSlide(-1); } } }, }, mounted() { // Agregar Overflow Hidden al body para evitar dezplazamiento horizontan // const body = document.getElementById("home"); // if (body) body.style.overflow = "hidden";
// Obtiene las slides del body this.slides = [...document.querySelectorAll(".slide__body")];
// Obtiene los pills del body this.pills = [...document.querySelectorAll(".pill__slide")];
// Inicia el setInterval this.startTimer();
// Obtiene el contenedor del slider const slider = document.getElementById("slider-container");
// Agrega escucha para inicio de evento de touch slider.addEventListener("touchstart", (e) => { // Guarda la posición inicial de X this.touchStartX = e.changedTouches[0].screenX; // Guarda la posición inicial de Y this.touchStartY = e.changedTouches[0].screenY; });
// Agrega escucha para fin de evento de touch slider.addEventListener("touchend", (e) => { // Guarda la posición Final de X this.touchEndX = e.changedTouches[0].screenX; // Guarda la posición Final de Y this.touchEndY = e.changedTouches[0].screenY; // Llama a función que evalúa el touch this.handleGesture(); });
// Funcion que gatilla el confeti al click const restartTrigger = document.querySelector(".click");
restartTrigger.addEventListener("click", () => { // this.confettiMillon(); });
// Funcion que gatilla el confeti al inicializar el componente si el primero es cuenta fan // Identifica la slide activa para evento custom let currentSlideActive = document.querySelector(".slide__body--show");
if (currentSlideActive.dataset.slug == 'fan-de-fan') { console.log('este es fan'); //this.confettiMillon(); }
}, });

Descargar la app Mi Banco
Descubre lo simple de aportar en Teletón

Agenda tu aporte en nuestras sucursales
Desde el 2 al 4 de noviembre