email

Carosello immagini in HTML – shortcode per WordPress

Ti trovi in: Home » blog » Programmazione » Carosello immagini in HTML – shortcode per WordPress

Carosello immagini in codice html

view_carousel

Ciao, 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.

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

view_carousel

Codice html

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)

Codice CSS

view_carousel

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%;
}
view_carousel

Codice Js

 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!

carosello immagini Html Shortcode per WordPress

view_carousel

Se vuoi usare il tuo carosello su wordpress copia ed incolla il seguente codice nelle pagine del 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');
  ?>

Contattaci!

Preventivo sempre gratuito

perm_identity
alternate_email
phonelink_ring
message

Scopri anche:

Come creare shortcode con attributi in WordPress

come creare shortcode con attributi wordpress

Come si crea uno shortcode con attributi in Wordpress? Scopri come impostare attributi personalizzati e di default per i tuoi shortcode

Scopri di più

Cos’è Google Trends: scegliere al meglio le parole chiave

cos'è Google Trends strumento per parole chiave

Google Trends: cos'è e come si usa al meglio? Ottimo strumento gratuito di Google per la scelta delle migliori parole chiave per il tuo sito

Scopri di più

Impostazione dei commenti WordPress per la privacy

importazione dei commenti wordpress per la privacy

Impostare i commenti in Wordpress in modo che rispettino la privacy dei tuoi utenti e che siano conformi al GDPR è semplice! Ti basta aprire..

Scopri di più

Cos’è Reddit, come funziona e perchè usarlo

cos'è Reddit, come funziona e perchè usarlo Eureka web

Cos'è Reddit? Scopri le potenzialità di questo inportante Social Network! Notizie, informazioni, guide e tanto altro su Reddit

Scopri di più

Come caricare il sito web sul dominio con FileZilla

come caricare sito web su dominio con Filezilla

Come caricare il sito web sul dominio? FileZilla è un semplice programma gratuito per caricare siti web sul tuo dominio web

Scopri di più

Come comprare un dominio per sito web in 5 passaggi

Come comprare un dominio? 5 semplici passaggi per comprare un dominio per il tuo sito web aziendale su Siteground, Aruba o Register

Scopri di più