®Eureka web - Agenzia di sviluppo web in Asti

Carosello immagini in codice html

Ciao, In questa guida ti fornirò il codice Html per creare uncarosello di 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

Lista numerata Html

Iniziamo subito! Ecco il codice Html della tua lista

<div class="ekw_icon_list_container">
<div class="ekw_box_icon_circle">
<span>1</span>
</div>
<div>
<span>Primo elemento della tua fantastica lista realizzata in Html</span>
</div>

<div class="ekw_box_icon_circle">
<span>2</span>
</div>
<div>
<span>Secondo elemento della tua fantastica lista realizzata in Html</span>
</div>
</div>

ti basterà copiare ed incollare gli elementi della lista e cambiare i tag <span>

Lista numerata CSS

Vediamo ora il codice CSS della tua lista di elementi:

.ekw_icon_list_container {
padding: 16px;
background-color: #FFFFFF;
border: 4px solid #E5E5E5;
border-radius: 30px;
box-shadow: 0px 0px 10px 4px #E5E5E5;
-webkit-box-shadow: 0px 0px 10px 4px #E5E5E5;
-moz-box-shadow: 0px 0px 10px 4px #E5E5E5;
margin-bottom: 8px;
display: inline-grid;
grid-template-columns: 80px auto;
align-items: center;
width: 100%;
}
.ekw_box_icon_circle {
width: 50px;
height: 50px;
border: 4px solid #B12CFF;
border-radius: 50%;
display: grid;
align-items: center;
}
.ekw_box_icon_circle >* {
display: block;
text-align: center;
}

Lista numerata php

vediamo la funzione php per creare liste di elementi dinamiche

<?php
$elem = ["Primo elemento della tua fantastica lista realizzata in Html",
         "Secondo elemento della tua fantastica lista realizzata in Html"
        ];

for ($i=0; $i < count($elem); $i++) {
  ?>
  <div class="ekw_icon_list_container">
    <div class="ekw_box_icon_circle">
      <span><?php echo $i+1?></span>
    </div>
    <div>
      <span><?php echo $elem[$i]; ?></span>
    </div>
  </div>
  <?php
}
?>

ed ora lo Shortcode per WordPress!

Lo trovi interessante?

Metti like alla nostra pagina per non perderti tutti i nostri aggiornamenti!


Shortcode per WordPress

ed ora lo Shortcode per WordPress!

Usa lo shortcode

ekw_icons_list elements=”Primo elemento@@Secondo elemento”

Per inserire elementi della tua lista ti basterà elencarli all’interno del tag elements=”” separandoli da due chiocciole in questo modo: elements=”Primo elemento @@ Secondo elemento”]

ecco la funzione:

<?php
function ekw_icon_list_shortcode($elements) {
  extract( shortcode_atts( array('elements' => false), $elements ) );

$elem = explode('@@', $elements);
?>
<?php
for ($i=0; $i < count($elem); $i++) {
  ?>
  <div class="ekw_icon_list_container">
    <div class="ekw_box_icon_circle">
      <span><?php echo $i+1?></span>
    </div>
    <div>
      <span><?php echo $elem[$i]; ?></span>
    </div>
  </div>
  <?php
}
}
add_shortcode ('ekw_icons_list', 'ekw_icon_list_shortcode');
 ?>

Domande?

Siamo felici di risponderti!

Chiudi il menu