Zsynchronizowany slider z nawigacją.

Question

Cześć, chciałbym się nauczyć robić slider który będzie synchronizował się z nawigacją, na przykład: Wyświetla się pierwsze zdjęcie z slidera, chciałbym aby razem z tym podkreślał się w nawigacji pierwszy link "Home", i analogicznie podczas zmiany na drugie zdjęcie np po 3s, podkreślenie przechodzi na kolejny link. Z tym że po kliknięciu w link ma nas przenieść do innej podstrony a nie zmieniać zdjęcie w sliderze. ( tak, tak, próbowałem z gotowych sliderów coś przerobić dla siebie :)).

Pozdrawiam.

Answer 1

Bardzo mocno uproszczony kod, mam nadzieje, że znasz transition lub keyframes oraz działanie slidera . Kod w pure JS.

document.getElementById("jakisUchwyt").addEventListener('load', function (){slider(0);}, 'false');



function slider (index)
{
if ( index == tablica.length) 
{
 index = 0;
}
// TU jest kod twojego slidera
refreshNav (jakies i do iteracji); // Przekazujesz i do funkcji. 
setTimeout (functon () { slider(index);}, 5000) // Jakis pomiar czasowy.
}

function refreshNav (index)

{

document.getElementById(index).classList.add('dodajPodkreslenie); // Jak umiesz obłsugiwać keyframes to wiesz jak to zrobic.

var createHref = document.createElement('a');

createHref.setAttribute ('href' , "moja_strona" + index);

document.getElementById(index).apppendChild(createHref);

}

Wypadałoby by napisać jeszcze skrypt , który by sprawdzał czy istnieją już takie odnośniki. Ale to zostawiam tobie :).

Comments

Super dzięki wielkie za pomoc, podsunąłeś mi parę innych rozwiązań :).

---

W razie problemów pisz :).