Sujet Précédent Sujet Suivant

Faire passer un Slider de 5 images à 10 images

Résolu/Fermé
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 6 mai 2022 à 06:42
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 8 mai 2022 à 14:49
Bonjour à tous,
J'ai un slider de 5 images que je tente de faire passer à 10. Seulement voilà... seules 6 images s'affichent.
J'ai tenté un 
.s-wrap .s-content {
  width: 1000%;
}

10x100% les images sont affichés à 200% :/

Je vous laisse toutes les (nombreuses) CSS : 

.outer-wrapper {
  width: 80%;
  margin: 50px auto;
}

.s-wrap {
  margin-top: 40px;
  max-width: 70%;
  margin-bottom: 0px;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
  margin-right:15%;
  margin-left:15%;
}
	
.s-wrap > input {
  display: none;
}
.s-wrap .s-content {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  height: 100%;
  font-size: 0;
  list-style: none;
  transition: transform 1s;
}
.s-wrap .s-item {
  display: inline-block;
  width: 20%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.s-wrap .s-item-1 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-2 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-3 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-4 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-5 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-6 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
}
.s-wrap .s-item-7 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-58 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-9 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}
.s-wrap .s-item-10 {
  background-image: url("https://images.unsplash.com/photo-1457369804613-52c61a468e7d?crop=entropy&fit=crop&fm=jpg&h=600&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=800");
}

.s-type-1 .s-control {
  position: absolute;
  bottom: 18px;
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  transition-timing-function: ease-out;
}
.s-type-1 .s-control > label[class^="s-c-"] {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border-radius: 50%;
  border: 1px solid #999;
  background-color: #efefe8;
  cursor: pointer;
}
.s-type-1 .s-nav label {
  display: none;
  position: absolute;
  top: 50%;
  padding: 5px 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
.s-type-1 .s-nav label::before, .s-type-1 .s-nav label::after {
  content: "";
  display: block;
  width: 8px;
  height: 24px;
  background-color: #fff;
}
.s-type-1 .s-nav label::before {
  margin-bottom: -12px;
}
.s-type-1 .s-nav label.left {
  left: 20px;
}
.s-type-1 .s-nav label.left::before {
  transform: rotate(45deg);
}
.s-type-1 .s-nav label.left::after {
  transform: rotate(-45deg);
}
.s-type-1 .s-nav label.right {
  right: 20px;
}
.s-type-1 .s-nav label.right::before {
  transform: rotate(-45deg);
}
.s-type-1 .s-nav label.right::after {
  transform: rotate(45deg);
}
.s-type-1 #s-1:checked ~ .s-content {
  transform: translateX(0%);
}
.s-type-1 #s-1:checked ~ .s-control .s-c-1 {
  background-color: #333;
}
.s-type-1 #s-1:checked ~ .s-nav .s-nav-1 {
  display: block;
}
.s-type-1 #s-2:checked ~ .s-content {
  transform: translateX(-20%);
}
.s-type-1 #s-2:checked ~ .s-control .s-c-2 {
  background-color: #333;
}
.s-type-1 #s-2:checked ~ .s-nav .s-nav-2 {
  display: block;
}
.s-type-1 #s-3:checked ~ .s-content {
  transform: translateX(-40%);
}
.s-type-1 #s-3:checked ~ .s-control .s-c-3 {
  background-color: #333;
}
.s-type-1 #s-3:checked ~ .s-nav .s-nav-3 {
  display: block;
}
.s-type-1 #s-4:checked ~ .s-content {
  transform: translateX(-60%);
}
.s-type-1 #s-4:checked ~ .s-control .s-c-4 {
  background-color: #333;
}
.s-type-1 #s-4:checked ~ .s-nav .s-nav-4 {
  display: block;
}
.s-type-1 #s-5:checked ~ .s-content {
  transform: translateX(-80%);
}
.s-type-1 #s-5:checked ~ .s-control .s-c-5 {
  background-color: #333;
}
.s-type-1 #s-5:checked ~ .s-nav .s-nav-5 {
  display: block;
}
.s-type-1 #s-6:checked ~ .s-content {
  transform: translateX(-80%);
}
.s-type-1 #s-6:checked ~ .s-control .s-c-6 {
  background-color: #333;
}
.s-type-1 #s-6:checked ~ .s-nav .s-nav-6 {
  display: block;
}
.s-type-1 #s-7:checked ~ .s-content {
  transform: translateX(-80%);
}
.s-type-1 #s-7:checked ~ .s-control .s-c-7 {
  background-color: #333;
}
.s-type-1 #s-7:checked ~ .s-nav .s-nav-7 {
  display: block;
}
.s-type-1 #s-8:checked ~ .s-content {
  transform: translateX(-80%);
}
.s-type-1 #s-8:checked ~ .s-control .s-c-8 {
  background-color: #333;
}
.s-type-1 #s-8:checked ~ .s-nav .s-nav-8 {
  display: block;
}
.s-type-1 #s-9:checked ~ .s-content {
  transform: translateX(-80%);
}
.s-type-1 #s-9:checked ~ .s-control .s-c-9 {
  background-color: #333;
}
.s-type-1 #s-9:checked ~ .s-nav .s-nav-9 {
  display: block;
}
.s-type-1 #s-10:checked ~ .s-content {
  transform: translateX(-80%);
}
.s-type-1 #s-10:checked ~ .s-control .s-c-10 {
  background-color: #333;
}
.s-type-1 #s-10:checked ~ .s-nav .s-nav-10 {
  display: block;
}


.s-type-2 .s-content {
  animation: slider-animation 50s ease-in-out infinite;
}
.s-type-2 .s-content:hover {
  animation-play-state: paused;
}

@keyframes slider-animation {
  0%,
    7% {
    transform: translateX(0%);
  }
  12.5%,
    19.5% {
    transform: translateX(-20%);
  }
  25%,
    32% {
    transform: translateX(-40%);
  }
  37.5%,
    44.5% {
    transform: translateX(-60%);
  }
  50%,
    57% {
    transform: translateX(-80%);
  }
  62.5%,
    69.5% {
    transform: translateX(-60%);
  }
  75%,
    82% {
    transform: translateX(-40%);
  }
  87.5%,
    94.5% {
    transform: translateX(-20%);
  }
}


Configuration: Macintosh / Chrome 101.0.4951.54


Je pense que ce n'est pas grans chose, mais je ne trouve pas.
Merci pour votre aide,
LM
A voir également:

10 réponses

Réponse 1 / 10
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
6 mai 2022 à 13:00
Ta première idée de modifier la largeur du conteneur était bien la bonne piste, mais il faut aussi modifier la largeur des slides (10% au lieu de 20%) : 
.s-wrap .s-content {
  width: 1000%;
  /* ... */
}
.s-wrap .s-item {
  display: inline-block;
  width: 10%;
  /* ... */
}


Il faudra ensuite adapter le keyframes slider-animation pour corriger les translations avec 10 images.
1
Réponse 2 / 10
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
6 mai 2022 à 10:31
reBonjour,
Même avec Translate X, je n'ai que 6 photos sur 10 :/ 
.s-type-1 #s-1:checked ~ .s-content {
  transform: translateX(0%);
}
.s-type-1 #s-1:checked ~ .s-control .s-c-1 {
  background-color: #333;
}
.s-type-1 #s-1:checked ~ .s-nav .s-nav-1 {
  display: block;
}
.s-type-1 #s-2:checked ~ .s-content {
  transform: translateX(-20%);
}
.s-type-1 #s-2:checked ~ .s-control .s-c-2 {
  background-color: #333;
}
.s-type-1 #s-2:checked ~ .s-nav .s-nav-2 {
  display: block;
}
.s-type-1 #s-3:checked ~ .s-content {
  transform: translateX(-40%);
}
.s-type-1 #s-3:checked ~ .s-control .s-c-3 {
  background-color: #333;
}
.s-type-1 #s-3:checked ~ .s-nav .s-nav-3 {
  display: block;
}
.s-type-1 #s-4:checked ~ .s-content {
  transform: translateX(-60%);
}
.s-type-1 #s-4:checked ~ .s-control .s-c-4 {
  background-color: #333;
}
.s-type-1 #s-4:checked ~ .s-nav .s-nav-4 {
  display: block;
}
.s-type-1 #s-5:checked ~ .s-content {
  transform: translateX(-80%);
}
.s-type-1 #s-5:checked ~ .s-control .s-c-5 {
  background-color: #333;
}
.s-type-1 #s-5:checked ~ .s-nav .s-nav-5 {
  display: block;
}
.s-type-1 #s-6:checked ~ .s-content {
  transform: translateX(-100%);
}
.s-type-1 #s-6:checked ~ .s-control .s-c-6 {
  background-color: #333;
}
.s-type-1 #s-6:checked ~ .s-nav .s-nav-6 {
  display: block;
}
.s-type-1 #s-7:checked ~ .s-content {
  transform: translateX(-120%);
}
.s-type-1 #s-7:checked ~ .s-control .s-c-7 {
  background-color: #333;
}
.s-type-1 #s-7:checked ~ .s-nav .s-nav-7 {
  display: block;
}
.s-type-1 #s-8:checked ~ .s-content {
  transform: translateX(-140%);
}
.s-type-1 #s-8:checked ~ .s-control .s-c-8 {
  background-color: #333;
}
.s-type-1 #s-8:checked ~ .s-nav .s-nav-8 {
  display: block;
}
.s-type-1 #s-9:checked ~ .s-content {
  transform: translateX(-160%);
}
.s-type-1 #s-9:checked ~ .s-control .s-c-9 {
  background-color: #333;
}
.s-type-1 #s-9:checked ~ .s-nav .s-nav-9 {
  display: block;
}
.s-type-1 #s-10:checked ~ .s-content {
  transform: translateX(-180%);
}

Bonne journée,
LM
0
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
6 mai 2022 à 10:33
C'est ça !!!! :)
Mais comment faire ? 
@keyframes slider-animation {
  0%,
    7% {
    transform: translateX(0%);
  }
  12.5%,
    19.5% {
    transform: translateX(-20%);
  }
  25%,
    32% {
    transform: translateX(-40%);
  }
  37.5%,
    44.5% {
    transform: translateX(-60%);
  }
  50%,
    57% {
    transform: translateX(-80%);
  }
  62.5%,
    69.5% {
    transform: translateX(-60%);
  }
  75%,
    82% {
    transform: translateX(-40%);
  }
  87.5%,
    94.5% {
    transform: translateX(-20%);
  }
}
0
Réponse 3 / 10
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
6 mai 2022 à 12:12
Bonjour,

Il faudrait aussi partager le code html correspondant pour voir le soucis.
0
Réponse 4 / 10
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
6 mai 2022 à 12:29
Bonjour Pitet,
Pardon, voici le HTML : 
  <div class="s-wrap s-type-2" role="slider">
    <ul class="s-content">
      <li class="s-item s-item-1"></li>
      <li class="s-item s-item-2"></li>
      <li class="s-item s-item-3"></li>
      <li class="s-item s-item-4"></li>
      <li class="s-item s-item-5"></li>
      <li class="s-item s-item-6"></li>
      <li class="s-item s-item-7"></li>
      <li class="s-item s-item-8"></li>
      <li class="s-item s-item-9"></li>
       <li class="s-item s-item-10"></li>
    </ul>
  </div>

Bon après-midi et merci ;)
LM
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
6 mai 2022 à 14:24
Merci beaucoup Pitet :) ça semble tout simple ^^
Par contre, je n'ai aucune idée pour les Keyframes :/
Au cas où... ;)
Encore merci !!!!
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
6 mai 2022 à 14:34
J'utilise très peu les keyframes donc pas sûr d'avoir la meilleure réponse.
Pour tester facilement le positionnement des slides, j'avais réduit la durée de l'animation (10s au lieu de 50s) et ajouté un keyframe très simple : https://jsfiddle.net/agr6ev7y/
Pour revenir à ton style d'animation, on peut essayer quelque chose comme ceci :
https://jsfiddle.net/agr6ev7y/1/
0
Réponse 6 / 10
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
6 mai 2022 à 14:27
Effectivement, le slider va de la 1ere image à la 3e...à la 5e...
Autant ma question initiale pouvait paraître stupide, autant là :(
Bon après-midi
0
Réponse 7 / 10
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
6 mai 2022 à 16:08
Que dire à part MERCI ?????
Par contre, je n'arrive pas à avoir cette fluidité. Ça bloque au niveau de qq images, surtout les deux premières.
Mais sujet RESOLU !!!! MERCI !!!
0
Réponse 8 / 10
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
6 mai 2022 à 16:13
et ça la toujours fait, quelque soit la taille des images... même avec le slider d'origine avec 5 images...
0
Réponse 9 / 10
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
6 mai 2022 à 16:32
Sur le deuxième jsfiddle, il y a un saut d'une image en "sens arrière".
Bon week-end ! :)
0
Réponse 10 / 10
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 6
8 mai 2022 à 14:49
mais c'est PARFAIT avec le premier slider.
Merci pour tout !!!!
Bonne fin de week-end,
LM
0

Discussions similaires

Voxbone ? qui est-ce ?
fanfan54 -
djakool4 -

158 réponses