Dlaczego strzałki w swiperze przestają działać po przełączeniu buttonów?

Damian Marek

2024-12-17T10:13:29+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 6

hej,

mam problem na stronce: http://www.dostepnosc.altix.pl/

mianowicie na dole jest swiper i cztery buttony. Jak kliknę na przykład button pierwszy to strzałki nawigacyjne działają. Natomiast jak klikne drugi i będę chciał powrócić do kafelek z pierwszego buttonu to strzałki przestają działać. Co ciekawe, można przesunąć kafelek myszką i wtedy strzałki zaczynają działać.

Kopiuj

// Dodanie event listenerów do przycisków
    cyfroweBtn.addEventListener('click', function () {
        hideAllBlocks();
        cyfroweBlock.style.display = 'block';
        initializeSwiper('wsparcieCyfroweBlok');
        
    });

    architektoniczneBtn.addEventListener('click', function () {
        hideAllBlocks();
        architektoniczneBlock.style.display = 'block';
        initializeSwiper('wsparcieArchitektoniczneBlok');
        
    });

    szkoleniaBtn.addEventListener('click', function () {
        hideAllBlocks();
        szkoleniaBlock.style.display = 'block';
        initializeSwiper('wsparcieSzkoleniaBlock');
        
    });

    mieszaneBtn.addEventListener('click', function () {
        hideAllBlocks();
        mieszaneBlock.style.display = 'block';
        initializeSwiper('wsparcieMieszaneBlok');
        
    });

    // Opcjonalnie: Możesz ustawić domyślnie widoczny pierwszy blok
    cyfroweBlock.style.display = 'block';
    initializeSwiper('wsparcieCyfroweBlok');

    // Nasłuch na zdarzenie klawiatury
    document.addEventListener('keydown', handleKeyboardNavigation);
});
document.addEventListener('DOMContentLoaded', function () {
    // Inicjalizacja Swipera
    const swiper = new Swiper('.feedback-slider', {
        slidesPerView: 1,
        spaceBetween: 20,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.feedback-button-next',
            prevEl: '.feedback-button-prev',
        },
        loop: true,
        breakpoints: {
            500: {
                slidesPerView: 1,
                spaceBetween: 10,
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            1024: {
                slidesPerView: 3,
                spaceBetween: 30,
            },
        },
    });

    // Używanie metody on() do zdarzeń
    swiper.on('slideChange', function () {
        console.log('Slide zmieniony!');
    });

    // Obsługa resize
    swiper.on('resize', () => {
        swiper.update();
    });

    // Aktualizacja Swipera po załadowaniu strony
    window.addEventListener('load', () => {
        swiper.update();
    });
});
console.log(Swiper.prototype.version);

VBService

2024-12-17T17:42:46+01:00

Rejestracja: dni
Ostatnio: dni

BTW, (umieszczam wpis jako wątek do tematu, bo w komentarzu ciężko się pokazuje kod)
m. in. w Twoim pliku custom-code.js znalazłem "rzeczy", które IMO trzeba by było przemyśleć na nowo.

Masz zapisaną funkcję function formatCurrency(value) 3 razy w tym samym kontekście.

Kopiuj

function formatCurrency(value) {
  // Używamy toLocaleString do formatowania liczby z separatorami tysięcy
  return value.toLocaleString('pl-PL', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + ' zł';
}

// Funkcja wyświetlająca podsumowanie zamówienia
// Funkcja formatująca liczby do formatu walutowego
function formatCurrency(value) {
  return value.toFixed(2).replace('.', ',') + ' zł';
}

function formatCurrency(value) {
  // Najpierw formatujemy liczbę do dwóch miejsc po przecinku
  let formattedValue = new Intl.NumberFormat('pl-PL', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value);

  // Jeżeli liczba jest większa lub równa 1000, dodajemy separator tysięcy (spację)
  if (value >= 1000) {
    formattedValue = formattedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
  }

  // Zwracamy sformatowaną liczbę z dodatkiem "zł"
  return formattedValue + ' zł';
}

W JavaScript nie można przeciążać funkcji w klasycznym sensie, jak np. w C++ czy Java, gdzie można definiować kilka wersji funkcji o tej samej nazwie, ale z różnymi parametrami.

W JavaScript funkcje są identyfikowane wyłącznie na podstawie ich nazwy, więc jeśli zdefiniujesz dwie funkcje i więcej o tej samej nazwie, ostatnia definicja nadpisze poprzednią.

Sprawdź:

Kopiuj

function formatCurrency(value) { // 1
  // Używamy toLocaleString do formatowania liczby z separatorami tysięcy
  return value.toLocaleString('pl-PL', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + ' zł' + '::1::';
}
console.log(formatCurrency(1));

// Funkcja wyświetlająca podsumowanie zamówienia
// Funkcja formatująca liczby do formatu walutowego
function formatCurrency(value) { // 2
  return value.toFixed(2).replace('.', ',') + ' zł' + '::2::';
}
console.log(formatCurrency(2));

function formatCurrency(value) { // 3
  // Najpierw formatujemy liczbę do dwóch miejsc po przecinku
  let formattedValue = new Intl.NumberFormat('pl-PL', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value);

  // Jeżeli liczba jest większa lub równa 1000, dodajemy separator tysięcy (spację)
  if (value >= 1000) {
    formattedValue = formattedValue.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
  }

  // Zwracamy sformatowaną liczbę z dodatkiem "zł"
  return formattedValue + ' zł' + '::3::';
}
console.log(formatCurrency(3));

Oczywiście w JavaScript możesz osiągnąć podobny efekt do przeciążania funkcji, używając pewnych trików programowych,

Kopiuj

function foo1(x, y) {
  if (y === undefined) {
    console.log("Pierwsza wersja:", x);
    return; 
  }
  console.log("Druga wersja:", x, y);
}

console.info('Wersja z undefined');
foo1(1);    // Pierwsza wersja: 1
foo1(1, 2); // Druga wersja: 1 2

function foo2() {
  if (arguments.length === 1)
    console.log("Pierwsza wersja:", arguments[0]);
  if (arguments.length === 2)
    console.log("Druga wersja:", arguments[0], arguments[1]);
}

console.info('Wersja z arguments');
foo2(1);    // Pierwsza wersja: 1
foo2(1, 2); // Druga wersja: 1 2

ale w tym przypadku IMO wystarczy jedna funkcja, a która zadecyduj sam.

Następna sprawa, ten kod

Kopiuj

// Funkcja, która dodaje style focus do linków i przycisków
function addFocusOutline() {
    // Wybieramy wszystkie linki i przyciski
    const elements = document.querySelectorAll('a, button');
    
    // Dodajemy nasłuchiwanie na focus dla każdego z tych elementów
    elements.forEach(element => {
        element.addEventListener('focus', function() {
            element.style.outline = '3px solid red'; // Dodajemy outline po focus
        });

        // Opcjonalnie: usuwamy outline, gdy element traci focus
        element.addEventListener('blur', function() {
            element.style.outline = ''; // Usuwamy outline po utracie focus
        });
    });
}

addFocusOutline();

możesz teraz zastąpić natywnym zachowaniem przeglądarki w css-ie.

Kopiuj

a:focus, 
button:focus {
  outline: 3px solid red;
  transition: all 120ms ease-in-out;
}
a:not(:focus), 
button:not(:focus) {
  outline: none;
}

Kopiuj

<a href="#">Lorem 1</a>
<a href="#">Lorem 2</a>
<a href="#">Lorem 3</a>
<a href="#">Lorem 4</a>
<br>
<button>Lorem 1</button>
<button>Lorem 2</button>
<button>Lorem 3</button>
<button>Lorem 4</button>

<style>
  a:focus, 
  button:focus {
    outline: 3px solid red;
    transition: all 120ms ease-in-out;
  }
  a:not(:focus), 
  button:not(:focus) {
    outline: none;
  }
  
  a {
    display: inline-block;
    margin-bottom: .5rem;
  }
</style>