Slider responsivo - bxSlider,esempi e configurazione nel detaglio

Plugin bxSlider - e uno slaider responsiv basato su jQuery. Il grande numero di impostazioni consente di adattare lo slaider per le esigenze specifiche di qualsiasi progetto. In questo articolo li vediamo tutti nei minimi detagli.

 Carosello bxslaider nel detaglio pronto per il uso.

Vorrei far notare che questo slaider è uno dei piu popolari inseriti in varie template di WP. La pagina ufficiale viene visitata da piu di 300 milla utenti al mese.

Vantaggi:

Si adatta a qualsiasi dispositivo è responsivo.

Le diapositive della galeria scorono sia in orizzontale che in verticale, presente anche l'effeto di dissolvenza (fade)

Le diapositive possono contenere immagini, video o qualsiasi html-content.

Funziona su schermi touch screen.

 Per ulteriori informazioni visitate la pagina ufficiale dello slaider.

Per cambiare le diapositive sono utilizzate CSS-transizioni, che permette di sfrutare l'accelerazione del hardware

Possibilità completa di modificare interfaccia (API ) dello slaider e suoi metodi (before, after, first, last, next, prev )

Un buon supporto in varie browser: Firefox, Chrome, Safari, iOS, Android, IE7 +

1. Come installare slider

Passo 1: Aggiungere collegamenti a file necessari

Scarica il file d'archivio dal sito ufficiale. Crea una cartella sul server con il nome del plugin, per esempio, bxslider. Caricare in essa  jquery.bxslider.min.js e jquery.bxslider.css. Per usare il plugin, aggiungere nella sezione head riferimenti a file nel seguente ordine:

1)  riferimento alla libreria jQuery;

2) riferimento al file dello script jquery.bxslider.min.js;

3) riferimento a un file di stili jquery.bxslider.css. Collegare foglio di stile nel caso in cui non modificherete l'aspetto dello slaider! Cio è non utilizerete i stili proprie. Nei esempi dello slaider sotto non ho collegato i stili nativi perche ho usato proprie.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="/cartella/jquery.bxslider.min.js"></script>
<link href="/cartella/jquery.bxslider.css" rel="stylesheet">

Al posto di “cartella” indicare il percorso reale al file sul server.

Se si aggiunge del video o vverano utilizati collegamenti ad altre fail o pagine , allora avrete bisogno di altre due file dalla cartella plugin scaricata: jquery.easing.1.3.js e jquery.fitvids.js.

Passo 2. Creare markup html per slaider

Creare un elenco puntato con classe bxslider. Ogni elemento della lista è una diapositiva. Come contenuto della diaposuitiva può essere una foto, video o altro HTML-contenuto.

<ul class="bxslider">
<li><img src="/images/pic1.jpg"></li>
<li><img src="/images/pic2.jpg"></li>
<li><img src="/images/pic3.jpg"></li>
<li><img src="/images/pic4.jpg"></li>
</ul>

Passo 3. Richiamare bxslider

Per far funzionare il nostro slaider dobbiamo con aiuto di jQuery richiamare la funzione bxslider () per il nostro elenco  <ul class = "bxslider"> .

<script>$(document).ready(function(){
$('.bxslider').bxSlider();
});</script>

2. Impostazioni di slider

Slider  è un elemento che ha delle proprietà e le loro possibili valori. Alcune proprietà sono già attivati al momento di l'inizializzazione (chiamata) dello slaider. Pertanto, per modificare l'aspetto o modo di funzionamento del nostro caroselo posiamo tramite l'abolizione di alcune proprietà o aggiungendone di nuovi.

Ad esempio, captions: false significa che le sotoscrizioni alle diapositive sono disabilitate per default. Per aggiungere le scritte per le diapositive, è necessario impostare captions: true.  Clicca sotto sulla voce che ti interessa per aprire spoiler con informazioni detagliate.

Per ogni proprietà, il primo valore - il valore di default e nella seconda riga elencati tutte le possibili opzioni per questa proprieta.

mode- il tipo di transizione tra le diapositive.

mode: 'horizontal'
opzioni : 'horizontal', 'vertical', 'fade'

speed -la velocità di cambio di diapositive

speed: 500
opzioni: una cifra intera

startSlide — indice della prima diapositiva (comincia da zero).

startSlide: 0
opzioni: qualsiasi cifra intera

randomStart — lo slaider inizia da qualsiasi diapositiva .

randomStart: false
opzioni: true o false

slideSelector — aggiunge un elemento contenitore che usato come uno slaider .

slideSelector: ''
opzioni: seletore jQuery

infiniteLoop — se impostato su true, quando si fa clic sul pulsante Next(Avanti )esendo all'ultima diapositiva, sarà effettuatopassagio alla prima diapositiva, e viceversa.

infiniteLoop: true
opzioni: true o false

hideControlOnEnd — se impostato su true , pulsante Next (Avanti) verrà nascosto al'ultima diapositiva, e viceversa.

hideControlOnEnd: false
opzioni: true e false

easing — il tipo di transizione tra le diapositive. Se si utilizzano CSS-transizioni, vera utilizato transition-timing-function . Se CSS-transizioni non si utilizzano, si possa collegare il plugin easing.

easing: null
opzioni:se si utilizzano I CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'.
se si utilizza il plugin easing: 'swing', 'linear' e cosi via .

captions — aggiungere didascalie per le immagini. Il testo viene preso dal valore del atributo title.

captions: false
opzioni: true o false

ticker - esecuzione linea di diapositive.

ticker: false
opzioni: true o false

tickerHover — ferma lo scorimento di diapositive al passagio del mouse. Non funziona se si utilizzano CSS-transizioni..

tickerHover: false
opzioni: true o false

adaptiveHeight — regolazione dinamica dell'altezza dello slaider a seconda d'altezza di ciascuna diapositiva.

adaptiveHeight: false
opzioni: true o false

adaptiveHeightSpeed — la durata della transizione, in millisecondi, alla regolazione dinamica dell'altezza dello slaider, funziona solo per adaptiveHeight: true.

adaptiveHeight: 500
opzioni: qualsuiasi numero intero

video — Se una diapositiva contiene un video ipostate video:true. Colegate anche il plugins/jquery.fitvids.js.

video: false
opziono: true o false

responsive — abilita o disabilita la capacità di adattamento allo scermo dello slaider.

responsive: true
opzioni: true o false

useCSS — si ipostato su true, per animazione orizontale o verticle di diapositive saranno utilizzati css transizioni. Nel caso contrario colegare plugin easing.

useCSS: true
opzioni: true o false

preloadImages — se imostato su preloadImages:'all', tutte le immagini saranno caricati prima di inizio dello scorimento dello slaider.Nel caso contrario sara caricata prima del inizio solo la prima immagine.

preloadImages: visible
opzioni: 'all', 'visible'

touchEnabled — Si abilita e disabilita lo scorrimento dello sclaider con il dito per touch screen.

touchEnabled: true
opzioni: true o false

swipeThreshold — quantità di pixel, superamento del quale eseguirà la transizione di diapositive..

swipeThreshold: 50
opzioni: qualsiasi numero intero

 oneToOneTouch — se ipostato su true, diapositive , che non utilizzano dissolvenza, si muoveràno dietro il dito.

oneToOneTouch: true
opzioni: true o false

preventDefaultSwipeX — se ipostato su true, il touch screen non si muovera lungo l'asse X allo scsorrimento delle diapositive con le dita.

preventDefaultSwipeX: true
opzioni: true o false

preventDefaultSwipeY — se ipostato su true, il touch screen non si muovera lungo l'asse Y allo scsorrimento delle diapositive con le dita.

preventDefaultSwipeY: false
opzioni: true o false 

pager se è impostato su true . verrà visualizzata la barra di quantità di diapositive

pager: true
opzioni: true o false

pagerType — se è impostso pagerType: 'full', il contatore avra dei colegamenti numerici ad ogni diapositiva, se impoststo su 'short'allora la scritta avra questo aspetto 1/5.

pagerType: 'full'
варианты: 'full', 'short'

pagerShortSeparator — tipo di divisione dei numeri per pagerType:'short'.

pagerShortSeparator: ' / '
opzionio :qualsiasi simbolo

pagerSelector - registra l'elemento contenitore con la classe specificata o identificatore che contiene il contatore.

pagerSelector: ''
opzioni: seletore jQuery

pagerCustom - l'elemento genitore utilizzato come contatore. Deve contenere <a data-slide-index="x"> per ogni diapositiva. Non viene utilizzato per carosello dinamico.

pagerCustom: null
opzioni: seletore jQuery

buildPager - se impostato, la funzione viene richiamata per ogni diapositiva, il valore restituito viene usato come un mini-sketch nel contatore.

buildPager: null
opzioni: function(slideIndex)

controls — se impostato  true, srano mostrati elemneti di gestione  Next / Prev.

controls: true
opzioni: true o false

nextText -testo utilizzato per pulsante Next.

nextText: 'Next'
opzioni: una stringa di simboli

prevText -testo utilizzato per pulsante Prev.
prevText: 'Prev'
opzioni: una stringa di simboli

nextSelector -elemento contenitore per il pulsante Next.
nextSelector: null
opzioni: seletore jQuery 

prevSelector -elemento contenitore per il pulsante Prev.
prevSelector: null
opzioni: seletore jQuery 

autoControls -se impostato true, verràno aggiunti pulsanti start / stop.
autoControls: false
opzioni: true o false

startText- testo che verrà utilizzato per il pulsante di Start.

startText: 'Start'
opzioni: una stringa di simboli

stopText -testo che verrà utilizzato per il pulsante di Stop.
stopText: 'Stop'
opzioni: una stringa di simboli

autoControlsCombine -Quando lo slaidshov è in esecuzione, verrà visualizzato solo il pulsante di Stop, o viceversa.

autoControlsCombine: false
opzioni: true o false

autoControlsSelector -elemento contenitore per i pulsanti Start / Stop.
autoControlsSelector: null
opzioni: seletore jQuery 

Auto - regola il cambio automatico di diapositive.

auto: false
opzioni: true o false

pause-la quantità di tempo in millisecondi tra ogni transizione.

pause: 4000
opzioni: qualsiasi numero intero

autoStart -cambio automatico di diapositive a partire dal caricamento dello slaider. Se impostato su  false, lo slaider inizierà  funzionare quando si preme il pulsante Start.

autoStart: true
opzioni: true o false

autoDirection -la direzione dello scambio diapositive (dal inizio o dalla fine).

autoDirection: 'next'
opzioni: 'next', 'prev'

autoHover -presentazione automatica verrà interrotta quando si passa con il puntatore del  mouse sopra lo slaider.

autoHover: false
opzioni: true o false

autoDelay – tempo di ritardo in millisecondi  prima del inizio della presentazione

autoDelay: 0
opzioni: qualsiasi numero intero

minSlides -il numero minimo di elementi (immagini, videoo altre html ellementi )di diapositiva da visualizzare alla volta. Le diapositive saranno ridotte (rimpicciolite) se la larghezza del contenitore del carosello non permetta di visualizzare quantità min indicata delle diapositive nella loro grandezza impostata.

minSlides: 1
opzioni: qualsiasi numero intero

maxSlides -il numero massimo di elementi di diapositiva visualizzate alla vota (in una sola schermata) Le diapositive saranno ingrandite se carosello sarà  maggiore rispetto la grandezza originale di diapositive.

minSlides: 1
opzioni: qualsiasi numero intero

moveSlides -numero di elementi al interno di una  diapositiva che si spostano simultaneamente al cambio di una  diapositiva. Il numero deve essere maggiore o uguale a minSlides e inferiore o pari maxSlides. Per impostazione predefinita, il numero di elementi nella diapositiva e uguale alla quantità di essi che ci stanno senza deformazione.

moveSlides: 0
opzioni: qualsiasi numero intero

slideWidth -la larghezza di ciascuna diapositiva, parametro è obbligatorio per il carosello.

slideWidth: 0
opzioni: qualsiasi numero intero

 

 

 

3. Esempi di configurazione e decorazione dello slaider(carosello).

Il foglio di stile del plug-in dal archivio propone  l'aspetto monotono e semplicita del cursore. Poi   utilizzare le opzioni qui sotto o sperimentare con le proprie  per decorare il vostro slaider. Per realizare lo slaider responsivo dobimo inserirlo in un blocco div per esempio  con una larghezza relativa indicata in% . Per disattivare testo sui tasti di Next e Prev, lasciare lo spazio fra le virgolette vuoto nel  nextText: “ '', prevText: “''.

3.1. Slaider con controlli personalizzati.

 

Markup HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://vostro sito o cartella /bxSlider/jquery.bxslider.js"></script>
<script>$(document).ready(function(){
  $('.bxslider').bxSlider({
  pager: false, // eliminiamo indicatore quantita diapositive 
  nextText: '', // eliminiamo testo dal tasto  Next
  prevText: '' // eliminiamo testo dal tasto Prev
  });
});</script>
<ul class="bxslider">
  <li><img src="http://la cartella delle imagini per slaider /flower-example-10.jpg" /></li>
  <li><img src="http://la cartella delle imagini per slaider/flower-example-9.jpg" /></li>
  <li><img src="http://la cartella delle imagini per slaider/flower-example-3.jpg" /></li>
  <li><img src="http://la cartella delle imagini per slaider/flower-example-5.jpg" /></li>
</ul>

Stili CSS

* {
 box-sizing: border-box;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-wrapper {
  width: 440px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.bx-prev, .bx-next {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  position: absolute;
  z-index: 3;
  bottom: 20px;
  right: 70px;
  border-radius: 3px;
  background: white;
  text-decoration: none;
  outline: none;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.bx-next {
  right: 20px;
}
.bx-prev:before, .bx-next:before {
  font-size: 16px;
  color: #9a9a9a;
  font-family: "FontAwesome";
}
.bx-prev:before {
  content: "\f104";
}
.bx-next:before {
  content: "\f105";
}

3.2. Slideshow di immagini con didascalie

markup HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://cartella del vostro sito /bxSlider/plugins/jquery.easing.1.3.js"></script>
<script src="http://cartella del vostro sito/bxSlider/jquery.bxslider.js"></script>
<script>$(document).ready(function(){
$('.bxslider').bxSlider({
   pager: false,
   captions: true,
   nextText: '',
   prevText: '',
   useCSS: false,
   easing: 'jswing',
   speed: 500
   });
});</script>
<ul class="bxslider">
  <li><img src="http://la vostra cartella d' immagini dello slaider/flower-example-10.jpg" title="Fiore"/></li>
  <li><img src="http://la vostra cartella d' immagini dello slaider/flower-example-9.jpg" title="Seconda diapositiva" /></li>
  <li><img src="http://la vostra cartella d' immagini dello slaider/flower-example-3.jpg" title="Mazzo di fiori" /></li>
  <li><img src="http://la vostra cartella d' immagini dello slaider/flower-example-5.jpg" title="Rame di ciliegi" /></li>
</ul>

Stili CSS

* {
 box-sizing: border-box;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-wrapper {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.bx-prev, .bx-next {
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  border: 1px solid rgba(255,255,255,0.7);
  color: rgba(255,255,255,0.7);
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  text-align: center;
  border-radius: 50%;
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  z-index: 10;
  cursor: pointer;
}
.bx-prev:hover, .bx-next:hover, .bx-prev:active, .bx-next:active {
  background: #6BA7BD;
  border-color: #6BA7BD;}
.bx-prev {
  left: 20px;
}
.bx-next {
  right: 20px;
}
.bx-prev:before, .bx-next:before {
  font-family: "FontAwesome";
}
.bx-prev:before {
  content: "\f104";
}
.bx-next:before {
  content: "\f105";
}
.bx-caption {
  position: absolute;
  width: 50%;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: ease-in-out .3s;
  transition: ease-in-out .3s;
  padding: 2em;
  background: rgba(255,255,255,.9);
  z-index: 2;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Comfortaa', cursive;
}

3.3. Carosello con controlli che appaiono.

 

markup HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://vostro sito/bxSlider/plugins/jquery.easing.1.3.js"></script>
<script src="http://vostro sito/bxSlider/jquery.bxslider.js"></script>
<script>$(document).ready(function(){
$('.bxslider').bxSlider({
   nextText:'',
   prevText:'',
   useCSS: false,
   easing: 'jswing',
   speed: 500
   });
});</script>
<ul class="bxslider">
  <li><img src="http://vostro sito/flower-example-10.jpg" /></li>
  <li><img src="http://vostro sito/flower-example-9.jpg" /></li>
  <li><img src="http://vostro sito/flower-example-3.jpg" /></li>
  <li><img src="http://vostro sito/flower-example-5.jpg" /></li>
</ul>

Stili CSS

* {box-sizing: border-box;}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bx-wrapper {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
.bx-pager {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
.bx-pager-item {
  display: inline-block;
}
.bx-pager-link {
  text-indent: -9999px;
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  outline: 0;
  border: 2px solid white;
  border-radius: 50%;
}
a.active {
  background: #DBF26A;
}
.bx-prev, .bx-next {
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top:-25px;
  background:white;
  color: #666;
  width: 50px;
  height: 50px;
  opacity:0;
  text-align: center;
  -webkit-transition: linear .4s;
  transition: linear .4s;
  z-index: 10;
  cursor: pointer;
}
.bx-wrapper:hover .bx-prev, .bx-wrapper:hover .bx-next, .bx-wrapper:hover .bx-prev:active, .bx-wrapper:hover .bx-next:active {
  opacity: 1;
}
.bx-prev {
  left: 20px;
}
.bx-next {
  right: 20px;
}
.bx-prev:before, .bx-next:before {
  font-family: "FontAwesome";
  font-size: 30px;
  line-height: 50px;
}
.bx-prev:before {
  content: "\f104";
}
.bx-next:before {
  content: "\f105";
}

3.4. Carosello con le miniature.

markup HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://vostro sito/bxSlider/jquery.bxslider.js"></script>
<script>$(document).ready(function(){
$('.bxslider').bxSlider({
   nextText: '',
   prevText: '',
   pagerCustom: '#bx-pager'
});
});</script>
<div class="slider">
<ul class="bxslider">
  <li><img src="http://vostro sito /flower-example-10.jpg"/></li>
  <li><img src="http://vostro sito/flower-example-9.jpg"/></li>
  <li><img src="http://vostro sito/flower-example-3.jpg"/></li>
  <li><img src="http://vostro sito/flower-example-5.jpg"/></li>
 </ul>
<div id="bx-pager">
  <a data-slide-index="0" href="/"><img src="http://vostro sito/flower-example-10.jpg" /></a>
  <a data-slide-index="1" href="/"><img src="http://vostro sito/flower-example-9.jpg" /></a>
  <a data-slide-index="2" href="/"><img src="http://vostro sito/flower-example-3.jpg" /></a>
  <a data-slide-index="3" href="/"><img src="http://vostro sito/flower-example-5.jpg" /></a>
</div>
</div>

Stili CSS

* {box-sizing: border-box;}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bx-wrapper {
  width: 500px;
  margin: 0 auto;
  position: relative;
}
.bx-wrapper img {
  width: 100%;
  max-width: 100%;
  display: block;
}
#bx-pager {
  margin-top: 20px;
  text-align: center;
}
#bx-pager a {
  margin: 0 3px;
}
#bx-pager a img {
  padding: 3px;
  border: 1px solid #ccc;
  width: 80px;
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}
#bx-pager a.active img {
  border: 1px solid #D4104E;
}
.bx-prev, .bx-next {
  text-decoration: none;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  background: white;
  color: #666;
  width: 30px;
  height: 80px;
  text-align: center;
  -webkit-transition: linear .4s;
  transition: linear .4s;
  z-index: 10;
  cursor: pointer;
}
.bx-prev {
  left: 0px;
  border-radius: 0 5px 5px 0;
}
.bx-next {
    right: 0px;
  border-radius: 5px 0 0 5px;
}
.bx-prev:before, .bx-next:before {
  font-family: "FontAwesome";
  font-size: 30px;
  line-height: 80px;
}
.bx-next:before {
  content: "\f105";
}
.bx-prev:before {
  content: "\f104";
}

 

Letto 1157 volte