jQuery LightSlider is not working but in JSFiddle's works very well
Question
I find it very strange. I couldn't figure it out at all about lightSlider.
First of all, I have put jquery plugin on <head> . Something like this below:
<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>
Secondly, I have put HTML something like this below:
<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>
Lastly, I don't forget to put CSS. Something like this below:
.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%;
}
Lastly, it is working in JSFiddle HERE .
In conclusion, it is working in JSFiddle but it doesn't work in my server. The results are it didn't look like an image on the top with thumbnails at the bottom. Looks like my plugin is not working. I really find it strange. Am I missing something?
UPDATED
I changed the <head> script again. Still it doesn't work.
<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>
2 answers
solution1
0 2014-11-26 03:01:47
You does not include the script for lightSlider
Try:
<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>
solution2
0 2021-03-04 06:00:10
Sometimes it works after using
$(window).on("load",()=>{
$("#lightslider").lightSlider({})
}
Otherwise the elements with .clone class are not rendered properly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.