jQuery LightSlider不能工作，但在JSFiddle中工作得很好

jQuery LightSlider is not working but in JSFiddle's works very well

本文关键字：工作 很好 JSFiddle LightSlider 不能 jQuery 但在      更新时间：2023-09-26

我觉得很奇怪。我完全无法弄清楚LightSlider。

首先，我已经把jquery插件放在<head>上。下面像这样：

<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="assets/js/lightSlider/lightSlider.css" />
<link rel="stylesheet" href="assets/js/lightSlider/jquery.lightSlider.js" />
</head>

其次，我在下面放了这样的 HTML：

<div class="produk-details-left">
        <ul id="lightSlider">
            <li>
                <img src="pic1.jpg" />
            </li>
            <li>
                <img src="pic2.jpg" />
            </li>
            <li>
                <img src="pic3.jpg" />
            </li>
            <li>
                <img src="pic4.jpg" />
            </li>
        </ul>
    </div>

最后，我不会忘记放CSS。下面像这样：

.produk-details-left ul {
list-style: none outside none;
padding-left: 0;
margin-bottom:0;
}
.produk-details-left li {
display: block;
float: left;
margin-right: 6px;cursor:pointer;
}
.produk-details-left img {
display: block;
height: auto;
max-width: 100%;
}

最后，它在JSFiddle HERE中工作。

总之，它在JSFiddle中工作，但在我的服务器中不起作用。结果是它看起来不像顶部的图像，底部有缩略图。看起来我的插件不起作用。 我真的觉得很奇怪。我错过了什么吗？

更新

我再次更改了<head>脚本。还是行不通。

<head>
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
   <link rel="stylesheet" href="assets/js/lightSlider/lightSlider.css" />
   <link rel="stylesheet" href="assets/js/lightSlider/jquery.lightSlider.js" />
   <link rel="stylesheet" href="assets/js/lightSlider/jquery.lightSlider.min.js" />
</head>

不包括 lightSlider 的脚本

尝试： 

<head>
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
   <link rel="stylesheet" href="assets/js/lightSlider/lightSlider.css" />
   <script src="assets/js/lightSlider/jquery.lightSlider.js" />
</head>

有时它在使用后起作用

 $(window).on("load",()=>{
        $("#lightslider").lightSlider({})
}

否则，具有 .clone 类的元素将无法正确呈现。

相关文章：