Slideshow fără JavaScript sau jQuery

Salutare! Poate știi că am fost în căutarea unei metode de a include scriptul jQuery doar în cazul celor care citesc acest blog de pe calculator sau laptop. Între timp am renunțat la jQuery.

De o zi, două, se plimbă câteva link-uri (patru la număr) în partea de sus a fiecărei pagini. Am mai avut așa ceva, dar am renunțat pentru că… jQuery.

Fiindcă nu am găsit un slideshow gata de utilizare pentru WordPress care să folosească doar CSS și HTML, l-am adaptat pe acesta.

Cum link-urile pe care le-am pus eu sunt mai lungi, am fost nevoit să fac un al doilea slideshow (slideshow2) pentru dispozitive cu rezoluția (lățimea în pixeli) mai mică de 700. În slideshow2 am link-uri mai scurte, iar viteza de tranziție este mai mare pentru că îți ia mai puțin timp să citești ce am scris. O să zic că primul slideshow e pentru calculatoare, iar al doilea pentru mobile, chiar dacă nu e tocmai corect.

Codul CSS este acesta:

@media only screen and (min-width:700px){
#slideshow{overflow:hidden;height:30px;width:728px;margin-bottom:24px}
.slide-wrapper{width:2912px;-webkit-animation:slide 30s ease infinite}
.slide{float:left;height:30px;width:728px}
.slide-number{color:#000;text-align:center;font-size:1.1em}
}

@-webkit-keyframes slide{
20%{margin-left:0}
30%{margin-left:-728px}
50%{margin-left:-728px}
60%{margin-left:-1456px}
70%{margin-left:-1456px}
80%{margin-left:-2184px}
90%{margin-left:-2184px}
}

@media only screen and (max-width:699px){
#slideshow{display:none}
}

@media only screen and (max-width:699px){
#slideshow2{overflow:hidden;height:30px;width:728px;margin-bottom:24px;margin-left:-200px;}
.slide-wrapper2{width:2912px;-webkit-animation:slide 24s ease infinite}
.slide2{float:left;height:30px;width:728px}
.slide-number2{color:#000;text-align:center;font-size:1.1em}
}

@-webkit-keyframes slide2{
20%{margin-left:0}
30%{margin-left:-728px}
50%{margin-left:-728px}
60%{margin-left:-1456px}
70%{margin-left:-1456px}
80%{margin-left:-2184px}
90%{margin-left:-2184px}
}

@media only screen and (min-width:700px){
#slideshow2{display:none}
}

Eu am adăugat acest cod la CSS suplimentar, din ramura Personalizare.

Codul HTML este acesta, cu mențiunea că în loc de Link pc 1, Link pc 2 șamd. trebuie să pui link-urile tale.

<div id="slideshow"><div class="slide-wrapper">
<div class="slide"><div class="slide-number">Link pc 1</div></div>
<div class="slide"><div class="slide-number">Link pc 2</div></div>
<div class="slide"><div class="slide-number">Link pc 3</div></div>
<div class="slide"><div class="slide-number">Link pc 4</div></div>
</div></div>

<div id="slideshow2"><div class="slide-wrapper2">
<div class="slide2"><div class="slide-number2">Link mobil 1</div></div>
<div class="slide2"><div class="slide-number2">Link mobil 2</div></div>
    <div class="slide2"><div class="slide-number2">Link mobil 3</div></div>
    <div class="slide2"><div class="slide-number2">Link mobil 4</div></div>
</div></div>

Codul HTML l-am introdus în fila header.php a temei pe care o folosesc, printre codurile de acolo…

Spor la editat!