Je travaille sur un carrousel multi-éléments, et je dois aligner 2 éléments, précédent, suivant - avant, après un conteneur qui est en position relative;

J'ai besoin:

  • Avant d'être aligné verticalement au milieu avant items
  • À côté de l'alignement vertical au milieu après items
  • pour Suivant, Précédent Je veux utiliser à la fin une police d'icônes

items utilisant javascript sera déplacé de gauche à droite, il doit donc être positionné de manière relative

J'ai essayé d'utiliser display:inline-block sur des éléments, mais ne fonctionne pas comme prévu; ! Peut être utilisé des flottants au lieu de display: inline-block pour la classe item-container. Je ne peux pas utiliser flexbox, car je dois prendre en charge les anciens navigateurs.

.carousel {
  width: 500px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.c-carousel__previous,
.c-carousel__next {
  display: inline-block;
}

.items {
  top: 0px;
  left: 0;
  position: relative;
  display: inline-block;
}

.item-container {
  width: 16.66667%;
  display: inline-block;
}
<div class="carousel">
  <div class="previous">
    previous
  </div>
  <div class="items">
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
  </div>
  <div class="next">
    next
  </div>
</div>
0
user3541631 23 mai 2018 à 08:39

4 réponses

Meilleure réponse

Les réponses ci-dessus sont bonnes, si tous les éléments sont statiques, mais j'ai mentionné que

'les éléments utilisant javascript seront déplacés de gauche à droite, ils doivent donc être positionnés de manière relative';

Ce mouvement de la classe «items» a créé plusieurs problèmes, dans tous les cas ci-dessus (comme «cacher» le contenu suivant / précédent, le débordement cachant le contenu qui devrait être visible;

Donc, la solution que j'ai trouvée:

  • supprimer overflow: hidden du carrousel
  • ajouter un nouveau conteneur pour les éléments, le conteneur d'éléments et utiliser overflow: hidden sur celui-ci
  • position suivante, précédente absolute
0
user3541631 23 mai 2018 à 07:04

Essaye ça

.carousel {
  width: 500px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.previous,
.next {
  display: inline-block;
  vertical-align: middle;
  width: 25px;
}

.items {
  top: 0px;
  left: 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;  
  width: 450px;
  overflow: hidden;
}

.item-container {
  width: 16.66667%;
  display: inline-block;
}
<div class="carousel">
  <div class="previous">
    previous
  </div>
  <div class="items">
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
  </div>
  <div class="next">
    next
  </div>
</div>

Et veuillez ajuster le width en conséquence.

2
Swooshant 23 mai 2018 à 05:58

Utilisez display: inline-block sur les classes correctes et donnez de la largeur à l'élément.

J'espère que cela fonctionnerait:

.carousel {
  width: 500px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.previous,
.next {
  display: inline-block;
  width: 50px;
  vertical-align: top;
}

.items {
  top: 0px;
  left: 0;
  position: relative;
  display: inline-block;
  width: calc(500px - 100px);
  overflow: hidden;
}

.item-container {
  width: 16.66667%;
  display: inline-block;
}
<div class="carousel">
  <div class="previous">
    previous
  </div>
  <div class="items">
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
  </div>
  <div class="next">
    next
  </div>
</div>
1
Master.Deep 23 mai 2018 à 05:59

Essayez vertical-align: middle dans le conteneur .items avec overflow: hidden

body {
  margin: 0;
}

.carousel {
  width: 500px;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.previous,
.next {
  display: inline-block;
}

.items {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}

.item-container {
  width: 16.66667%;
  margin: 0 5px;
  display: inline-block;
}
<div class="carousel">
  <div class="previous">previous</div>
  <div class="items">
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
    <div class="item-container">
      <a href="">
        <img src="http://via.placeholder.com/50x50">
      </a>
    </div>
  </div>
  <div class="next">next</div>
</div>
1
Bhuwan 23 mai 2018 à 05:46