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

Fabio Fresia, fondatore e titolare di Eureka Web di Asti

perm_device_information366 - 400 9542       emailinfo@agenziawebeureka.it

perm_identity
alternate_email
phonelink_ring
message

Scopri anche:

Come aumentare visite e guadagni sul tuo blog?

come aumentare le visite sul tuo blog

Come aumentare le visite sul blog? 5 consigli fondamentali per aumentare visite, guadagni e reputazione del blog dopo il Coronavirus

Scopri di più

Come installare WordPress in 4 passaggi per realizzare il tuo sito web

Come installare Wordpress in 4 passaggi per realizzare gratis il tuo sito web? Guida completa anche sulla configurazione database

Scopri di più

I colori giusti per arredare il tuo locale

Quali colori uso per arredare il mio locale? Se hai un bar, ristorante o un'azienda, scegliere i giusti colori è fondamentale!

Scopri di più

Come creare shortcode per WordPress senza errori

come Creare shortcode per Wordpress senza errori

Come creare uno shortcode per Wordpress senza errori? Gli shortcode sono lo strumento giusto per il tuo codice personalizzato!

Scopri di più

Stile grafico di un sito web qual’è quello giusto

stile grafico sito web agenzia web Eureka

Qual'è il giusto stile grafico di un sito web? Lo stile grafico è importante per attirare più clienti! Quali forme e colori sono giusti?

Scopri di più

Come creare un blog gratis e guadagnare monetizzandolo

Come creare un blog gratuito e guadagnare con esso? Scopri i passaggi fondamentali per monetizzare i blog e generare entrate stabili

Scopri di più