I added a carousel to my website, but I'm having trouble getting it to display. Can someone help me troubleshoot?
My HTML:
<!--Sponsor Carousel-->
<link href="css/style.css" rel="stylesheet" media="screen">
<ul id="flexiselDemo1">
<li><img src="img/logo-nyt.png" /></li>
<li><img src="img/logo-microsoft.png" /></li>
<li><img src="img/logo-ebay.png" /></li>
<li><img src="img/logo-hp.png" /></li>
<li><img src="img/logo-youtube.png" /></li>
</ul>
<div class="clearout"></div>
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo1").flexisel({
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
});
</script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<!--End Sponsor Carousel-->
My CSS :
#flexiselDemo1{
display:none;
}
.nbs-flexisel-container {
position:relative;
max-width:90%;
margin: 0 auto;
}
.nbs-flexisel-ul {
position:relative;
width:9999px;
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
.nbs-flexisel-inner {
overflow:hidden;
float:left;
width:100%;
background:#fcfcfc;
background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */
background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */
background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */
background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */
background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */
background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */
border:1px solid #ccc;
border-radius:10px;
-moz-border-radius:50px;
-webkit-border-radius:5px;
}
.nbs-flexisel-item {
float:left;
margin:0px;
padding:0px;
cursor:pointer;
position:relative;
line-height:0px;
}
.nbs-flexisel-item img {
width: 100%;
cursor: pointer;
position: relative;
margin-top: 10px;
margin-bottom: 10px;
max-width:100px;
max-height:45px;
}
/*** Navigation ***/
...
My Jquery :
...