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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par ditila le Mar 29 Nov 2016 - 20:55

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 . Pouark
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.


Dernière édition par ditila le Mer 30 Nov 2016 - 11:56, édité 1 fois

ditila

Messages : 4
Date d'inscription : 28/11/2016
Age : 53
Localisation : Auxon 10130

http://informatique.p.tous.free.fr/

Revenir en haut Aller en bas

Résolu Re: Petit soucis pour mettre en place le "Slider style bootstrap dans WA4"

Message par Admin le Mer 30 Nov 2016 - 8:30

Bonjour Ditila et bienvenue dans le forum Ellade  bienvenue

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.

@ +

Admin
Admin

Messages : 430
Date d'inscription : 11/03/2009

http://ellade.forumperso.com

Revenir en haut Aller en bas

Résolu Re: Petit soucis pour mettre en place le "Slider style bootstrap dans WA4"

Message par ditila le Mer 30 Nov 2016 - 11:55

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

Comment dire... Surprised

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

Un grand merci !
Amicalement Ditila.

ditila

Messages : 4
Date d'inscription : 28/11/2016
Age : 53
Localisation : Auxon 10130

http://informatique.p.tous.free.fr/

Revenir en haut Aller en bas

Résolu Re: Petit soucis pour mettre en place le "Slider style bootstrap dans WA4"

Message par Admin le Mer 30 Nov 2016 - 12:03

Merci c'est sympa
J'ai vu tout fonctionne cheers

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

Admin
Admin

Messages : 430
Date d'inscription : 11/03/2009

http://ellade.forumperso.com

Revenir en haut Aller en bas

Résolu Re: Petit soucis pour mettre en place le "Slider style bootstrap dans WA4"

Message par ditila le Jeu 1 Déc 2016 - 14:22

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.

ditila

Messages : 4
Date d'inscription : 28/11/2016
Age : 53
Localisation : Auxon 10130

http://informatique.p.tous.free.fr/

Revenir en haut Aller en bas

Résolu Re: Petit soucis pour mettre en place le "Slider style bootstrap dans WA4"

Message par Admin le Jeu 1 Déc 2016 - 14:57

Bonjour

Un petit problème de div un peu brassée  Smile , 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 ?



@ +

Admin
Admin

Messages : 430
Date d'inscription : 11/03/2009

http://ellade.forumperso.com

Revenir en haut Aller en bas

Résolu Re: Petit soucis pour mettre en place le "Slider style bootstrap dans WA4"

Message par ditila le Jeu 1 Déc 2016 - 19:04

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

ditila

Messages : 4
Date d'inscription : 28/11/2016
Age : 53
Localisation : Auxon 10130

http://informatique.p.tous.free.fr/

Revenir en haut Aller en bas

Résolu Re: Petit soucis pour mettre en place le "Slider style bootstrap dans WA4"

Message par Admin le Ven 2 Déc 2016 - 10:36

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.  cheers

@ +



Admin
Admin

Messages : 430
Date d'inscription : 11/03/2009

http://ellade.forumperso.com

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum