web-dev-qa-db-fra.com

Les flèches lisses du carrousel n'apparaissent pas et ne fonctionnent pas comme elles le devraient

J'utilise http://kenwheeler.github.io/slick/ mais n'arrive pas à le faire fonctionner comme il se doit. Lors de l'exécution du code ci-dessous, je peux voir que les fichiers CSS et js sont chargés mais ne sont pas reflétés. par exemple, il n'y a pas de flèches.

Y a-t-il quelque chose que je pourrais mal faire (note: les fichiers slick CSS et js, ainsi que le fichier html se trouvent tous dans le même dossier

<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>
javascriptcarousel
41
BusyBee

c'est parce que les flèches sont blanches par défaut, donc vous ne pouvez pas les voir sur la page blanche.

assurez-vous que les flèches sont activées:

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

ajoutez le code css pour voir:

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

Pour moi, cela a fonctionné après l'ajout du carrousel glissant à l'intérieur d'une enveloppe <div class="content"> ... </div> c'est un peu plus petit d'avoir l'espace pour le bouton prev/next en dehors du wrapper.

Le CSS suivant fonctionne pour moi:

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

J'ai aussi utilisé normalize.css pour obtenir le centrage correct des boutons précédent/suivant. Sans normaliser, le centrage n'était pas parfait.

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

J'ai le même problème, et j'ai découvert qu'il venait d'être sorti du .single-item divsion, et ceci ma solution

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

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

ça marche juste pour moi

12
Eugene Wang

Je viens d'essayer votre code et il semble que tout va bien, le problème devrait concerner la mise en page.

Vous pouvez essayer avec ces options pour vérifier si le carrousel joue bien

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

Et puis vous devriez juste ajouter quelques règles CSS pour voir les flèches, juste par exemple:

<style>
    body{
        background: green;
    }

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

Assurez-vous d’ajouter le css suivant à votre style, il s’agit d’une démonstration par défaut dans le fichier 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>
2
R.Cha

Cela peut se produire si vous utilisez l'exemple de code fourni, qui n'inclut que trois div de contenu. Dès que j'ai ajouté deux autres div de contenu, les flèches, les points et la lecture automatique ont été initialisés.

1
devdrc

Donc, aucune des réponses ci-dessus ne fait quoi que ce soit, et la plupart sont innacurées. J'ai inspecté mon DOM et les boutons de l'un de mes carrousels n'y sont même pas présents, c'est pourquoi ils ne s'affichent pas (non pas parce que l'arrière-plan est blanc). J'ai un autre carrousel avec les mêmes paramètres, et les flèches montrent bien. J'essaie toujours d'enquêter sur cette question et la mettrai à jour si je trouve une solution.

Solution: Il semble que pour mon problème, vous devez disposer d’un div de conteneur qui enveloppe le div auquel vous appliquez une couche lisse. Sinon, ça ne marchera pas.

0
Siraris

Ce qui a résolu mon problème, c'est qu'ils n'avaient pas d'index z approprié

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

résolu le problème

0
Dulara Malindu