Slick Carousel Pfeile nicht erscheinen und arbeiten, wie sie sollten

Ich benutze http://kenwheeler.github.io/slick/ aber kann nicht scheinen, es funktioniert so, wie es sollte. Beim Ausführen des folgenden Codes kann ich sehen, dass die CSS- und JS-Dateien geladen, aber nicht wiedergegeben werden. z.B. gibt es keine Pfeile.Slick Carousel Pfeile nicht erscheinen und arbeiten, wie sie sollten

Gibt es etwas, was ich falsch gemacht werden kann (Anmerkung: Slick CSS und JS-Dateien, sowie die HTML-Datei

<html> 

<head> 

<link rel="stylesheet" type="text/css" href="../Slick/slick.css" /> 

</head> 


<body> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="../Slick/slick.min.js"></script>  

<h2>title</h2> 

<script type="text/javascript"> 



$(document).ready(function(){ 

     $('.single-item').slick(); 

     }); 
    }); 
</script> 

<div> 
    <div class="single-item"> 
     <div > <img src="../Slick/F1.jpg" alt="bkj"></div> 
     <div > <img src="../Slick/F1.jpg" alt="bkj"></div> 
     <div > <img src="../Slick/F1.jpg" alt="bkj"></div> 
    </div> 
</div> 

</body> 

</html>

Quelle

2014-04-28 BusyBee

Code Ich habe versucht, im gleichen Ordner alle befinden sich nur, und es scheint alles ok, sollte das Problem mit dem Seitenlayout befassen.

Sie können mit diesen Optionen versuchen, wenn das Karussell zu überprüfen ist richtig

$(document).ready(function(){ 
    $('.single-item').slick({ 
     autoplay:true, 
     autoplaySpeed: 1000 
    }); 
});

spielt und dann sollten Sie nur som hinzufügen e CSS-Regeln Pfeile, nur zum Beispiel, um zu sehen:

<style> 
    body{ 
     background: green; 
    } 

    .single-item{ 
     margin-left: 10%; 
     margin-right: 10%; 
    } 
</style>

Quelle

2014-04-28 12:35:18 danjok

es ist, weil der Pfeil standardmäßig weiß ist, so auf der weißen Seite, die Sie nicht sehen können.

sicher sein, dass die Pfeile aktiviert sind:

$('.single-item').slick({ 
arrows: true 
    });

den CSS-Code hinzufügen, um zu sehen:

<style> 
.slick-prev:before, .slick-next:before { 
    color:red !important; 
} 
</style>

Quelle

2014-07-24 12:02:54 Intuitisoft

Oder Körper { \t Hintergrundfarbe: lightgray; \t}, werden Sie die Pfeile sehen. – ihue

versuchen Sie einen höheren Z-Index zu den Tasten (kann sie finden, wenn Sie Ihre Seite überprüfen) –

ich das gleiche Problem haben, und ich fand heraus, dass es gerade aus dem .single-item ist Divsion, und dies ist meine Lösung

<style> 
.slick-prev { 
    margin-left: 40px; 
    } 

    .slick-next { 
    margin-right: 40px; 
    } 
</style>

es funktioniert nur für mich

Quelle

2014-10-07 09:38:03

Entschuldigung, um auf diesen alten Gegenstand stoßen. Aber ich habe das gleiche Problem. Deine Lösung funktioniert, indem du die Pfeile zurück in das DIV bringst. Doch nur der rechte Pfeil zeigt. Der linke Pfeil scheint hinter dem Bild verborgen zu sein. Zeigen beide Pfeile in deinem Fall? – Maxence

hoffe, das hilft jemand anderen da draußen, ich habe es geschafft, es mit Eugene-Code durch Hinzufügen von Z-Index: 3; für beide, prev und next – Winona

Für mich funktionierte es nach dem Hinzufügen der glatten Karussell innerhalb einer Umhüllung <div class="content"> ... </div>, die ein bisschen kleiner ist, um den Platz für die prev/next-Taste außerhalb des Wrappers zu haben.

Die follwoing CSS arbeitet für mich:

.content { 
    margin: auto; 
    padding: 20px; 
    width: 80%; 
}

ich auch normalize.css verwendet haben richtig die Zentrierung der prev/next Tasten zu erhalten. Ohne Normalisierung war die Zentrierung nicht perfekt.

$('.slickslide').slick({ 
 
       dots: true, 
 
       infinite: true, 
 
       speed: 500, 
 
       autoplay: true, 
 
       slidesToShow: 1, 
 
       slidesToScroll: 1});

.slickslide { 
 
    height: 200px; 
 
    background: lightgray; 
 
} 
 
body { 
 
    background-color: lightblue; 
 
} 
 
.content { 
 
    margin: auto; 
 
    padding: 20px; 
 
    width: 80%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick-theme.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.css" rel="stylesheet"/> 
 
<div class="content"> 
 
     <div class="slickslide" slick=""> 
 
      <div>Syling of left and right arrow is OK now. Required normalize.css and a content wrap around the slickslide with a smaller width.</div> 
 
      <div>your content2</div> 
 
      <div>your content3</div> 
 
     </div> 
 
    </div>

Quelle

2015-04-07 21:59:47 AWolf

Achten Sie auf die folgenden CSS zu Ihrem Styling hinzuzufügen diese von Demo ist in der Slick/index.html-Datei standardmäßig.

<style type="text/css"> 
html, body { 
    margin: 0; 
    padding: 0; 
} 

* { 
    box-sizing: border-box; 
} 

.slider { 
    width: 50%; 
    margin: 100px auto; 
} 

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

.slick-slide img { 
    width: 100%; 
} 

.slick-prev:before, 
.slick-next:before { 
    color: black; 
} 
</style>

Quelle

2016-10-22 04:45:19

Dies kann passieren, wenn Sie den mitgelieferten Beispielcode verwenden, der nur drei Content-Divs enthält. Sobald ich zwei weitere Inhalts-Divs hinzugefügt habe, wurden die Pfeile, Punkte und Autoplay initialisiert.

Quelle

2017-01-03 19:55:30 devdrc

Also keine der obigen Antworten etwas tun, und die meisten sind ungenau. Ich habe mein DOM inspiziert, und die Tasten für eines meiner Karussells sind nicht einmal da, weshalb sie nicht angezeigt werden (nicht weil der Hintergrund weiß ist). Ich habe ein anderes Karussell mit den gleichen Einstellungen, und die Pfeile zeigen gut. Versuche immer noch, dies zu untersuchen und werde aktualisieren, wenn ich eine Lösung finde.

Lösung: Es scheint, dass für mein Problem, müssen Sie ein Container div Wrapping der div, die Sie anwenden, slick zu. Sonst wird es nicht funktionieren.

Quelle

2017-10-03 16:11:20 Siraris

Slick Carousel Pfeile nicht erscheinen und arbeiten, wie sie sollten

Antwort

Verwandte Themen