Basta fare i mediocri! Basta scaricare da internet slider difficili da configurare e aggiornare. Costruite un vostro slider!
Come? ma è semplice, seguite questa guida passo per passo!
DEMO
Necessario:
Passo 1:
Apriamo il nostro file .html con un qualsiasi editor di Html ed andiamo a copiare/incollare queste linee di codice:
Come potete vedere, abbiamo un div con id "slider", un tag figure ed infine tanti tag img con class "slide", quante sono le immagini che dobbiamo inserire.
Passo 2:
Ora, apriamo il file .css e come prima copiamo/incolliamo il codice qui sotto:
Noi andremo a modificare solamente le due ALTEZZE e la LARGHEZZA, in base ai nostri bisogni.
Passo 3:
Abbiamo quasi finito di installare il nostro slider personale, ma come ultima cosa dobbiamo creare un file .js (JavaScript) ed aprirlo. Una volta aperto copiamo/incolliamo questo codice:
Ok, possiamo chiudere anche questo file.
Ma... cosa fa questo script?
Utilizzando JavaScript e Jquery, in questo script instanziamo delle variabili necessarie al funzionamento dello slider. Successivamente, avviamo un timer (setInterval), il quale andrà a spostare la posizione del tag "figure" ogni tot secondi; raggiunta la fine delle immagini, tornerà alla posizione inziale... più facile di così?
Passo 4:
Ora, non dobbiamo dimenticarci di includere lo script nel nostro file .html, tramite il tag:
Menomale che ci sono io a ricordarvelo... :3
Ultimo passo:
Siamo arrivati alla fine! Se questo slider ti è tornato utile, lascia un mi piace e anche un commentino, magari con qualche consiglio su come migliorarlo, oppure altri script della quale vorresti una release.
Io vi saluto, alla prossima release... forse :3
Dazorn
Come? ma è semplice, seguite questa guida passo per passo!
DEMO
Necessario:
- 1 file Html
- 1 file Css
- Importare Jquery nel vostro progetto (se non sai come, guarda qui)
- Conoscenza mediocre dei primi due linguaggi (Css & Html)
Passo 1:
Apriamo il nostro file .html con un qualsiasi editor di Html ed andiamo a copiare/incollare queste linee di codice:
HTML:
<div id="slider">
<figure>
<img class="slide" src="path_immagine">
<!-- usare la linea di codice qui sopra per aggiungere altre immagini -->
</figure>
<div id="navigation"></div>
</div>Passo 2:
Ora, apriamo il file .css e come prima copiamo/incolliamo il codice qui sotto:
Codice:
#slider{
position: relative;
top: 0;
left: 0;
width: LARGHEZZA;
height: ALTEZZA;
overflow: hidden;
}
#slider figure{
position: relative;
left: 0;
top: 0;
margin: 0;
text-align: left;
font-size: 0;
}
#slider figure img{
height: ALTEZZA;
float: left;
}
#slider #navigation{
position: absolute;
top: 550px;
left: 0;
width: 100%;
height: 50px;
text-align: center;
z-index: 99;
}
#slider #navigation .circle{
position: relative;
display: inline-block;
top: 18px;
margin-right: 10px;
width: 10px;
height: 10px;
background: rgba(0,0,0,0.9);
border: 5px solid rgba(255,255,255,0.9);
border-radius: 15px ;
transition: 0.2s;
}
#slider #navigation .selected{
background: #fff;
border: 5px solid #003399;
}
#slider #navigation .circle:hover{
cursor: pointer;
background: #fff;
border: 5px solid #1379DF;
}Passo 3:
Abbiamo quasi finito di installare il nostro slider personale, ma come ultima cosa dobbiamo creare un file .js (JavaScript) ed aprirlo. Una volta aperto copiamo/incolliamo questo codice:
Codice:
$("#slider").ready(function(){
var Slides = document.getElementsByClassName("slide"); /* NON TOCCARE */
var SlideNumber = Slides.length; /* NON TOCCARE */
var AnimSpeed = 2000; /* Modifica per controllare velocità slider */
var Pause = 6000; /* Modifica per controllare pausa tra le transizioni */
var Distance = 0; /* NON TOCCARE */
var MaxDistance = (SlideNumber - 1) * (-100); /* NON TOCCARE */
var i, j = 0; /* NON TOCCARE */
$("#slider figure").css({width: (SlideNumber * 100)+"%"});
$("#slider figure img").css({width: (100 / SlideNumber)+"%"});
for(i=0;i<SlideNumber;i++){
if(i == 0){
document.getElementById("navigation").innerHTML = '<span class="circle selected" id="'+i+'"></span>';
}
else{
document.getElementById("navigation").innerHTML += '<span class="circle" id="'+i+'"></span>';
}
}
var Buttons = document.getElementsByClassName("circle"); /* NON TOCCARE */
function Timing(){
if(Distance == MaxDistance){
Distance = 0;
j = 0;
Buttons[SlideNumber-1].className = "circle";
Buttons[0].className = "circle selected";
}
else{
Distance = Distance - 100;
j++;
Buttons[j-1].className = "circle";
Buttons[j].className = "circle selected";
}
$("#slider figure").animate({"left": Distance+"%"});
}
var Timer = setInterval(Timing, Pause);
$(".circle").click(function(){
clearInterval(Timer);
j = $(this).attr("id");
$("#navigation").find(".selected").removeClass("selected");
$(this).addClass("selected");
Distance = j * (-100);
$("#slider figure").animate({"left": Distance+"%"});
Timer = setInterval(Timing, Pause);
});
});Ma... cosa fa questo script?
Utilizzando JavaScript e Jquery, in questo script instanziamo delle variabili necessarie al funzionamento dello slider. Successivamente, avviamo un timer (setInterval), il quale andrà a spostare la posizione del tag "figure" ogni tot secondi; raggiunta la fine delle immagini, tornerà alla posizione inziale... più facile di così?
Passo 4:
Ora, non dobbiamo dimenticarci di includere lo script nel nostro file .html, tramite il tag:
HTML:
<script src="path_script"></script>Ultimo passo:
Siamo arrivati alla fine! Se questo slider ti è tornato utile, lascia un mi piace e anche un commentino, magari con qualche consiglio su come migliorarlo, oppure altri script della quale vorresti una release.
Io vi saluto, alla prossima release... forse :3
Dazorn
