web-dev-qa-db-de.com

Slick Slider Next Pfeile werden nicht angezeigt

Ich versuche, die nächsten und vorherigen Pfeile neben dem Produktschieberegler anzuzeigen, genau wie im Slick-Slider-Beispiel. Mein Beispiel scheint jedoch nicht die entsprechenden Schriftarten zu laden, um dies zu ermöglichen.

Hier ist mein 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/

9
Schwan Park

In Ihrer Geige hatten Sie vergessen, die Datei slick-theme.css als externe Ressource hinzuzufügen. Wenn Sie dem Standardstil des Autors folgen möchten, benötigen Sie diese Datei. Oder wenn Sie Ihr eigenes Styling wünschen, dann machen Sie Ihr eigenes Styling und machen Sie es mit Ihrer eigenen .css-Datei.

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

und dieses CSS für Sichtbarkeit,

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

Das aktualisierte jsFiddle kann hier gefunden werden .

Code-Ausschnitt hier ...

$(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>

Hoffe das hilft

19
Sai

Wenn Sie slick-theme.css hinzugefügt haben und immer noch Probleme haben, liegt dies daran, dass das Design erwartet, dass es sich in einem Unterordner befindet (z. B. /theme/slick-theme.css), aber der Standarddownload fügt die slick-theme.css in demselben Ordner ein Ordner wie ajax-loader.gif und den Schriftartenordner, auf die beide vom Design verwiesen werden.

Lösung: Legen Sie die Datei slick-theme.css in einem Unterordner ab, oder bearbeiten Sie die Datei css so, dass sie nicht mehr versucht, in einem übergeordneten Ordner zu suchen. Möglicherweise müssen Sie auch die Farbe der Pfeile ändern, wie von Sai vorgeschlagen.

1
Keypad

wenn sich der Pfeil auf einem weißen Hintergrund befindet, fügen Sie einfach eine Farbe in Ihrem CSS-Code hinzu:

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