Se provate ad usare i metodi width()
, outerWidth()
, innerWidth()
di jQuery sulle slide di uno slideshow fluido otterrete 0
come risultato. Ed anche l'oggetto restituito dal metodo JavaScript getBoundingClientRect()
mostrerà 0
per la proprietà width
. Questo perché gli slideshow fluidi non sono come gli altri slideshow.
Consideriamo le seguenti regole CSS:
body {
margin: 0;
padding: 0;
}
#slider {
margin: 2em auto;
max-width: 960px;
overflow: hidden;
}
#slides {
margin: 0;
padding: 0;
list-style: none;
max-height: 300px;
width: 30000px; /* Sovrascritto da jQuery */
position: relative;
}
#slides li {
float: left;
max-width: 960px;
position: relative;
max-height: 300px;
display: block;
}
Dato che la larghezza delle slide non è impostata esplicitamente ma ricavata dalla differenza tra lo spazio orizzontale totale e lo spazio massimo occupato dalle slide, dobbiamo seguire un approccio diverso, ossia:
var setWidth = function( element ) {
var $slides = $( options.slides, element ),
total = 0,
$wrapper = $( options.wrapper, element );
$slides.each(function() {
var bounding = this.getBoundingClientRect();
var left = bounding.left;
var right = bounding.right;
var bodyWidth = $( "body" ).width();
var totalWidth = bodyWidth - ( left + right );
total += totalWidth;
});
$wrapper.width( total );
};
Abbiamo sottratto la somma degli offset orizzontali delle slide dalla larghezza della pagina. Potete vedere l'esempio ed il codice completo in questa pagina.