Download NeoFrag
Connection

[RESOLU] [SLIDER] Ajouter un cercle de navigation

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

8 subjects, 17 replies
Unread message
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>
Return
5 participants
10 replies
Pytchounn

18 subjects, 160 replies
Unread message
On met ca ou svp ?
Nuts2115

1 subject , 5 replies
Unread message
<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 subjects, 17 replies
Unread message
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 subjects, 875 replies

Contributors
Unread message
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 subjects, 17 replies
Unread message
Merci pour la correction :)
Pytchounn

18 subjects, 160 replies
Unread message
J'ai rien compris a ce qu'il faut mettre
Azexor

8 subjects, 17 replies
Unread message
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 subjects, 160 replies
Unread message
Comment rajouter le petit cercle de navigation comme sur cette image ? http://img11.hostingpics.net/pics/332628861.jpg
AZimut

12 subjects, 159 replies

donors
Unread message
@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 subjects, 160 replies
Unread message
Merci mec ! par contre moi je peux pas installer le thème dungeon car ca reste bloqué a 100% lors de l'installation
Return