My website currently has jCarouselLite integrated, but I'm facing an issue where the PREV and NEXT buttons are visible, yet no IMAGES are showing up. The image links seem to be correct.
Do you have any suggestions?
jQUERY:
<script type="text/javascript">
//jCarouselLite
$(function() {
$(".slider").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 4
});
});
</script>
HTML:
<div id="list">
<div class="prev"><img src="images/prev.jpg" alt="prev" /></div>
<div class="slider">
<ul>
<li><a href="#" title="Title 1"><img src="images/store_item_img.jpg" alt="Image 1" class="captify" /></a></li>
...
</ul>
</div>
<div class="next"><img src="images/next.jpg" alt="next" /></div>
</div>
CSS:
.slider {
background-color:#3399FF;
float:left;
margin:15px;
position:relative;
visibility:hidden;
}
.slider ul {
height:180px;
width:840px;
}
...
SCRIPT:
<script type="text/javascript" src="http://www.theratio.net/js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js/captify.tiny.js"></script>
Any assistance would be greatly appreciated!
:)
UPDATE:
If I remove
$("#store_container").hide();
..and modify it as below, it works properly, except that the div is opened initially instead of closed.
<script type="text/javascript">
$(function(){
$('#toggle').toggle(function(){
$('#store_container').slideDown("slow", function() { $('#store_data').fadeIn(); });
}, function() {
$('#store_data').fadeOut("fast", function() { $('#store_container').slideUp("slow"); });
});
});
</script>
Is there a way to keep #store_container closed using .hide? Or perhaps display it after the function is clicked?