web-dev-qa-db-fra.com

Carrousel lisse - la force glisse pour avoir la même hauteur

J'ai des problèmes avec le plugin Slick JS carrousel avec plusieurs slidesToShow qui ont des hauteurs différentes.

J'ai besoin que les diapositives aient le même hauteur, mais avec CSS flex-box, cela ne fonctionne pas car les diapositives ont des définitions CSS en conflit.

Aussi n'a rien trouvé utile dans les forums et sur le web.

Si quelque chose fonctionne, je posterai la solution ici . Bien sûr, toutes les suggestions sont les bienvenues.

HTML

<div class="slider">
  <div class="slide">
    <p>Lorem ipsum.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
  </div>
  <div class="slide">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>

JS

$('.slider')
.slick({
    autoplay: false,
    dots: false,
    infinite: false,
    arrows: false,
    slidesToShow: 2,
    slidesToScroll: 2,
    rows: 0
});

CSS

.slide {
  height: 100%;
  background-color: #ccc;
  padding: 10px;
}
javascriptjquerycssslick.jsweb-frontend
6
JJaun

Ok les gars, j'ai trouvé une solution facile. Ajoutez simplement une fonction de rappel setPosition (se déclenche après des changements de position/taille) qui définit la hauteur des diapositives à la hauteur du curseur (slideTrack):

JS

$('.slider').slick({
    autoplay: false,
    dots: false,
    infinite: false,
    arrows: false,
    slidesToShow: 2,
    slidesToScroll: 2,
  rows: 0
})
.on('setPosition', function (event, slick) {
    slick.$slides.css('height', slick.$slideTrack.height() + 'px');
});

N'oubliez pas que vos diapositives doivent avoir toute la hauteur:

CSS

.slide {
  height: 100%;
}

Voici un petit jsFiddle à démontrer: https://jsfiddle.net/JJaun/o29a4q45/

13
JJaun

Ajoutez quelques styles CSS et le tout sera prêt:

.slick-track
{
    display: flex !important;
}

.slick-slide
{
    height: inherit !important;
}

Prendre plaisir! :-)

5
Phoenix

J'ai une autre solution css seulement. vous pouvez remplacer les éléments flottants avec table/table-cell.

$(function() {
  $('.slider')
    .slick({
      autoplay: false,
      dots: false,
      infinite: false,
      arrows: false,
      slidesToShow: 2,
      slidesToScroll: 2,
      rows: 0
    });
})
.slide {
  background-color: #ccc;
  padding: 10px;
  display: table-cell !important;
  float: none !important;
}

.slick-track {
  display: table !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>


<div class="slider">
  <div class="slide">
    <p>Lorem ipsum.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
  </div>
  <div class="slide">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>

2
ocanal

JS a écrit un rapide hack pour créer une galerie avec différentes hauteurs d’image et un peu plus soignée.

Il fait ce qui suit:

  1. Obtenir une instance de curseur
  2. Découvrez sa hauteur - la hauteur des images sera définie sur celle-ci
  3. Obtenir le src attr pour chaque image et le cacher

  4. Définissez src attr sur le parent de l'image en tant qu'image d'arrière-plan avec du CSS.

    function equalizeImagesHeight(slider) {
    const slides = slider.find('.slick-slide');
    const imgHeight = $(slider)[0].clientHeight;
    slides.each(function(slide){
        const src = $(this).find('img').hide().attr('src');
        $(this).css({
            backgroundImage:'url('+src+')',
            minHeight: imgHeight,
            backgroundSize: "cover",
            backgroundPosition: "center"
        });
    });
};

    equalizeImagesHeight ($ ('. my-slider'));

0
Damian Drozdowicz

La solution js de @JJaun n’est pas parfaite, car vous voyez la hauteur sauter si vous utilisez une image d’arrière-plan pour les diapositives. Cela a fonctionné pour moi:

.slick-track {
  display: flex !important;
}

.slick-slide {
  height: auto;
}
0
Artem Bruner