Slick Slider Nächsten Pfeile nicht angezeigt

Ich versuche, den weiter und zurück-Pfeile, um zu zeigen, bis neben dem Produkt, Schieberegler, wie in der Slick-Slider-Beispiel. Aber mein Beispiel scheint nicht zu laden, die entsprechenden Schriftarten zu machen, dass passieren.

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/

InformationsquelleAutor Schwan Park | 2015-03-11

In Ihrem Turnschuh, Sie hatte vergessen hinzuzufügen das slick-theme.css-Datei als externe Ressource. Wenn Sie wollten, Folgen Sie den Standard-styling des Autors, müssen Sie die Datei. Oder, wenn Sie möchten, dass Ihre eigenen styling dann bitte, gehen Sie vor und machen Sie Ihre eigenen styling und machen es youw eigenes Thema .css-Datei oder so etwas.

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

und das css für die Sichtbarkeit,

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

Die updted jsFiddle finden Sie hier.

Code-snippet hier...

JS:

$(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
  });
});

CSS:

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;
      }

HTML:

<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

Vielen Dank für Euch Hilfe!!!
Froh, eine Hilfe sein. Nun ist dies eine akzeptable Lösung für dein problem, bitte markieren Sie es (das grüne Häkchen), so dass in Zukunft jemand das gleiche Problem, dieses kann in handliches kommen
Ich war auch slick-theme.css, aber der Pfeil standardmäßig die Farbe weiß, die auf einem weißen hintergrund ist effektiv unsichtbar. @Sai css Farbe red macht es offensichtlich, dass Sie da sind.
In deinem HTML haben, sollten Sie niemals eine Seite direkt von github. Suche für ein CDN. Beispiel: cdnjs.com/libraries/slick-carousel

InformationsquelleAutor Sai

1

Wenn Sie inklusive slick-theme.css und immer noch Probleme, es ist, weil das Thema erwartet, werden in einem Unterordner (z.B. /Thema/slick-theme.css), aber die Standard-download-legt das slick-theme.css im gleichen Ordner wie ajax-loader.gif und den Ordner "Schriftarten", die beide über einen Verweis von den Thema.

Lösung:
Setzen Sie die slick-theme.css-Datei in einem Unterordner oder Bearbeiten der css, so dass es nicht mehr versucht, in einen übergeordneten Ordner. Möglicherweise müssen Sie auch ändern Sie die Farbe der Pfeile, wie vorgeschlagen, durch Sai

InformationsquelleAutor Keypad
0

wenn der Pfeil auf einem weißen hintergrund-fügen Sie einfach eine Farbe für Sie in Ihrem css wie dieses:
```
.slick-prev:before, .slick-next:before {
  color: #09529b !important;
}
```
InformationsquelleAutor Mittcho

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.