jQuery: slideshow full screen

Uno slideshow full screen in jQuery non è solo uno slideshow che riempie l'intero schermo. A questo slideshow vogliamo infatti aggiungere l'effetto delle due slide laterali parzialmente visibili ai lati dello schermo. Inoltre i controlli delle slide dovranno essere centrati in orizzontale ed in verticale e rimanere sempre nella loro posizione originale. L'effetto di scorrimento muoverà le slide più esterne verso il centro e viceversa. Vediamo come realizzare questa implementazione.

Per prima cosa osserviamo uno schema di quello che vogliamo realizzare:

Quindi definiamo la nostra marcatura:

<div id="slider">

	<ul id="slider-wp">
	
		<li id="slide-prev"><img src="slide-2.jpg" alt="" /></li>
		<li id="slide-center"><img src="slide-3.jpg" alt="" /></li>
		
		<li id="slide-next"><img src="slide-4.jpg" alt="" /></li>	
	</ul>
	
	<div id="controls">
		<a href="#" id="prev">Previous</a>
		<a href="#" id="next">Next</a>
	</div>

</div>

Abbiamo le tre slide che andranno posizionate in modo assoluto a sinistra, al centro e a destra. I controlli delle slide saranno centrati orizzontalmente e verticalmente all'interno del contenitore principale, che avrà la stessa larghezza dello schermo e un'altezza definita. Avendo un'altezza definita (pari all'altezza delle slide) possiamo centrare verticalmente il contenitore principale sullo schermo:

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
}

body {
	position: relative;
}

#slider {
	width: 100%;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -200px;
}

#slider ul {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	list-style: none;
	z-index: 2;
}

#slider ul li {
	position: absolute;
	top: 0;
	width: 450px;
	height: 100%;
}

#slider ul li img {
	width: 100%;
	height: 100%;
	display: block;
}

#slider #slide-center {
	left: 50%;
	margin-left: -225px;
}


#slider #slide-prev {
	left: -225px;
}


#slider #slide-next {
	right: -225px;
}

#controls {
	width: 530px;
	height: 48px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -24px 0 0 -265px;
	z-index: 3;
}

#controls a {
	display: block;
	width: 50px;
	height: 50px;
	text-indent: -1000em;
	position: relative;
}

#controls #prev {
	float: left;
	background: url(prev.png) no-repeat;
	left: -10px;
}

#controls #next {
	float: right;
	background: url(next.png) no-repeat;
	right: -10px;
} 

Il contenitore interno delle slide e il contenitore dei controlli hanno valori di z-index diversi. Questo è dovuto al fatto che vogliamo che i contenuti delle slide non vengano nascosti dal contenitore dei controlli.

Con jQuery dobbiamo innanzitutto memorizzare i valori iniziali degli offset delle tre slide, in modo da sapere sempre qual'è la loro esatta posizione al momento dello scorrimento:

var positions = {
    prev: $('li#slide-prev').position().left,
    main: $('li#slide-center').position().left,
    next: $('li#slide-next').position().left,
    slider: $('#slider-wp').position().left
    
};
  
var offsetValues = {
  
    prev: 0,
    main: 0,
    next: 0,
    slider: 0
  
  
  
};

Ora abbiamo dei termini di paragone con cui fare in modo che i pulsanti muovano le slide verso destra o verso sinistra a seconda della loro effettiva posizione. Possiamo quindi associare un evento click ai due bottoni e comparare la posizione attuale delle slide con quella memorizzata in precedenza. In base al risultato ottenuto, il movimento di scorrimento andrà in un senso o nell'altro:

 $('#prev').click(function(e) {
  
  
    var prevPos = $('li#slide-prev').position().left;
    var sliderPos = $('#slider-wp').position().left;
    
    if(prevPos == positions.prev && sliderPos == positions.slider) {
    
    
      $('#slider-wp').animate({
        left: positions.main
      }, 'slow');
    
    } else {
    
    
      $('#slider-wp').animate({
        left: offsetValues.slider
      }, 'slow');
    
    }
  
  
    e.preventDefault();
  });
  
  $('#next').click(function(e) {
  
    var nextPos = $('li#slide-next').position().left;
    var sliderPos = $('#slider-wp').position().left;
    
    if(nextPos == positions.next && sliderPos == positions.slider) {
    
      $('#slider-wp').animate({
        left: - positions.main
        
      }, 'slow');
    
    } else {
    
      $('#slider-wp').animate({
        left: offsetValues.slider
      }, 'slow');
    
    
    }
    
    
    e.preventDefault();
  
  });

Potete visionare l'esempio finale in questa pagina.