web-dev-qa-db-fra.com

Slick Slider Next Les flèches ne s'affichent pas

J'essaie de faire apparaître les flèches suivante et précédente à côté du curseur de produit, comme dans l'exemple de Slick Slider. Mais mon échantillon ne semble pas charger les polices appropriées pour y arriver.

Voici mon code:

HTML

  <div class="slider">
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100">
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100">
      </div>
    </div>

CSS

  body{
    background-color: #fff;
  }
  .slider{
    margin: 60px auto;
    width: 500px;
  }
  div{
    height: 100%;
  }
  p{
    text-align: center;
    font-size: 12px;
    color: white;
  }

JavaScript

$(document).ready(function(){
        $('.slider').slick({
            centerMode: true,
            centerPadding: '60px',
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 1,
            arrows: true
        });
      });

DEMO: http://jsfiddle.net/schwany23/j39j568c/

jqueryhtmlcssslider
9
Schwan Park

Dans votre violon, vous avez oublié d’ajouter le fichier slick-theme.css en tant que ressource externe. Si vous voulez suivre le style par défaut de l'auteur, vous avez besoin de ce fichier. Ou si vous voulez votre propre style, alors allez-y s'il vous plaît et créez votre propre style en le transformant en fichier de thème .css.

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>

et ce css pour la visibilité,

.slick-prev:before, .slick-next:before{
    color:red;
}

Le jsFiddle modifié peut être trouvé ici .

Extrait de code ici ...

$(document).ready(function() {
  $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    dots: true,
    /* Just changed this to get the bottom dots navigation */
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: true
  });
});
body {
        background-color: #fff;
      }
      .slider {
        margin: 60px auto;
        width: 500px;
      }
      div {
        height: 100%;
      }
      p {
        text-align: center;
        font-size: 12px;
        color: white;
      }
      /* added the following to give the background color of the arrows as red for visibility, the default which can be found in the slick-theme.css was white */
      .slick-prev:before,
      .slick-next:before {
        color: red;
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>

<div class="slider">
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100" />
  </div>
</div>

J'espère que cela t'aides

19
Sai

Si vous avez inclus slick-theme.css et que vous rencontrez toujours des problèmes, c'est que le thème se trouve dans un sous-dossier (par exemple /theme/slick-theme.css) mais que le téléchargement par défaut place le fichier slick-theme.css dans le même dossier comme ajax-loader.gif et le dossier des polices qui sont tous deux référencés à partir du thème.

Solution: Placez le fichier slick-theme.css dans un sous-dossier ou modifiez le fichier css afin qu’il n’essaye plus de chercher dans un dossier parent. Vous devrez peut-être aussi changer la couleur des flèches comme suggéré par Sai

1
Keypad

si les flèches sont sur un fond blanc, ajoutez une couleur pour elles dans votre css comme ceci:

.slick-prev:before, .slick-next:before {
  color: #09529b !important;
}
0
Mittcho