Petit soucis pour mettre en place le "Slider style bootstrap dans WA4"

Bonjour :-)
Tout d' abord encore merci pour le tuto.
Je suis en train d' essayer de le maîtriser, mais je coince .

J' ai téléchargé le fichier Boostrap, l' ai  dézipé et mis à la racine de mon site (espace de test sur free).
J' ai ensuite collé le code que tu as donné sur le tuto, dans le head de ma page : celle-ci : ici

J' ai ensuite placé le code sans faire beaucoup de modif, je voulai juste essayer de maitriser un peu avant de me lancer, j' ai donc juste mise à la place de monimage1.jpg, 2, 3 , 4 des images test, et j' ai publié. Je n' ai pas changer le lien vers google, puisque juste un test.

Mais j' ai du zapper quelques choses, car vu le résultat, pas du tout ce que toi tu as fait, comme tu as pu le constater .
Je te transmet le code que j' ai mis dans la partie html, celui du head, je ne l' ai pas modifié du tout par rapport au tuto.

Code:

<div id="my_carousel" class="carousel slide" data-ride="carousel">
 <!-- Bulles -->
 <ol class="carousel-indicators">
 <li data-target="#my_carousel" data-slide-to="0" class="active"></li>
 <li data-target="#my_carousel" data-slide-to="1"></li>
 <li data-target="#my_carousel" data-slide-to="2"></li>
 <li data-target="#my_carousel" data-slide-to="3"></li>
 </ol>
 <!-- Slides -->
  <div class="carousel-inner">
 <!-- image 1 -->
 <div class="item active">  
 <div class="carousel-page"><a href="https://www.google.fr/" target="_blank"><img src="WA_INTERN_URL[PROMO1.jpg]" alt="" class="img-responsive" style="margin:0px auto;"/></a></div>
 <div class="carousel-caption">Mon image 1</div>
 </div>  
 <!-- image 2 -->
 <div class="item">
 <div class="carousel-page"><a href="https://www.google.fr/" target="_blank"><img src="WA_INTERN_URL[FERMETURE02.jpg]" alt="" class="img-responsive" style="margin:0px auto;"/></a></div>
 <div class="carousel-caption">Mon image 2</div>
 </div>  
 <!-- image 3 -->
 <div class="item">  
 <div class="carousel-page"><a href="https://www.google.fr/" target="_blank"><img src="WA_INTERN_URL[Image1.jpg]" alt="" class="img-responsive" style="margin:0px auto;"/></a></div>  
 <div class="carousel-caption">Mon image 3</div>
 </div>    
 <!-- image 4 -->
 <div class="item">  
 <div class="carousel-page"><a href="https://www.google.fr/" target="_blank"><img src="WA_INTERN_URL[Image2.jpg]" alt="" class="img-responsive" style="margin:0px auto;"/></a></div>  
 <div class="carousel-caption">Mon image 4</div></div>    
  </div>
 <!-- Contrôles -->
 <a class="left carousel-control" href="#my_carousel" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#my_carousel" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

Bref, je me suis trompée où à ton avis ?

Amicalement.

Bonjour Ditila et bienvenue dans le forum Ellade  

Ta page ne trouve pas les plugins a cause d'un mauvais renommage du fichier zip, balance celui que tu as téléchargé, retire de ton site celui que tu as envoyé et retourne sur le tuto recharger le fichier zip.
Mais attention tout de même tu peux avoir 2 répertoires bootstrap l'un dans l'autre selon la façon que tu utiliseras pour dézipper, envoies bien, si tu en as 2 l'un dans l'autre, celui qui contient les 3 répertoires.

@ +

Hello, me revoilà ! J' ai tout fait comme tu m'as dit !
Et le résultat ICI

Comment dire...

Si je sais : Tu es tout simplement GENIALE Je t'adore !

Un grand merci !
Amicalement Ditila.

Merci c'est sympa
J'ai vu tout fonctionne

Pour les liens ils s'ouvrent dans une nouvelle fenêtre si tu veux que ça s'ouvre dans la même fenêtre que le site, il faut retirer l'attribut target :

Code:

target="_blank"

Retirer juste ça pour chaque lien en faisant attention rien de plus rien de moins

Bonne continuation

Hello, je sais que j' ai clos le sujet :-) ça fonctionne super bien avec 4 images. J' ai recommencé tout le script sur un autre espace test, je voulai voir si je me débrouillais avec une 5ième image.... Bah non. Comme tu peux le constater, sur cette page : ici la dernière image ne rentre pas dans le slider.... Je suis vraiment une quiche en code ! Je me suis trompée où ? D'avance merci pour ton aide.

Bonjour

Un petit problème de div un peu brassée   , tu as placé ton 5ème item une div de fermeture trop bas et il manque la dernière div.
J'ai remis tout en place en laissant un repaire si tu veux en ajouter une autre, j'ai laissé 2 lignes vide  au-dessus du commentaire "--Fin images--" c'est au dessus de fin images qu'il faudra ajouter tes photos.

Pour éviter d'autres erreurs je te mets le code complet à mettre à la place de l'autre :

Code:

<div id="my_carousel" class="carousel slide" data-ride="carousel">
 <!-- Bulles -->
 <ol class="carousel-indicators">
 <li data-target="#my_carousel" data-slide-to="0" class="active"></li>
 <li data-target="#my_carousel" data-slide-to="1"></li>
 <li data-target="#my_carousel" data-slide-to="2"></li>
 <li data-target="#my_carousel" data-slide-to="3"></li>
 <li data-target="#my_carousel" data-slide-to="4"></li>
 </ol>
 <!-- Slides -->
  <div class="carousel-inner">
  
 <!-- image 1 -->
 <div class="item active">  
 <div class="carousel-page"><a href="http://www.mototeamracing.com/circuit_magny_f1.html" target="_blank"><img src="wa_files/01promosport.jpg" alt="" class="img-responsive" style="margin:0px auto;"/></a></div>
 <div class="carousel-caption">Magny F1</div>
 </div>  
 <!-- image 2 -->
 <div class="item">
 <div class="carousel-page"><a href="http://www.mototeamracing.com/cicuit_lurcy_levis_avril.html" target="_blank"><img src="wa_files/02LURCYAVRIL.jpg" alt="" class="img-responsive" style="margin:0px auto;"/></a></div>
 <div class="carousel-caption">Lurcy levis</div>
 </div>  
 <!-- image 3 -->
 <div class="item">  
 <div class="carousel-page"><a href="http://www.mototeamracing.com/stage_clastres_260617.html" target="_blank"><img src="wa_files/03STAGECLASTRES.jpg" alt="" class="img-responsive" style="margin:0px auto;"/></a></div>  
 <div class="carousel-caption">stage Clastres</div>
 </div>    
 <!-- image 4 -->
 <div class="item">  
 <div class="carousel-page"><a href="http://www.mototeamracing.com/circuit_vaison.html" target="_blank"><img src="wa_files/04promoVaison.jpg" alt="" class="img-responsive" style="margin:0px auto;"/></a></div>  
 <div class="carousel-caption">Vaison Piste</div>
 </div>      
 <!-- image 5 -->
 <div class="item">  
 <div class="carousel-page"><a href="http://www.mototeamracing.com/mtr_bon_cadeau.html" target="_blank"><img src="wa_files/05boncadeau.jpg" alt="" class="img-responsive" style="margin:0px auto;"/></a></div>  
 <div class="carousel-caption">Bon cadeau</div>
 </div>

 
 <!-- Fin images -->
  </div>
<!-- Contrôles -->
 <a class="left carousel-control" href="#my_carousel" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="#my_carousel" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
 </div>

Utilises-tu notepad++ pour éditer tes codes ?



@ +

Me revoilà, heureusement que tu es là, :-). Bah non j'utilisais le bête bloc-note de windows, je viens à l' instant de télécharger note-padd ++ , c'est nettement mieux.
Encore merci

Bonjour Ditila
C'est un outil très confortable, beaucoup plus que le bloc note.
Et comme tu démarres avec, un petit tuyau pour démarrer avec notepad.
Lorsque tu as fait un copier coller par exemple du code que je t'ai donné juste au dessus, tu sélectionnes le langage dans lequel il est écrit, pour celui-ci c'est du html et tu as les couleurs de syntaxe qui t'en montreront plus long;
Pour cela tu vas dans onglet / Langage / (c'est classé par ordre alphabétique donc) /H /HTML et la vie devient plus facile ...



Peut-être as-tu déjà trouvé tout ça mais je te le mets au cas où.
Tu y trouvera plein d'autres choses, c'est un outil fait pour.  

@ +