Bonjour,

Je suis en train de faire un site où je dois faire une sorte de slider, mais je ne sais pas si c'en ai vraiment un. En général j'utilise un des sliders de :http://idangero.us/swiper/demos/#.WKXDYzvhCM8

Je vous montre une image de ce que j'aimerai réaliser : 

Donc j'aimerai pouvoir réaliser une sorte de slider dans ce genre. Dès qu'on clique sur un des titres, on a un bloc de texte et de photo qui arrive, et une sorte de flèche se place au dessus du titre pour savoir dans quel titre on est. Mais voilà, je ne sais pas du tout comment m'y prendre.. Puis-je réutiliser un slider du lien que j'ai mis plus haut ?

Si non, comment m'y prendre ?

Les photos et textes sont mis dans un tableau html ?

En espérant que vous puissiez m'aider, merci d'avance !

Alexis

-
Edité par Ah_les_scies 21 février 2017 à 14:59:53

salut

ça me fait plutôt penser à un système d'onglet ou les onglet sont 'titre 1',titre 2' ...etc

et les photos et text le contenu des onglets

j'en ai fait il y a quelque temps ,je me suis servi pour ma part du framework css materialize

en bidouillant on peut certainement obtenir cette petite flèche que tu souhaite,même si j avoue j'ai laisser les onglets par Default en stylisant juste un peu les bordures

je ne sais pas si ça peut t'aider mais jette s'y un oeil

http://materializecss.com/tabs.html

c'est la section 'Swipeable Tabs' en bas de page

-
Edité par wimbo 21 février 2017 à 20:57:34

Salut !!

Déjà merci beaucoup pour ton aide !

C'est exactement ce qu'il me faudrait ! Et puis le barre qui se met sous le titre pour indiquer où l'on est bien mieux que le flèche que je voulais.

J'ai commencé à le faire, en s'aidant de leurs bout de code, mais ça me parait hyper faible niveau jquery, c'est normal ?

Par exemple dans  la section 'Swipeable Tabs', ils disent qu'on peut mettre sur true, mais nul part sur la page il parle d'options pour ce "slider" ! C'est normal ?

Désolé si je pose des questions qui peuvent paraître bête, je débute en jquery..

-
Edité par Ah_les_scies 22 février 2017 à 11:33:24

re

il n'y à pas de questions bêtes, ce qui est bête c'est de ne pas en poser

Ah_les_scies a écrit:

J'ai commencé à le faire, en s'aidant de leurs bout de code, mais ça me parait hyper faible niveau jquery, c'est normal ?

oui c'est normal tu n'as pas à t'en soucié  la plupart du temps

une chose cependant 

tu fais appel à la function tabs() pour appeler tes onglets ,j'ignore si sur ton site tu vas utiliser jqueryUI ,dans ce cas fait attention ,  jqueryUI  utilise aussi une function tabs() , et la conflit 

si tu n'utilise pas jqueryUI, no problem , mais garde ça dans un coin de ta tête ça eviteras de tourner en rond quelques heures comme j'ai pu faire .

Ah_les_scies a écrit:

Par exemple dans  la section 'Swipeable Tabs', ils disent qu'on peut mettre sur true, mais nul part sur la page il parle d'options pour ce "slider" ! C'est normal ?

arf... j'en sais rien, je bosse avec materialize en ce moment et j'avoue que la doc n'est pas toujours complète  ,même si la plupart du temps j'arrive à mes fins

le frameworks à pour version "0.98" donc on peut imaginer qu'il est presque à maturité mais pas tout à fait encore..Uu et il te fraudas fouiller sur le net pour certaines choses , la routine habituel quoi

moi pour voir un peu plus ce qui se 'cache' pour la function tabs() j'ai afficher l'objet dans ma console

console.log($('ul.tabs').tabs());

Ok merci beaucoup pour les infos !

Donc on gros ce que j'ai à faire : 

- Coller grossièrement les bouts de codes donnés (tout en lisant évidemment)

- Faire moi même le css pour le positionnement, les mettre sur une ligne comment montré sur le site

- Mettre le JQuery donné + quelques recherches google pour l'améliorer s'il faut 

?

Et je n'ai pas besoin de mettre dans mon head le lien d'un site pour aider au slider ?

Merci vraiment pour l'aide, c'est juste énorme !!

le positionnement se fait via la 'grille' materialize 

je te conseil de regarder comment fonctionne ce frameworks

exemplle la grille:

http://materializecss.com/grid.html

la couleur des tabs ,se fait via css pour avoir les class ou id à modifier fireBug m'as aider

le jquery pour le moment je n'y toucherai pas à ta place il suffit largement pour le defilement d'onglet

en gros la chose à retenir c'est lit la DOC materialize  pour deja avoir une idéé du fonctionnement global du frameworks

bon courage ( on en as toujours besoin )

Ah mais oui je n'avais pas vu dans le menu "démarrer" qu'ils donnaient des liens à mettre dans son head pour appeler Materialize !! 

Effectivement, une fois que j'ai mis le html en appelant Materialize, j'ai le "slider" comme il faut, je n'ai plus qu'à modifier à mon aise !

J'ai cependant 2 soucis, que je n'arrive pas à régler :

1) J'ai mis 6 colonnes, mais je n'ai que comme dans l'exemple 4 colonnes..

2) Comme j'ai appelé Materialize, cela modifie modifie mon menu ainsi que mon menu fixe.. Tu saurais comment faire pour que mon menu ne soit pas modifié par Materialize ?

Merci encore pour l'aide que tu me fournis, merci vraiment !

Mon code  html pour avoir 6 colonnes, basique en suivant leurs instructions :

 <div class="row">

    <div class="col s12">

      <ul class="tabs">

        <li class="tab col s3"><a class="active" href="#test1">Test 1</a></li>

        <li class="tab col s3"><a href="#test2">Test 2</a></li>

        <li class="tab col s3"><a href="#test3">Test 3</a></li>

        <li class="tab col s3"><a href="#test4">Test 4</a></li>

        <li class="tab col s3"><a href="#test5">Test 5</a></li>

        <li class="tab col s3"><a href="#test6">Test 6</a></li>

      </ul>

    </div>

    <div id="test1" class="col s12">Test 1</div>

    <div id="test2" class="col s12">Test 2</div>

    <div id="test3" class="col s12">Test 3</div>

    <div id="test4" class="col s12">Test 4</div>

    <div id="test5" class="col s12">Test 5</div>

    <div id="test6" class="col s12">Test 6</div>

  </div>

-
Edité par Ah_les_scies 22 février 2017 à 14:50:11

Ah_les_scies a écrit:

        <li class="tab col s3"><a class="active" href="#test1">Test 1</a></li>

        <li class="tab col s3"><a href="#test2">Test 2</a></li>

        <li class="tab col s3"><a href="#test3">Test 3</a></li>

        <li class="tab col s3"><a href="#test4">Test 4</a></li>

        <li class="tab col s3"><a href="#test5">Test 5</a></li>

        <li class="tab col s3"><a href="#test6">Test 6</a></li>

normal que tu as quatre colonnes ; a grille fait douze ... et la 6 * 3 euh 18..tu dépasses c'est plus 's2' non ?

pour ton menu ton css doit être chargé après celui de materialize 

et devras peu etre refaire une partie de ton css  pour le menu pour court circuiter materialize

Ahah oui j'avais mal compris le système de grille, mais en effet en 's2' c'est niquel, merci beaucoup *_*

Par contre pour mon menu, impossible d'y arriver.. J'arrive à corriger certaines choses mais ce n'est jamais parfait... Et même avec FireBug...

De coup, au lieu de me casser la tête pendant plusieurs autres heures (ouai je suis en mode galérien), je me suis dit : n'est il pas possible de créer une nouvelle page avec seulement le "slider" et le css/javascript de Materialize chargé dessus, et je chargerais le résultat obtenu sur la page actuelle ?

J'ai fait quelques recherches google mais je dois pas avoir les bons mots clés car ça n'aboutis à rien :/

En php oui mais tu galeras autant function include

Apres

Il te reste deux solutions soit tu met tout ' a la sauce' materialize

Sois tu galeres (c'est le metier qui rentre) et tu trouve la soluce niveau css,la plus dificile mais la plus  formatrice

Javoue que materialize est particulièrement chiant parfois pour son mode   ' j'ai changer toute ta page sans demander ton avis '...

Il va falloir que tu regarde quelle regle saplique sur ton menu, pour trouver les regles chrome est pas mal aussi quand tu selectionne un element il t'affiche les regles qui sont utilisé pour celui ci

Une fois trouver tu les court circuite et aplique les tiennes

Met des id sur ton menu pour bien identifier les elements que veux styliser

Bref ...le mode galérien  cest souvent le mode normal faudras ty habituer

Salut ! 

J'ai enfin réussis à le repositionner correctement, ce n'était pas simple ! 

Il me reste 1 unique soucis !

Dans mon menu j'ai une icone : 

 <ul id="menu">
                    <li><a href="index.html" title="Accueil">Accueil<div class="souligne"></div></a></li>
                    <li><a href="#" title="Decouvrir">Découvrir<div class="souligne"></div></a></li>
                    <li><a href="presdechezvous.html" title="PresDeChezVous">Près de chez vous<div class="souligne"></div></a></li>
                    <li><a href="#" title="Lancer">Lancer<div class="souligne"></div></a></li>
                    <li><a href="#" title="Inscription">S'inscrire<div class="souligne"></div></a></li>
                    <i class="fa fa-user-circle" id="enter" aria-hidden="true"></i>
                </ul>

Avec le code css qu'elle a : 

#enter{
    right:2%;
    color:#da3c4e;
    margin-top:2%;
    z-index:99;
}

Et donc là sur ma page elle a disparut, impossible de la faire ré-apparaître, et ne trouve pas ce qui bloque... Une idée ?

Edit : le code css du menu :

#menu{
  /*position: relative;*/
  position: absolute;
  z-index:99;
  width:50%;
  left:45%;
  text-align: center;
  display:flex;
  justify-content: space-between;
}

#nav.navfixed{
    position:fixed;
    z-index:199;
  width:100%;
    height:10%;
    top:0;
  text-align: center;
    background:#fff;
  display :flex;
  justify-content: space-between;
    color:black;
}

#menu li{
  display: inline-block;
  font-family: 'Avenir LT Std 45 Book';
  text-transform: uppercase;
  position:relative;
    margin-top:2%;
  letter-spacing:1px;
    height:17px;
}

#menu li a{
  list-style-type:none;
  text-decoration:none;
  color:white;
  font-size:12px;
  transition:all .3s;
}

#menu li a:hover{
  color:#da3c4e;
}

/* Code spécial à la page découvrir, pour enlever le css appliquer par Materialize */

nav ul a{
    padding:0;
}

nav ul li{
    height:17px;
}

nav ul a:hover{
    background-color: transparent;
}

@media only screen and (min-width: 601px){
    nav,nav .nav-wrapper i,nav a.button-collapse,nav a.button-collapse i{
        line-height:18px
    }
}

-
Edité par Ah_les_scies 23 février 2017 à 12:18:22

tu as mis le lien css  vers font awesome ?

-
Edité par wimbo 23 février 2017 à 13:47:54

Je... 

Il y étais avant !!

C'est bien ça, problème tout bête que tu as résous aisément x)

Je passe le sujet en résolu, merci infiniment pour ton aide et ta patience, je t'en suis vraiment reconnaissant !

de rien

mais je t'ai juste mis sur la voie tu l'as fait seul