Carosello immagini in HTML – shortcode per WordPress

In questa guida ti fornirò il codice per creare un carosello immagini in codice Html, Css e Javascript. Ti metterò a disposizione anche il codice Php per inserirlo nei tuoi progetti WordPress.

Se usi WordPress sei nel posto giusto! Troverai anche lo shortcode già pronto con le istruzioni per inserirlo nel tuo sito WordPress.

Iniziamo subito! Ecco il codice Html del tuo carosello:

Ecco il risultato finale:

keyboard_arrow_left keyboard_arrow_right

Ecco il tuo carosello immagini in codice html: la struttura è molto semplice e potrei personalizzarla a piacimento con il CSS

 <!-- Icone Googe Material Design -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="ekw_carousel_01" class="ekw_carousel_container" style="width:100%; height: 400px;">
   <div data-animation="400" data-id="ekw_carousel_01" class="ekw_control_container" >
     <span data-direction="sx" class="material-icons">keyboard_arrow_left</span>
     <span data-direction="dx" class="material-icons" style="right: 0" >keyboard_arrow_right</span>
   </div>
   <div class="ekw_content_container">
<div>
   <img src="https://www.il-tuo-sito.it/la-tua-immagine.jpg">
</div>
<div>
  <img src="https://www.il-tuo-sito.it/la-tua-immagine.jpg">
</div>
<div>
  <img src="https://www.il-tuo-sito.it/la-tua-immagine.jpg">
</div>
   </div>
</div>

Ricordati di:

1 – Installare le librerie delle icone, io utilizzo Google Material Design

2 – Creare un contenitore principale con classe “ekw_carousel_container” e id a tua scelta

3 – Impostare un’altezza del carosello.

4 – Impostare la classe “ekw_control_container” al contenitore dei comandi

5 – creare un contenitore con la classe “ekw_content_container” ed inserire lì le tue immagini

Potrai cambiare la durata della transizione direttamente dall’ Html, impostando l’attributo “data-animation” (solo il numero in millisecondi)

Vediamo ora il codice CSS. Puoi modificare colori, font e qualsiasi altro stile ma ti consiglio di non modificare i tag overflow, position e display per non incorrere in errori.

 .ekw_carousel_container {
  position: relative;
  overflow: hidden;
}
.ekw_control_container {
  position: relative;
  height: inherit;
  z-index: 2;
}
.ekw_control_container >* {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex!important;
  align-items: center;
  transition: all 0.6s;
  text-shadow: 1px 1px #000000;
  color: white;
  font-size: 40px!important;
}
.ekw_control_container >*:hover {
  background-color: #ffffffc9;
  text-shadow: 1px 1px #000000;
  color: black;
}
.ekw_content_container {
  position: absolute;
  top: 0;
  height: inherit;
  width: inherit;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
}
.ekw_content_container >* {
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ekw_content_container img{
  margin: auto;
  width: 100%;
}

 jQuery.noConflict();
     jQuery(document).ready(function($) {
     $(".ekw_control_container >*").click(function() {
       ekw_moove_carousel($(this));
       $(".ekw_control_container >*").css("pointer-events", "none");
       setTimeout(function() {
         $(".ekw_control_container >*").css("pointer-events", "visible");
       }, Number($(this).parent().data("animation")) + 1);
     });

 function ekw_moove_carousel(elem) {
  var dir = elem.data("direction");
  var id = elem.parent().data("id");
  var animation_duration = Number(elem.parent().data("animation"));
  var width = $("#" + id).css("width");
  var left = $("#" + id + "> .ekw_content_container").css("left");
  var pos = Number(left.replace("px", ""));
  var shift = Number(width.replace("px", ""));
  var num_elem = $(".ekw_content_container >*").length;

  if (dir == "sx" && left!= "0px") { /* se si muove a sinistra */
 $("#" + id + "> .ekw_content_container").animate({
 "left" : (pos + shift) + "px",
 }, animation_duration);
  }
  if (dir == "dx" && left!= (-shift*(num_elem - 1)) + "px") { /* se si muove a destra */
    $("#" + id + "> .ekw_content_container").animate({
      "left" : (pos - shift) + "px",
    }, animation_duration);
  }
}
   });

Ricordati di:

1 – installare le librerie jQuery prima di caricare lo script

Perché non dai un’occhiata a questa guida su come installare correttamente jQuery in WordPress? Se il tuo sito web non riconosce l’alias $ di jQuery questa guida è la soluzione!

Se vuoi usare il tuo carosello su wordpress copia ed incolla il seguente codice nel tema child del tuo sito web tuo sito web!

Perché non dai uno sguardo a come creare correttamente uno shortcode per WordPress?

[ekw_carousel images="https://www.il-tuo-sito.it/la-tua-immagine.jpg, https://www.il-tuo-sito.it/la-tua-immagine.jpg, https://www.il-tuo-sito.it/la-tua-immagine.jpg"]

Per inserire immagini nel tuo carosello ti basterà elencarli all’interno del tag images=”” separandoli da una virgola e uno spazio in questo modo: images=”Prima immagine, Seconda immagine”

Questo shortcode richiede anche i parametri:

1 – animation=”400″ indica la durata dell’animazione, deve essere un numero espresso in millisecondi

2 – id=”mio-id-carosello” è l’id univoco del carosello. Serve ad evitare conflitti con due caroselli nella stessa pagina. È obbligatorio e deve essere univoco

3 – height=”400px” valore di altezza del carosello per la visualizzazione desktop

4 – mobile-height=”250px” // valore di altezza del carosello per la visualizzazione da telefono

ecco la funzione:

<?php
function ekw_carousel_shortcode($attr) {
  ob_start();
  $a = shortcode_atts(
       array(  'images' => 'https://www.agenziawebeureka.it/wp-content/uploads/2020/03/Lista-d-elementi-in-codice-HTML-800x400-1.jpg',
               'animation' => '400',
               'id' =>  'ekw_carousel_01',
               'height' =>  '400px',
               'mobile-height' => '250px'
             ), $attr );

$img = explode(', ', $a['images']);
if (!wp_is_mobile()) {  $height = $a['height']; }
else { $height = $a['mobile-height']; }

 ?>
  <div id="<?php echo $a['id']; ?>" class="ekw_carousel_container" style="width:100%; height: <?php echo $height; ?>;">
    <div data-animation="<?php echo $a['animation']; ?>" data-id="<?php echo $a['id']; ?>" class="ekw_control_container" >
      <span data-direction="sx" class="material-icons">keyboard_arrow_left</span>
      <span data-direction="dx" class="material-icons" style="right: 0" >keyboard_arrow_right</span>
    </div>
    <div class="ekw_content_container">
     <?php
       for ($i=0; $i < count($img); $i++) {
       // Inserisci qui il tuo contenuto
     ?>
       <div>
         <img src="<?php echo $img[$i]; ?>">
       </div>
     <?php } ?>
   </div>
  </div>
  <?php
  $content = ob_get_clean();
  return $content;
  }
  add_shortcode ('ekw_carousel', 'ekw_carousel_shortcode');
  ?>