Autor Zpráva
WencaTv
Profil
Zdravím, jsem začátečník a mám takový problém, když načtu poprvé svou stránku, tak se slider jakoby rozpadne (přesněji: obrázky se dají pod sebe, viz. url) a trvá to do první změny.

Zde problém

CSS:
.slideshow-container {
  max-width: 800px;
  position: relative;
  margin: auto;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: #22c398;
}


.text {
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #262626;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #22c398;
}

@media only screen and (max-width: 300px) {
  .slprev, .slnext,.text {font-size: 11px}
}

Java:
var slideIndex = 1,
    playAuto = true, /* playAuto = false; <-- K zastavení AUTOPLAY */
    s = 1, /* Počet sekund k zopakování obrázku */
    sliderFunction = setInterval(function showSlides(n) {
    
        "use strict";

        var i,
            slides = document.getElementsByClassName("mySlides"),
            dots = document.getElementsByClassName("dot");
        
        n = slideIndex;

        if (n > slides.length) { slideIndex = 1; }
        if (n < 1) { slideIndex = slides.length; }

        for (i = 0; i < slides.length; i += 1) {

            slides[i].style.display = "none";

        }

        for (i = 0; i < dots.length; i += 1) {

            dots[i].classList.remove("active");

        }

        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].classList.add("active");

        slideIndex += 1;
        
       
        checkIfIsAuto();
    
    },  3* 1000);

function plusSlides(n) {
    
    "use strict";
    
    showSlides(slideIndex += n);
    
}

function currentSlide(n) {
    
    "use strict";
    
    showSlides(slideIndex = n);
    
}

function checkIfIsAuto() {
    
    "use strict";
    
    if (playAuto !== true) { clearInterval(sliderFunction); }
    
}

Dále by mě pak ještě zajímalo, jak přidat slidu nijaký efekt. Předem děkuji za všechny rady.
juriad
Profil
WencaTv:
Zobrazí všechny obrázky pod sebou, protože všechny mají display: block, a to až do doby než se provede první update. Musíš tedy zajistit nějakou inicializaci, která projde všechny obrázky a až na jeden všechny skryje. (Nebo udělá něco chytřejšího, čti dál.)

Přidání efektů je složité. Efekt spočívá v tom, že se bude zobrazovat několik obrázků zároveň. Jak to udělat? Vždy budeš potřebovat nastavit position: absolute (tak se budou moci překrývat). Změříš si velikost obrázků a kontejneru nastavíš přesnou velikost (protože by ji jinak ztratil).
Prolínačka: vybrat pomocí z-indexu ten, který má být navrch, kterému budeš dále pomocí opacity měnit průhlednost.
Odsouvačka: budeš měnit obrázkům pozici left (případně top). Kontejneru nastavíš overflow: hidden.

Slider můžeš rozdělit na několik částí z pohledu HTML:
kontejner, obrázky, tlačítka, tečky
Dále z pohledu JS:
* init (nastaví velikost kontejneru, nastaví vlastnosti obrázků, nastaví reakce na tlačítka, reakce na tečky)
* smyčka (každých sekund zavolá funkci na změnu obrázku; je možné při hoveru třeba zabrzdit slider)
* změna (funkce, která dostane dva čísla obrázků: aktuální a nový, a dostane také callback, který řekne slideru, že se již změnil obrázek)

Ty jsi doposud vlastně naprogramoval jen tu smyčku, přičemž tvé řešení má spoustu problémů s časováním.
Ta důležitá část pro efekty je ta funkce změny (pokud nemáš efekty, tak prostě jen nastaví viditelný obrázek, ale obecně funguje nad dvěma obrázky).

Na ty tlačítka a tečky můžeš v první fázi zapomenout. Stejně tak ti radím, abys ze začátku vyhodil ten časovač, protože něco takto primitivního nebude fungovat dobře.
Tvým cílem je:

var kontejner = document.getElementById('slider1');
function zmena(puvodni, novy, hotovo) {
  // začni něčím jako:
  // puvodni.display = none;
  // novy.display = show;
  // hotovo(novy);
  // až to budeš mít hotové, můžeš tuto část nahradit něčím efektnějším
}

var slider = initSlider(kontejner, zmena);
// funkce initSlider vrací objekt, skrze který se celý slider řídí
// {
//   kontejner: ...
//   obrazky: [...]
//   aktualni: 0
//   setSlide(novy) {zmena(aktualni, novy, function(novy) {aktualni = novy;})}
//}
slider.setSlide(4); // zahájí změnu slidu, až bude změna provedená (nemusí být okamžitě) zavolá se funkce hotovo, která změní stav slideru.
WencaTv
Profil
juriad:
Proč by ten časovač neměl fungovat ?

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: