Question

我想制作一个jquery轮播，并且收到这些错误

“ $ slide.on不是函数”-“ $ el.goToNextSlide不是函数”

<link href="../Styles/lightslider.css" rel="stylesheet" />
<script src="../Scripts/lightslider.js"></script>

<ul id="lightSlider" class="gallery">
            <li data-thumb="../Images/anonimi_320.png"> <a href="#"> <img src="../Images/anonimi_320.png" /> </a> </li>
            <li data-thumb="../Images/anonimi_320.png"> <a href="#"> <img src="../Images/anonimi_320.png" /> </a> </li>
            <li data-thumb="../Images/anonimi_320.png"> <a href="#"> <img src="../Images/anonimi_320.png" /> </a> </li>
</ul>

Answer 1

您可以使用以下代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.css">

<style>
    .demo {
        width:420px;
    }
    ul {
        list-style: none outside none;
        padding-left: 0;
        margin-bottom:0;
    }
    li {
        display: block;
        float: left;
        margin-right: 6px;
        cursor:pointer;
    }
    img {
        display: block;
        height: auto;
        max-width: 100%;
    }
</style>
<div class="demo">
    <ul id="lightSlider">
        <li data-thumb="https://dummyimage.com/600x400/000/fff">
            <img src="https://dummyimage.com/600x400/000/fff" />
        </li>
        <li data-thumb="https://dummyimage.com/600x400/000/fff">
            <img src="https://dummyimage.com/600x400/000/fff" />
        </li>
        <li data-thumb="https://dummyimage.com/600x400/000/fff">
            <img src="https://dummyimage.com/600x400/000/fff" />
        </li>
    </ul>
</div>
<script type="text/javascript">
    $('#lightSlider').lightSlider({
        gallery: true,
        item: 1,
        loop: true,
        slideMargin: 0,
        thumbItem: 9
    });
</script>

lightSlider-“ $ slide.on不是函数”-“ $ el.goToNextSlide不是函数”

1 个答案: