Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message when using IE. For reference, please take a look at this screenshot: https://i.sstatic.net/u5sSg.png
Could someone kindly point out what mistake I might be making with the following HTML and CSS:
Slider.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 9
});
</script>
</head>
<body>
<div>
<div class="demo">
<ul id="lightSlider">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
</li>
... <!-- Additional list items removed for brevity -->
</ul>
</div>
</div>
</body>
</html>
css/style.css
.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%;
}