Faire passer un Slider de 5 images à 10 images

Résolu

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Faire passer un Slider de 5 images à 10 images
Passer de windows 7 à windows 10 - Accueil - Mise à jour
Des images - Guide
Clé de produit windows 10 gratuit - Guide
Passer de qwerty a azerty - Guide
Passer de windows 10 à windows 11 gratuitement - Guide

10 réponses

Réponse 1 / 10

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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.

Réponse 2 / 10

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

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

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

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%);
  }
}

Réponse 3 / 10

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Bonjour,

Il faudrait aussi partager le code html correspondant pour voir le soucis.

Réponse 4 / 10

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

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

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

Posez votre question

Réponse 5 / 10

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

Merci beaucoup Pitet :) ça semble tout simple ^^
Par contre, je n'ai aucune idée pour les Keyframes :/
Au cas où... ;)
Encore merci !!!!

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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/

Réponse 6 / 10

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

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

Réponse 7 / 10

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

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 !!!

Réponse 8 / 10

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

et ça la toujours fait, quelque soit la taille des images... même avec le slider d'origine avec 5 images...

Réponse 9 / 10

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

Sur le deuxième jsfiddle, il y a un saut d'une image en "sens arrière".
Bon week-end ! :)

Réponse 10 / 10

lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention 6

mais c'est PARFAIT avec le premier slider.
Merci pour tout !!!!
Bonne fin de week-end,
LM

Discussions similaires

Voxbone ? qui est-ce ?

Votre réponse

Discussions similaires