Laden Sie NeoFrag herunter
Anmelden

[RESOLU] [SLIDER] Ajouter un cercle de navigation

67 Ansichten
[RESOLU] [SLIDER] Ajouter un cercle de navigation
Azexor

8 Fach, 17 Antworten
Ungelesene Nachricht
Bonjour,

Il me semble qu'autre fois il existé un sujet qui traité ce propos sur le forum mais je ne l'est pas retrouvé.

Sur mon site je possède trois sliders qui tourne, mais seulement deux cercles existe, cela n'empêche en rien le fonctionnement du troisième, cependant les utilisateurs peuvent pensez qu'il y a seulement que 2 sliders, comment rajoutez un troisième petit cercle ?





Voici le code :
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="<?php echo image('http://sd-5.archive-host.com/membres/up/163404077929176727/slide.png'); ?>" alt="..." />
<div class="carousel-caption hidden-xs">
<h3></h3>
<p></p>
</div>
</div>
<div class="item">
<img src="<?php echo image('http://sd-5.archive-host.com/membres/up/163404077929176727/slide-2.png'); ?>" alt="..." />
<div class="carousel-caption hidden-xs">
<h3></h3>
<p></p>
</div>
</div>
<div class="item">
<img src="<?php echo image('http://sd-5b.archive-host.com/membres/up/163404077929176727/Slide-3.png'); ?>" alt="..." />
<div class="carousel-caption hidden-xs">
<h3></h3>
<p></p>
</div>
</div>
</div>
<a class="left carousel-control hidden-xs" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control hidden-xs" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Rückkehr
5 Teilnehmer
10 Antworten
Pytchounn

18 Fach, 160 Antworten
Ungelesene Nachricht
On met ca ou svp ?
Nuts2115

1 Fach , 5 Antworten
Ungelesene Nachricht
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
essaye en rajoutantcomme si dessus " <li data-target="#carousel" data-slide-to="3"></li> " sa devrait etre bon
Azexor

8 Fach, 17 Antworten
Ungelesene Nachricht
Ici : /www/widgets/slider/views/index.tpl.php


Sa fonctionne je te remercie (Par contre je ne peux cliquer sur sur deux cercles pas le troisième mais c'est qu'un détail les 3 cercles s'affichent correctement et ils suivent bien le slider en cours d'affichage).
eResnova

17 Fach, 875 Antworten

Mitwirkende
Ungelesene Nachricht
Salut !

La variable data-slide-to="3" doit être incrémentée en partant de zéro :

data-slide-to="0" pour cibler le 1er slider (div qui a la classe item)
data-slide-to="1" pour cibler le 2ème slider
etc...
Azexor

8 Fach, 17 Antworten
Ungelesene Nachricht
Merci pour la correction :)
Pytchounn

18 Fach, 160 Antworten
Ungelesene Nachricht
J'ai rien compris a ce qu'il faut mettre
Azexor

8 Fach, 17 Antworten
Ungelesene Nachricht
C'est quoi que tu souhaite au juste ? :

Savoir ou éditer/rajouter/supprimer les sliders ?

Comment rajouter le petit cercle de navigation comme sur cette image ? http://img11.hostingpics.net/pics/332628861.jpg
Pytchounn

18 Fach, 160 Antworten
Ungelesene Nachricht
Comment rajouter le petit cercle de navigation comme sur cette image ? http://img11.hostingpics.net/pics/332628861.jpg
AZimut

12 Fach, 159 Antworten

Geber
Ungelesene Nachricht
@pytchoun sans connaitre un minimum le code html et CSS tu ne vas rien comprendre en effet. N'oublie pas que neofrag est un cms en version ALPHA ce qui signifie en cours de développement et non finalisé. Il ne s'adresse donc pas aux personnes sans connaissances de bases de ces deux langages et idéalement PHP en supplément.

Pour modifier le slider, il te faudra mettre les mains dans le cambouis et modifier un fichier nommé: index.tpl.php
qui se trouve en suivant le chemin suivant pour le thème de base: widgets / slider / views /
et qui se trouve en suivant le chemin suivant pour le thème dungeon: themes / dungeon / ovrrides / widgets / slider /views /
pour ce faire, un programme externe est recommandé pour l'ouvrir et l'éditer: notepad++
il te faudra trouver le code suivant:

<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>

il commence à la ligne: 2

pour les modifier comme suit:

<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>

En le modifiant comme suit, tu auras de ce fait les 3 points, avec chacun leur arrivée sur le slider voulu.
Si tu veux ajouter un slider ou modifier ceux-ci, je te conseil soit d'attendre une version de Neofrag avec la modification des sliders inclue dans l'administration, soit d'apprendre au moins les bases du langage HTML5 & CSS pour pouvoir suivre les conversations sur le site tant que Neofrag est en version Alpha/Beta.

Pour reconnaître le premier slider voici le code (ligne 7 de base):

 <div class="item active">
<img src="<?php echo image('slide1.jpg'); ?>" alt="..." />
<div class="carousel-caption hidden-xs">
<h3>Slider 1</h3>
<p>Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur</p>
</div>
</div>

Un slider plus basique est représenter de cette manière (ligne 14 de base):

 <div class="item">
<img src="<?php echo image('slide2.jpg'); ?>" alt="..." />
<div class="carousel-caption hidden-xs">
<h3>Slider 1</h3>
<p>Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur</p>
</div>
</div>

Pour changer les images, il te faudra le modifier manuellement. tu peux les reconnaître dans les lignes de code ci-dessus par "slide*.jpg". L'étoile représente le chiffre du slide.
Si tu veux mettre tes propres images, il va falloir les changer dans les dossiers de ton thème.
Avec le thème Dungeon voici le chemin pour les trouver: themes / dungeon / images / slider
Pour le thème de base: neofrag / themes /default / images

Les images des slides font la taille de 1903X500px. Tu peux les créer / retravailler avec un programme comme GIMP2.

Si tu veux ajouter un bouton au slide, tu peux le faire en ajoutant une ligne au bloc slide:

<a href="Lien de la page" class="btn btn-primary">Texte du bouton</a>

Voici le code d'un slide avec cette ligne de code en plus:

<div class="item">
<img src="<?php echo image('slide2.jpg'); ?>" alt="..." />
<div class="carousel-caption hidden-xs">
<h3>Slider 1</h3>
<p>Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur</p>
<a href="Lien de la page" class="btn btn-primary">Texte du bouton</a>
</div>
</div>

Avec ceci tu devrais pouvoir t'en sortir à 100%.
Mais au vu de tes connaissances coté HTML/CSS/PHP je te conseil vivement de patienter la version finale du CMS ou te plonger dans l'apprentissage de ces langages ;)
On verra le bout un jour? ...
Pytchounn

18 Fach, 160 Antworten
Ungelesene Nachricht
Merci mec ! par contre moi je peux pas installer le thème dungeon car ca reste bloqué a 100% lors de l'installation
Rückkehr