faire apparaître un carousel en ajoutant du code dans le module bloc de texte

[prestaprojet]

Bonjour,

Prestashop 1.7

Je souhaite ajouter du code dans le bloc de text afin d'avoir un carousel.

J'ai donc utiliser ce code de ce tuto : https://www.pierre-giraud.com/bootstrap-apprendre-cours/carrousel/

 <div class="container">
      <h1>Carrousel</h1>
      <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- Indicateurs -->
        <ul class="carousel-indicators">
          <li data-target="#demo" data-slide-to="0" class="active"></li>
          <li data-target="#demo" data-slide-to="1"></li>
          <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- Carrousel -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://www.pierre-giraud.com/bootstrap-carrousel-slide-1.jpg" alt="Carrousel slide 1" class="d-block w-100">
            <div class="carousel-caption d-none d-md-block">
              <h4>Titre de la légende</h4>
              <p>Légende de la slide n°1.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://www.pierre-giraud.com/bootstrap-carrousel-slide-2.jpg" alt="Carrousel slide 2" class="d-block w-100">
            <div class="carousel-caption d-none d-md-block text-dark">
              <h4>Titre de la légende</h4>
              <p>Légende de la slide n°2.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://www.pierre-giraud.com/bootstrap-carrousel-slide-3.jpg" alt="Carrousel slide 3" class="d-block w-100">
            <div class="carousel-caption d-none d-md-block">
              <h4>Titre de la légende</h4>
              <p>Légende de la slide n°3.</p>
            </div>
          </div>
        </div>

        <!-- Contrôles -->
        <a class="carousel-control-prev" href="#demo" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Précédent</span>
        </a>
        <a class="carousel-control-next" href="#demo" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Suivant</span>
        </a>
      </div>
    </div>

Cependant le carousel reste sur la première image et ne s'enclenche pas.

Selon vous que peut-il bloquer le fonctionnement du carousel ?

Merci d'avance pour votre aide

:-)

[Eolia]

ce n'est pas possible comme ça, pour 2 raisons:

- ce code est valable si vous l'insérez directement dans le tpl ou le html d'une page. Si vous passez par l'éditeur Prestashop, une partie des balises va être supprimée car inconnues.

- Presta 1.7 n'utilise pas bootstrap

[prestaprojet]

Bonjour Eolia,

Merci pour votre réponse

Du coup, il faudrait insérer ce code dans l'index.tpl

situé à l'adresse

\themes\child_classic\templates\index.tpl ?

en ajoutant :

{block name='xxx'}

.......le code du carousel

 {/block}

Existe-t-il svp un tuto qui expliquerai la méthode et démarche à suivre pour y arriver ?

Merci d'avance pour votre aide

:-)

[Mediacom87]

Le carrousel (slider) de base de PrestaShop ne vous convient pas ?

[prestaprojet]

Bonjour Mediacom87,

Si, le carrousel natif est déjà utilisé et j'aimerais en installer un autre.

Y-a-t-il svp une solution ou un tuto de dispo pour arriver à ce but ?

Merci d'avance pour votre aide

🙂

[prestaprojet]

Bonjour,

Du coup, j'ai utilisé un module gratuit qui à ce lien :

 

Mais je serais aussi intéressé par être orienté pour la réalisation d'un caroussel en modifiant le fichier tpl et html comme tu l'évoques Eolia ; 

Si vous avez une méthodologie ou tuto à me présenter pour le réaliser j'en serai très heureux

Merci d'avance pour votre aide

:-)