Creare uno slideshow JavaScript: la struttura HTML

Uno slideshow JavaScript è costituito da tre componenti: la struttura HTML, il layout CSS ed il comportamento JavaScript. In questo articolo vedremo la struttura HTML in dettaglio.

La struttura HTML

Il nostro slideshow deve essere navigabile anche con i CSS e JavaScript non abilitati o non supportati (come nel caso del browser Lynx). Per far ciò dobbiamo sapere quali componenti faranno parte della nostra struttura, ossia:

  1. Un contenitore esterno.
  2. Un contenitore interno (facoltativo).
  3. Gli elementi che rappresentano le slide.
  4. Un contenitore per i link della paginazione (facoltativo).
  5. Due bottoni per le azioni "Precedente" e "Successivo" (facoltativi).

I componenti 2, 4 e 5 sono facoltativi perché:

  • Le slide possono essere inserite in un contenitore singolo. Questa scelta è frequente negli slideshow che usano un effetto di dissolvenza/assolvenza.
  • La paginazione ed i bottoni delle azioni possono essere omessi se lo slideshow è automatico.

Ecco una possibile struttura HTML:


<div class="slider" id="main-slider"><!-- contenitore esterno -->
	<div class="slider-wrapper"><!-- contenitore interno -->
		<div class="slide">...</div><!-- slide -->
		<div class="slide">...</div>
		<div class="slide">...</div>
	</div>
	<div class="slider-nav"><!-- "Precedente" e "Successivo"  -->
		<button class="slider-previous">Precedente</button>
		<button class="slider-next">Successivo</button>
	</div>
</div>

Si raccomanda di usare delle classi sugli elementi degli slideshow perché possono esserci più slideshow sulla stessa pagina. Per identificare univocamente uno slideshow possiamo usare un ID sul contenitore esterno.

Usiamo due elementi button perché usare dei link HTML non avrebbe senso in quanto non punterebbero a nulla di esistente e perché la loro funzione è unicamente a livello di scripting.

Se il vostro slideshow contiene solo immagini, potete modificare la struttura come segue:


<div class="slider" id="main-slider"><!-- contenitore esterno -->
	<div class="slider-wrapper"><!-- contenitore interno -->
		<img src="image1.jpg" alt="First" class="slide" /><!-- slide -->
		<img src="image2.jpg" alt="Second" class="slide" />
		<img src="image3.jpg" alt="Third" class="slide" />
	</div>
	<div class="slider-nav"><!-- "Precedente" e "Successivo" -->
		<button class="slider-previous">Precedente</button>
		<button class="slider-next">Successivo</button>
	</div>
</div>

Non dimenticate di aggiungere un attributo alt significativo per le immagini. Ricordate che il nostro slideshow deve essere sempre accessibile.

Per usare i link della paginazione potete usare la seguente struttura:


<div class="slider" id="main-slider"><!-- contenitore esterno -->
	<div class="slider-wrapper"><!-- contenitore interno -->
		<div class="slide" id="slide-1">...</div><!-- slide -->
		<div class="slide" id="slide-2">...</div>
		<div class="slide" id="slide-3">...</div>
	</div>
	<div class="slider-nav"><!-- link di paginazione -->
		<a href="#slide-1">1</a>
		<a href="#slide-2">2</a>
		<a href="#slide-3">3</a>
	</div>
</div>

Ogni link della paginazione deve puntare ad una slide per mezzo dell'ancora impostata nell'attributo href che corrisponde ad uno specifico ID (accessibilità). In WordPress il codice è il seguente:


<div class="slider" id="main-slider">
<?php
$slides = new WP_Query( array( 'post_type' => 'slides', 'posts_per_page' => -1 ) );

if( $slides->have_posts() ) {
?>

	<div class="slider-wrapper">
<?php

	$total_slides = $slides->post_count;
	$count = 0;
	
	while( $slides->have_posts() ) {
		$count++;
		$slides->the_post();
	?>
		<div class="slide" id="slide-<?php echo $count;?>">...</div>
		
	<?php	
	}
	wp_reset_query();
	?>
	</div>
	
	<div class="slider-nav">
		<?php
			for( $i = 0; $i < $total_slides; $i++ ) {
				$n = $i + 1;
		?>
			<a href="#slide-<?php echo $i;?>"><?php echo $n; ?></a>
		<?php		
			}
		?>
	</div>
<?php
}
?>
</div>

La procedura è la stessa anche se non usate WordPress: due loop adiacenti.

Conclusione

La struttura HTML di uno slideshow è fondamentale perché da essa dipendono direttamente le scelte fatte a livello di layout CSS e di codice JavaScript.

Torna su