javascript - bootstrap - slick slider
Las flechas Slick Carousel no aparecen y funcionan como deberían. (7)
Estoy usando http://kenwheeler.github.io/slick/ pero parece que no funciona como debería. Al ejecutar el siguiente código, puedo ver que los archivos CSS y js se cargan pero no se reflejan. por ejemplo, no hay flechas.
¿Hay algo que pueda estar haciendo mal? (Nota: los archivos slick CSS y js, así como el archivo html se encuentran todos dentro de la misma carpeta
<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>
Acabo de probar su código y parece que todo está bien, el problema debería tratar con el diseño de la página.
Puede probar con estas opciones para verificar si el carrusel está funcionando correctamente
$(document).ready(function(){
$(''.single-item'').slick({
autoplay:true,
autoplaySpeed: 1000
});
});
Y luego debes agregar algunas reglas css para ver las flechas, solo por ejemplo:
<style>
body{
background: green;
}
.single-item{
margin-left: 10%;
margin-right: 10%;
}
</style>
Asegúrese de agregar el siguiente CSS a su estilo, esto es de demostración por defecto en el archivo slick / 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>
Entonces, ninguna de las respuestas anteriores hace nada, y la mayoría son inexactas. He inspeccionado mi DOM, y los botones de uno de mis carruseles ni siquiera están allí, por lo que no se muestran (no porque el fondo sea blanco). Tengo otro carrusel con la misma configuración, y las flechas se muestran bien. Todavía intento investigar esto y lo actualizaré si encuentro una solución.
Solución: parece que para mi problema, necesitas tener un contenedor div que ajuste el div al que apliques slick. De lo contrario, no funcionará.
Esto puede suceder si usa el código de muestra proporcionado, que solo incluye tres divisiones de contenido. Tan pronto como agregué dos DIVs de contenido más, se inicializaron las flechas, los puntos y la reproducción automática.
Para mí funcionó después de agregar el tándem carrusel dentro de un contenedor <div class="content"> ... </div> que es un poco más pequeño para tener el espacio para el botón anterior / siguiente fuera del contenedor.
El siguiente CSS funciona para mí:
.content {
margin: auto;
padding: 20px;
width: 80%;
}
También he usado normalize.css para obtener el centrado de los botones prev / next correctamente. Sin normalizar, el centrado no era perfecto.
$(''.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>
Tengo el mismo problema, y descubrí que está fuera de la .single-item , y esta es mi solución
<style>
.slick-prev {
margin-left: 40px;
}
.slick-next {
margin-right: 40px;
}
</style>
Simplemente funciona para mí
es porque las flechas son blancas por defecto, por lo que en la página blanca no se puede ver.
asegúrese de que las flechas estén habilitadas:
$(''.single-item'').slick({
arrows: true
});
agregue el código css para ver:
<style>
.slick-prev:before, .slick-next:before {
color:red !important;
}
</style>