[Résolu] Espacer slide avec slick

Question

MickFR

14 May 2018 à 17:45

Bonjour,

Je me permets de vous contacter car je souhaite créer un carrousel en utilisant "slick" (http://kenwheeler.github.io/slick/).

J'ai suivi les instructions pour l'installation mais je ne parviens pas à espacer les div. Elles sont collées les une aux autres.

Dans les commentaires, il est indiqué d'ajouter :

.slick-slide{
   width:230px;
   margin-right: 15px;
   margin-left: 15px;
}

Auriez-vous une piste à me donner pour résoudre ce problème ?

Code utilisé : http://jsfiddle.net/ybat477s/

Merci Smiley smile


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
   <!-- <link rel="stylesheet" href="reset-meyer-light.css"/> -->
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  <link rel="stylesheet" href="styles.css"/>
</head>
<body>
   <div class="page">
   
    <div class="center">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>
</div>
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="slick/slick.min.js"></script>
  <script src="global.js"></script>
</body>
</html>


@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '?';
}
[dir='rtl'] .slick-prev:before
{
    content: '?';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '?';
}
[dir='rtl'] .slick-next:before
{
    content: '?';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}

.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}


/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
    width: 200px;
    margin-right: 50px;
    margin-left: 50px;
}

.slick-slide
{
    display: block;
    width: 200px;
    margin-right: 50px;
    margin-left: 50px;
}

.slick-slide img
{
    display: block;
    width: 200px;
    margin-right: 50px;
    margin-left: 50px;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

bazooka07

14 May 2018 à 18:21

Tu n'as pas bien regardé la démo proposée par l'auteur !
Sa structure de balises est comme ceci

<h2>Single Items</h2>
<div class="slider single-items">
	<div><h3>1</h3></div>
	<div><h3>2</h3></div>
	<div><h3>3</h3></div>
	<div><h3>4</h3></div>
	<div><h3>5</h3></div>
	<div><h3>6</h3></div>
	<div><h3>7</h3></div>
	<div><h3>8</h3></div>
	<div><h3>9</h3></div>
</div>

Normalement tu aurais dû faire comme ceci :

<h2>Single Items</h2>
<div class="slider single-items">
	<div><div>Content n°1</div></div>
	<div><div>Content n°2</div></div>
	<div><div>Content n°3</div></div>
	<div><div>Content n°4</div></div>
	<div><div>Content n°5</div></div>
	<div><div>Content n°6</div></div>
	<div><div>Content n°7</div></div>
	<div><div>Content n°8</div></div>
	<div><div>Content n°9</div></div>
</div>

Si tu veux personnaliser les espaces entre les contents, cela se passe comme ceci :

#slider > div  { padding: 0 0.5rem; }

Modifié par bazooka07 (14 May 2018 - 18:22)

MickFR

15 May 2018 à 10:02

Bonjour,

Merci de ta réponse.

J'ai modifié la structure en suivant tes indications (je suis allé lire la documentation de l'auteur).

Je ne parviens toujours pas à espacer les div.

Je me permets de joindre mon dossier de test (uniquement l'intégration du carrousel donc léger). Si une personne a le temps d'y jeter un petit coup d'œil... Smiley smile

: https://we.tl/Mak2asjNoD

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!-- <link rel="stylesheet" href="css/reset-meyer-light.css"/> -->
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
        <link rel="stylesheet" href="css/styles.css"/>
    </head>
    <body>

        <div class="page">
            <h2>Single Items</h2>
            <div class="slider multiple-items">
                <div><div>Content n°1<br>Deuxièle ligne</div></div>
                <div><div>Content n°1<br>Deuxièle ligne</div></div>
                <div><div>Content n°1<br>Deuxièle ligne</div></div>
                <div><div>Content n°1<br>Deuxièle ligne</div></div>
                <div><div>Content n°1<br>Deuxièle ligne</div></div>
                <div><div>Content n°1<br>Deuxièle ligne</div></div>
                <div><div>Content n°1<br>Deuxièle ligne</div></div>
                <div><div>Content n°1<br>Deuxièle ligne</div></div>
            </div>
        </div>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="slick/slick.min.js"></script>
        <script src="js/global.js"></script>
    </body>
</html>

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}

.slider div  { margin: 0 0.5rem; background-color: antiquewhite; }


.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

~~supprimé~~

15 May 2018 à 10:05

Salut,

MickFR a écrit :

Je me permets de joindre mon dossier de test (uniquement l'intégration du carrousel donc léger). Si une personne a le temps d'y jeter un petit coup d'œil... : https://we.tl/Mak2asjNoD

transposé sur Codepen.io ce serait nettement plus simple et engageant... Smiley cligne

MickFR

15 May 2018 à 10:36

Le rendu n'est pas celui obtenu en local...
J'espère que vous y verrez quelque chose !

https://codepen.io/anon/pen/bMjyoO

bazooka07

15 May 2018 à 12:18

C'est une usine à gaz cette bibliothèque Javascript !
Elle modifie de façon importante la structure HTML de départ.

Dans le fichier slick.css, la règle suivante est trop générale. Il faut la supprimer ou la mettre en commentaire:

.slider div {
    margin: 0 0.5rem;
    background-color: antiquewhite;
}

Vue que la strcture de la page est complétement bouleversée, il faut marquer les DIVs avec des class

            <div class="slider multiple-items">
                <div class="class1 color1"><div>Content n°1<br>Deuxièle ligne</div></div>
                <div class="class1 color2"><div>Content n°2<br>Deuxièle ligne</div></div>
                <div class="class1 color3"><div>Content n°3<br>Deuxièle ligne</div></div>
                <div class="class1 color1"><div>Content n°4<br>Deuxièle ligne</div></div>
                <div class="class1 color2"><div>Content n°5<br>Deuxièle ligne</div></div>
                <div class="class1 color3"><div>Content n°6<br>Deuxièle ligne</div></div>
                <div class="class1 color1"><div>Content n°7<br>Deuxièle ligne</div></div>
                <div class="class1 color2"><div>Content n°8<br>Deuxièle ligne</div></div>
                <div class="class1 color3"><div>Content n°9<br>Deuxièle ligne</div></div>
            </div>

Ensuite rajouter ces règles dans styles.css

.class1 { 
    border: 1px solid #444;
    padding: 0 1rem;
    background-color: #444;
}
.class1.color1 > div {
    background-color: wheat;
}
.class1.color2 > div {
    background-color: cyan;
}
.class1.color3 > div {
    background-color: orange;
}

Mais bon cela restera une usine à gaz

MickFR

15 May 2018 à 13:23

Merci de ta réponse. J'obtiens le résultat souhaité Smiley cligne

Peut-être ai-je intérêt à rechercher une bibliothèque plus légère pour arriver au même résultat.
Modifié par MickFR (15 May 2018 - 13:44)

bazooka07

15 May 2018 à 14:37

Tu peux faire une recherche sur cdnjs.com ou github.com avec "slider" ou "slider swipe"
swipe=balayage pour les smartphones
Sinon qwant ou google peuvent être tes amis

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Espacer slide avec slick