Le frecce slick Carousel non appaiono e funzionano come dovrebbero

Sto usando http://kenwheeler.github.io/slick/ ma non riesco a farlo funzionare come dovrebbe. Dopo aver eseguito il codice qui sotto, posso vedere che i file CSS e js sono caricati ma non riflessi. per esempio non ci sono frecce.Le frecce slick Carousel non appaiono e funzionano come dovrebbero

C'è qualcosa che potrebbe essere sbagliato (nota: Destro di file CSS e JS, così come il file html sono tutti situati all'interno della stessa cartella

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

fonte

2014-04-28 BusyBee

Ho appena provato il tuo codice e sembra tutto ok, il problema dovrebbe trattare con il layout di pagina.

si può provare con queste opzioni per controllare se la giostra sta giocando a destra

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

E poi si deve solo aggiungere som regole CSS e per vedere le frecce, solo per esempio:

<style> 
    body{ 
     background: green; 
    } 

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

fonte

2014-04-28 12:35:18 danjok

è perché la freccia sono di colore bianco per default, quindi sulla pagina bianca, non si può vedere.

essere sicuri che le frecce siano abilitati:

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

aggiungere il codice CSS per vedere:

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

fonte

2014-07-24 12:02:54 Intuitisoft

Oppure corpo { \t background-color: lightgray; \t}, vedrai le frecce. – ihue

prova ad avere uno z-index più alto per i pulsanti (puoi trovarli se controlli la tua pagina) –

Ho lo stesso problema, e ho scoperto che è proprio fuori dal .single-item Divsion, e questo la mia soluzione

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

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

solo funziona per me

fonte

2014-10-07 09:38:03

Scusa per imbattersi in questo vecchio articolo. Ma ho lo stesso problema. La tua soluzione funziona nel riportare le frecce all'interno del DIV. Eppure mostra solo la freccia destra. La freccia sinistra sembra nascosta dietro l'immagine. Le due frecce mostrano nel tuo caso? – Maxence

spero che questo aiuti qualcun altro là fuori, sono riuscito a farlo mostrare usando il codice di Eugene aggiungendo z-index: 3; per entrambi prev e next – Winona

Per me ha funzionato dopo aver aggiunto il carosello liscio all'interno di un wrapper <div class="content"> ... </div> che è un po 'più piccolo per avere lo spazio per il pulsante prev/next al di fuori del wrapper.

Il CSS follwoing sta lavorando per me:

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

Ho anche usato normalize.css per ottenere correttamente il centraggio dei PREV/NEXT pulsanti. Con out-normalizzare il centraggio non era perfetto.

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

fonte

2015-04-07 21:59:47 AWolf

Assicurarsi di aggiungere il seguente CSS per il vostro stile questo è da demo di default nel file chiazza di petrolio/index.html.

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

fonte

2016-10-22 04:45:19

Ciò può accadere se si utilizza il codice di esempio fornito, che comprende solo tre div di contenuto. Non appena ho aggiunto altre due div di contenuto, le frecce, i punti e la riproduzione automatica sono stati inizializzati.

fonte

2017-01-03 19:55:30 devdrc

Quindi nessuna delle risposte precedenti fa qualcosa, e la maggior parte non sono accurate. Ho ispezionato il mio DOM e i pulsanti di uno dei miei caroselli non sono nemmeno lì, motivo per cui non vengono visualizzati (non perché lo sfondo è bianco). Ho un altro carosello con le stesse impostazioni e le frecce mostrano bene. Sto ancora cercando di indagare su questo e aggiornerò se trovo una soluzione.

Soluzione: Sembra che per il mio problema, è necessario disporre di un contenitore div che avvolge il div a cui si applica la slick. Altrimenti, non funzionerà.

fonte

2017-10-03 16:11:20 Siraris

Le frecce slick Carousel non appaiono e funzionano come dovrebbero

risposta

Problemi correlati