I'm currently facing an issue with adding a jQuery slider to my website. It seems that the slider is not displaying images that are saved on my computer, only images from external websites.
Below is the code snippet where I have included an image file path for reference:
<!DOCTYPE HTML>
<html>
<head>
<title>UnSlider</title>
<style>
body, html {
padding:0px;
margin: 0px;
}
.banner {
position: relative;
width: 100% !important;
overflow: auto;
padding: 0px;
margin: 0px;
}
.banner ul {
padding: 0px;
margin: 0px;
}
.banner li {
list-style: none;
padding: 0px;
margin: 0px;
}
.banner ul li {
float:left;
padding: 0px;
margin: 0px;
min-height: 350px;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
-ms-background-size: 100% auto;
background-size: 100% auto;
background-position-y: -75px;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li style="background-image: url("../images/jam.jpg");"></li>
<li style="background-image: url('http://placehold.it/1400x400');"></li>
<li style="background-image: url('http://placehold.it/1400x400');"></li>
<li style="background-image: url('http://placehold.it/1400x400');"></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script>
$(document).ready(function(){
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 5000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: false, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
});
</script>
</body>
</html>
Thank you!