5568 sujets

Sémantique web et HTML

Ajout de dots a un slider

Bonjour, j'ai un créer un slider, seulement, j'aimerais mettre des dots qui permettent de passer d'image en image (tout en gardant l'animation) pour être plus précis en gros.
Seulement, je ne sait pas comment m'y prendre. Quelqu'un saurait m'aider ? Smiley smile

Voici mon code : https://codepen.io/Dayka/pen/JjjqxOv
Jean-Pierre-Bruneau a écrit :
Help nous n'avons pas le droit d’Accès


Mince désolé, je dois faire quoi pour le mettre vous donner les droits ?
Dayka a écrit :


Mince désolé, je dois faire quoi pour le mettre vous donner les droits ?


Bonsoir,

Voici les paramètres à avoir.

upload/1574706027-77617-capture.png
Code HTML

<!DOCTYPE html>
<link rel="stylesheet" href="test2.css">
<!-- <link rel="text/javaScript" href="tests.js">-->

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test Ma bibliothèque : Livres</title>  
</head>
<body>

           <!--  ENTETE -->
        
  <div id="entete">
        
            <ul id="nav">
                <li id="barre-nav"><a href ="/Livres/livre.html">Science Fiction</a></li>
                <li id="barre-nav">Mangas</li>
                <li id="barre-nav">Littérature Japonaise</li>
                <li id="barre-nav">Romans</li>
            </ul>
            <a href="/Bible-accueuil.html"><img src="Livres/Images-livre/home.png" id="home"></a>
      
    </div>
    
    <hr id="trait">
    
                            <!-- VIGNETTES -->  
 
  
    
<!-- SCIENCE FICTION -->
    
<div class="sf">
    <h1>Science - Fiction</h1>
    <div id="starwars">
        <h2>Livres Starwars</h2>
            <div id="slidersw">
                <figure>
                    <img src="Livres/Images-livre/DarkBane%20(1).jpg" alt>
                    <img src="Livres/Images-livre/L-Academie-Jedi-Trilogie%20(2).jpg" alt>
                    <img src="Livres/Images-livre/Maul%20(1).jpg" alt>
                    <img src="Livres/Images-livre/revan%20(1).jpg" alt>
                    <img src="Livres/Images-livre/Tarkin%20(1).jpg" alt>
                    <img src="Livres/Images-livre/Thrawn%20(1).jpg" alt>
                    <img src="Livres/Images-livre/DarkBane%20(1).jpg" alt>        
            </figure>
            
              
            </div>
        </div>
    
    
        
    <div id="GoT">
        <h2>Livres Game of Thrones</h2>
            <div id="sildergot">
                <figure>
                    <img src="Livres/Images-livre/got1.jpg" alt>
                    <img src="Livres/Images-livre/got2.jpg" alt>
                    <img src="Livres/Images-livre/got3.jpg" alt>
                    <img src="Livres/Images-livre/got4.jpg" alt>
                    <img src="Livres/Images-livre/got5.jpg" alt>
                    <img src="Livres/Images-livre/got6.jpg" alt>
                    <img src="Livres/Images-livre/got7.jpg" alt>
                </figure>
            </div>
        </div>
                
        

</div>

    
    

</body>
    
</html>


Code CSS

html {
    height: 100%;
    width: 100%;
}

body {height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    
}


                                            /*BARRE DE NAVIGATION*/

#entete {border: solid;
    width: 100%;
    height: 66px;
    background-color: black; opacity: 80%;
    position: relative;
    
    
}

#trait {background-color: #3D68B0;
    height: 3px;
    width: 100%;
    float: left;
    margin-top: -1px;
   
    
}

#nav {
    margin-left: 33%;
    padding: 0;
    position: absolute;
    display: flex;
    justify-content: space-around;
    text-align: center;
}

#nav li {
    
    padding: 0 35px;
    margin: -5px;
    color: white;
    display: block;
    overflow: hidden;
    cursor: pointer;
    float: left;
    width: 125px;
    height: 70px;
    margin-right: 0px;
    background-repeat:no-repeat;
    font-family: Arial;
    font-size: 20px;    
    
}

a {color: white;
    text-decoration-line: none;
    
}

li:hover {
    color: darkgray; opacity: 75%;
}

h1 {text-align: center;
    margin-top: 30px;
    font-family: Arial;
    text-decoration-line: underline;
    
}

h2 {
    text-align: center;
    font-family: arial;
    
}

#home {
    float: left;
    margin: 18px 18px;
    
}





                                        /* Science - Fiction */



.sf {  border: solid;
    border-color: rgba(0,0,0,.0);
    background-color: rgba(0,0,0,.035);
    height: 2000px;
    width: 80%;
    /*position: relative;*/
    overflow: hidden;
    margin: 150px 10%;
    
}

 #starwars {
    border: solid;
    border-color: rgba(0,0,0,.0);
    background-color: rgba(0,0,0,.035);
    height: 420px;
    width: 720px;
    /*position: relative;*/
    /*overflow: hidden;*/
     margin: 100px 26.3%;}


#GoT {
     border: solid;
    border-color: rgba(0,0,0,.0);
    background-color: rgba(0,0,0,.035);
    height: 420px;
    width: 720px;
    /*position: relative;*/
    /*overflow: hidden;*/
     margin: 200px 26.3%;}



  


div#slidersw {
    width: 80% ; 
    max-width: 309px;
    overflow: hidden;
    margin: 26px 202px;
}

div#slidersw figure {
    position: relative;
    width: 700%;/*car 7 images*/
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center;
    animation: 25s slidy infinite;
}


div#slidersw figure img  {
    width: 14.2857142857%; /*100/7*/
    height: auto;
    /*float: left;*/
}
*/

div#slidergot{
    width: 80% ; 
    max-width: 309px;
    overflow: hidden;
    margin: 26px 202px;
}

div#slidergot figure {
    position: relative;
    width: 700%;/*car 7 images*/
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center;
    animation: 25s slidys infinite;
}

div#slidergot figure img {
    width: 14.2857142857%; /*100/7*/
    height: auto;
    /*float: left;*/
}
    
/*animation*/
@keyframes slidy {
    0% {left: 0%;}
    20% {left: 0%;}
    25% {left: -100%;}
    45% {left: -100%;}
    50% {left: -200%;}
    70% {left: -200%;}
    75% {left: -300%;}
    95% {left: -300%;}
    100% {left: -400%;}
}


@keyframes slidys {
    0% {left: 0%;}
    20% {left: 0%;}
    25% {left: -100%;}
    45% {left: -100%;}
    50% {left: -200%;}
    70% {left: -200%;}
    75% {left: -300%;}
    95% {left: -300%;}
    100% {left: -400%;}
}
Nouveau soucis, ma deuxième slide ne marche pas, je l'ai pourtant faite sur le model de la première.

Et même question qu'au début, si quelqu'un sait comment ajouter des dots pour naviguer plus précisément entre les slides que juste attendre que l'animation passe.

Merci Smiley smile
Administrateur
Bonjour,

si c'est pour réaliser un slideshow en pur CSS, autant t'aiguiller vers ce tutoriel de mon ex-collègue : https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition avec une partie "« pagination » pour sauter vers une slide".

Je ne suis pas fan du pur CSS pour des composants aussi complexes m'enfin ça fonctionne. Utiliser JavaScript / jQuery permet de prévoir et utiliser des méthodes prev, next, sauter à telle slide, play/pause (surtout play/pause) et d'ajouter des boutons déclenchant ces événements.
Felipe a écrit :
Bonjour,

si c'est pour réaliser un slideshow en pur CSS, autant t'aiguiller vers ce tutoriel de mon ex-collègue : https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition avec une partie "« pagination » pour sauter vers une slide".

Je ne suis pas fan du pur CSS pour des composants aussi complexes m'enfin ça fonctionne. Utiliser JavaScript / jQuery permet de prévoir et utiliser des méthodes prev, next, sauter à telle slide, play/pause (surtout play/pause) et d'ajouter des boutons déclenchant ces événements.



Merci Felipe, j'aimerais aussi utiliser du javascript pour optimiser mon slide mais je n'ai pas encore commencé a apprendre la dessus, déja que je suis débutant en css/html ^^
Sujet clos
Aller à