Estoy usando http://kenwheeler.github.io/slick/ pero parece que no puede conseguir que funcione como debe. Al momento de ejecutar el código de abajo, puedo ver que los archivos CSS y js se cargan pero no se refleja. e.g no hay flechas.

Hay algo que se podría estar haciendo mal(nota: slick los archivos 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>
InformationsquelleAutor BusyBee | 2014-04-28

8 Comentarios

  1. 68

    es porque la flecha son de color blanco por defecto, por lo que en la página en blanco que no se puede ver.

    asegúrese de que las flechas están habilitados:

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

    agregar el código css para ver:

    <style>
    .slick-prev:before, .slick-next:before { 
        color:red !important;
    }
    </style>
    • O body { background-color:gris claro; } , podrás ver las flechas.
    • trate de tener un mayor z-index para los botones (se puede encontrar si usted inspeccionar su página)
    • Esta solución, y el collar de contenedor para crear espacio para las flechas que funcionó para mí. No necesito !importante en el color.
  2. 14

    A mí me ha funcionado después de la adición de la mancha de carrusel en el interior de un contenedor <div class="content"> ... </div> que es un poco más pequeño para tener el espacio para los botones prev/siguiente botón exterior de la envoltura.

    El siguiente CSS está trabajando para mí:

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

    También he utilizado normalize.css para conseguir el centrado de los botones prev/next correctamente. Con salida a normalizar el centrado no es perfecto.

    JS:

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

    CSS:

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

    HTML:

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

  3. 12

    Tengo el mismo problema, y me enteré de que acaba de salir de la .single-item divsion, y esta es mi solución

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

    solo funciona para mí

    • Siento un golpe en el presente artículo anterior. Pero tengo el mismo problema. La solución funciona en llevar las flechas hacia el interior de la DIV. Sin embargo, sólo la flecha de la derecha se muestra. La flecha hacia la izquierda parece haberse ocultado detrás de la imagen. Hacer las dos flechas que muestran en su caso ?
    • espero que esto ayude a alguien más por ahí, me las arreglé para conseguir lo que muestra el uso de Eugene del código mediante la adición de z-index:3; por tanto prev y next
  4. 3

    Acabo de probar el código y parece que todo ok, el problema debe lidiar con el diseño de la página.

    Puedes probar con estas opciones para comprobar si el carrusel está tocando

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

    Y, a continuación, sólo debe agregar algunas reglas css a ver las flechas, por ejemplo:

    <style>
        body{
            background: green;
        }
    
        .single-item{
            margin-left: 10%;
            margin-right: 10%;
        }
    </style>
  5. 2

    Asegúrese de agregar la siguiente regla css a su estilo este es de la demo por defecto en el slick/index.html archivo.

    <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>
  6. 1

    Esto puede suceder si se utiliza el código de ejemplo proporcionado, que sólo incluye tres divs. Tan pronto como he añadido dos más contenido divs, las flechas, puntos, y la reproducción automática se inicializa.

  7. 0

    Por lo que ninguna de las respuestas anteriores hacer nada, y la mayoría son errado. He inspeccionado mi DOM, y los botones para uno de mis carruseles son ni siquiera existe, que es la razón por la que no se muestran (no porque el fondo es blanco). Tengo otro carrusel con la misma configuración, y las flechas muestran bien. Todavía tratando de investigar este y actualizará si puedo encontrar una solución.

    Solución: parece que para mi problema, usted necesita tener un div de contenedor de envolver el div que aplicar slick para. De lo contrario, no trabajo.

  8. 0

    Lo que resolvió mi problema es que ellos no habían apropiado de z-index

    .slick-prev, .slick-next {
      z-index: 1000;
    }

    resuelto el problema

Dejar respuesta

Please enter your comment!
Please enter your name here