web-dev-qa-db-fra.com

Comment ajouter des espaces entre les éléments du carrousel Slick

Je souhaite ajouter de l'espace entre deux éléments de carrousel, mais je ne veux pas d'espace avec le rembourrage, car cela réduit la taille de mon élément (et je ne le souhaite pas).

enter image description here

    $('.single-item').slick({
        initialSlide: 3,
        infinite: false
    });
.slick-slider {
    margin:0 -15px;
}
.slick-slide {
    padding:10px;
    background-color:red;
    text-align:center;
    margin-right:15px;
    margin-left:15px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-12" style="background-color:gray;">
            <div class="slider single-item" style="background:yellow">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </div>
</div>

D'une certaine manière, je gagne de la place des deux côtés, j'essaie de l'enlever.

jqueryhtml5css3jquery-pluginsslick.js
24
Sopo

Oui, j'ai trouvé la solution au problème.

  • Créez un curseur avec une largeur supplémentaire des deux côtés (que nous pouvons utiliser pour ajouter de l’espace aux deux côtés).
  • Create Inner Item Content avec la largeur et la marge appropriées des deux côtés (ceci doit correspondre à la taille réelle de votre emballage)
  • Terminé
0
Sopo
    /* the slides */
  .slick-slide {
    margin: 0 27px;
  }
  /* the parent */
  .slick-list {
    margin: 0 -27px;
  }

Ce problème est signalé comme un problème (# 582) sur le github du plugin, mais cette solution y est également mentionnée ( https://github.com/kenwheeler/slick/issues/582 )

53
Dishan TD

La réponse de @Dishan TD fonctionne bien, mais j'obtiens de meilleurs résultats en n'utilisant que la marge gauche.

Et pour que tout le monde comprenne mieux la chose, vous devez faire attention aux deux nombres opposés: 27 et -27.

  /* the slides */
  .slick-slide {
    margin-left:27px;
  }

  /* the parent */
  .slick-list {
    margin-left:-27px;
  }
8
Pablo S G Pacheco

Le slick-slide a une division d’emballage interne que vous pouvez utiliser pour créer un espacement entre les diapositives sans casser le design:

.slick-list {margin: 0 -5px;}
.slick-slide>div {padding: 0 5px;}
2
Sushil Thapa

Juste réparer css:

/* the slides */
.slick-slider {
    overflow: hidden;
}
/* the parent */
.slick-list {
    margin: 0 -9px;
}
/* item */  
.item{
    padding: 0 9px;
}
2
Anh Hoai Vui Le

Ajouter

centerPadding: '0'

Les paramètres du curseur ressemblent à:

$('.phase-slider-one').slick({
     centerMode: true,
     centerPadding: '0',
     responsive: [{breakpoint: 1024,},{breakpoint: 600,},{breakpoint: 480,}]
});

Je vous remercie

1
MJ Mikz

Depuis les dernières versions, vous pouvez simplement ajouter margin à votre glissière:

.slick-slide {
  margin: 0 20px;
}

Aucune sorte de marge négative n'est nécessaire, le calcul de Slick étant basé sur les éléments outterHeight.

1
Orlandster

Avec l'aide de pseudo-classes, supprimez les marges du premier et du dernier enfant et utilisez adaptive height true dans le script. Essayez ceci violon

Un de plus Démo

 $('.single-item').slick({
        initialSlide: 3,
        infinite: false,
        adaptiveHeight: true
    });
1
stanze

Si vous voulez un espace plus grand entre les diapositives + pour ne pas réduire la largeur de la diapositive, cela signifie que vous devrez afficher moins de diapositives. Dans ce cas, il suffit d'ajouter un paramètre pour afficher moins de diapositives.

    $('.single-item').slick({
      initialSlide: 3,
      infinite: false,
      slidesToShow: 3
    });

Une autre option consiste à définir la largeur d'une diapositive par css sans définir le nombre de diapositives à afficher.

0
Asaf David

Essayez d'utiliser des pseudo-classes telles que: first-child &: last-child pour supprimer le remplissage supplémentaire du premier et du dernier enfant.

Inspectez le code généré du slick slider et essayez d’enlever le rembourrage.

J'espère que ça va aider !!! 

0
Manish Kumar

Par exemple: Ajoutez cette donnée-attr à votre div première couche: data-space = "7"

                    $('[data-space]').each(function () {
                        var $this = $(this),
                            $space = $this.attr('data-space');

                        $('.slick-slide').css({
                            marginLeft: $space + 'px',
                            marginRight: $space + 'px'
                        });

                        $('.slick-list').css({
                            marginLeft: -$space + 'px',
                            marginRight: -$space/2 + 'px'
                        })
                    });
0
Krzysztof