|
|
| Linha 1: |
Linha 1: |
| const carousel = document.getElementById('carousel');
| | mw.loader.using('jquery', function () { |
| const cards = document.querySelectorAll('.card'); | | const $carousel = $('.carousel-wrapper'); |
| const nextBtn = document.getElementById('nextBtn'); | | const $items = $('.carousel-item'); |
| const prevBtn = document.getElementById('prevBtn');
| | let index = 0; |
|
| |
|
| let currentIndex = 2; // Começa com o terceiro card centralizado
| | function update() { |
| const cardWidth = cards[0].offsetWidth + 20; // Largura + Gap
| | const itemWidth = $items.outerWidth(true); |
| | $carousel.scrollLeft(index * itemWidth); |
|
| |
|
| // Função para centralizar o card
| | $items.removeClass('active'); |
| function updateCarousel() {
| | $items.eq(index).addClass('active'); |
| carousel.scrollTo({ | | } |
| left: (currentIndex - 1) * cardWidth,
| |
| behavior: 'smooth'
| |
| });
| |
|
| |
|
| // Atualizar classe active
| | $('.right-btn').on('click', function () { |
| cards.forEach((card, index) => {
| | index = (index + 1) % $items.length; |
| card.classList.remove('active');
| | update(); |
| if (index === currentIndex) {
| | }); |
| card.classList.add('active');
| |
| }
| |
| });
| |
| }
| |
| | |
| // Navegação
| |
| nextBtn.addEventListener('click', () => {
| |
| if (currentIndex < cards.length - 1) {
| |
| currentIndex++;
| |
| updateCarousel();
| |
| }
| |
| });
| |
| | |
| prevBtn.addEventListener('click', () => {
| |
| if (currentIndex > 0) {
| |
| currentIndex--;
| |
| updateCarousel();
| |
| }
| |
| });
| |
| | |
| // Auto Slide (a cada 3 segundos)
| |
| setInterval(() => {
| |
| if (currentIndex < cards.length - 1) {
| |
| currentIndex++;
| |
| } else {
| |
| currentIndex = 0; // Volta ao início
| |
| }
| |
| updateCarousel();
| |
| }, 3000);
| |
| | |
| // Iniciar centralizado
| |
| updateCarousel();
| |
| | |
| <script src="script.js"></script>
| |
| | |
| document.addEventListener('DOMContentLoaded', function () {
| |
| const carousels = document.querySelectorAll('.everlight-carousel'); | |
| | |
| carousels.forEach(carousel => {
| |
| const wrapper = carousel.querySelector('.carousel-wrapper');
| |
| const cards = carousel.querySelectorAll('.card');
| |
| const nextBtn = carousel.querySelector('.right-btn');
| |
| const prevBtn = carousel.querySelector('.left-btn');
| |
| | |
| let currentIndex = 0;
| |
| const cardWidth = cards[0].offsetWidth + 20;
| |
| | |
| function updateCarousel() {
| |
| wrapper.scrollTo({
| |
| left: currentIndex * cardWidth,
| |
| behavior: 'smooth'
| |
| });
| |
| | |
| cards.forEach((card, index) => {
| |
| card.classList.toggle('active', index === currentIndex);
| |
| });
| |
| }
| |
| | |
| nextBtn.addEventListener('click', () => {
| |
| currentIndex = (currentIndex + 1) % cards.length;
| |
| updateCarousel();
| |
| });
| |
| | |
| prevBtn.addEventListener('click', () => {
| |
| currentIndex = (currentIndex - 1 + cards.length) % cards.length;
| |
| updateCarousel();
| |
| }); | |
| | |
| setInterval(() => {
| |
| currentIndex = (currentIndex + 1) % cards.length;
| |
| updateCarousel();
| |
| }, 4000);
| |
|
| |
|
| updateCarousel(); | | $('.left-btn').on('click', function () { |
| | index = (index - 1 + $items.length) % $items.length; |
| | update(); |
| }); | | }); |
| });
| |
|
| |
| <script>
| |
| const carousel = document.getElementById('carousel');
| |
| const cards = document.querySelectorAll('.card');
| |
| const nextBtn = document.getElementById('nextBtn');
| |
| const prevBtn = document.getElementById('prevBtn');
| |
|
| |
| let currentIndex = 2;
| |
| const cardWidth = cards[0].offsetWidth + 20;
| |
|
| |
| function updateCarousel() {
| |
| carousel.scrollTo({
| |
| left: (currentIndex - 1) * cardWidth,
| |
| behavior: 'smooth'
| |
| });
| |
|
| |
| cards.forEach((card, index) => {
| |
| card.classList.toggle('active', index === currentIndex);
| |
| });
| |
| }
| |
|
| |
|
| nextBtn.addEventListener('click', () => {
| | setInterval(function () { |
| if (currentIndex < cards.length - 1) { | | index = (index + 1) % $items.length; |
| currentIndex++;
| | update(); |
| updateCarousel();
| | }, 4000); |
| }
| |
| }); | |
|
| |
|
| prevBtn.addEventListener('click', () => {
| | update(); |
| if (currentIndex > 0) {
| |
| currentIndex--;
| |
| updateCarousel();
| |
| }
| |
| }); | | }); |
|
| |
| setInterval(() => {
| |
| currentIndex = (currentIndex + 1) % cards.length;
| |
| updateCarousel();
| |
| }, 3000);
| |
|
| |
| updateCarousel();
| |
| </script>
| |
mw.loader.using('jquery', function () {
const $carousel = $('.carousel-wrapper');
const $items = $('.carousel-item');
let index = 0;
function update() {
const itemWidth = $items.outerWidth(true);
$carousel.scrollLeft(index * itemWidth);
$items.removeClass('active');
$items.eq(index).addClass('active');
}
$('.right-btn').on('click', function () {
index = (index + 1) % $items.length;
update();
});
$('.left-btn').on('click', function () {
index = (index - 1 + $items.length) % $items.length;
update();
});
setInterval(function () {
index = (index + 1) % $items.length;
update();
}, 4000);
update();
});