jQuery - jCarouselLite - Images are not showing up


Tags: jquery,css,jcarousel,html

Problem :

I have incorporated jCarouselLite with my already working site, however the PREV and NEXT buttons appear, but no IMAGES. The image links are correct.

Any ideas?

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>
<li><a href="#" title="Title 2"><img src="images/store_item_img.jpg" alt="Image 2" class="captify" /></a></li>
<li><a href="#" title="Title 3"><img src="images/store_item_img.jpg" alt="Image 3" class="captify" /></a></li>
<li><a href="#" title="Title 4"><img src="images/store_item_img.jpg" alt="Image 4" class="captify" /></a></li>
<li><a href="#" title="Title 5"><img src="images/store_item_img.jpg" alt="Image 5" class="captify" /></a></li>
<li><a href="#" title="Title 6"><img src="images/store_item_img.jpg" alt="Image 6" class="captify" /></a></li>
<li><a href="#" title="Title 7"><img src="images/store_item_img.jpg" alt="Image 7" class="captify" /></a></li>
<li><a href="#" title="Title 8"><img src="images/store_item_img.jpg" alt="Image 8" 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; 
}

.slider ul li {
 padding:0 20px;
}

.slider ul li img {
 cursor:pointer;
 height:150px; 
 padding-top:3px;
 width:180px;  
}

.prev {
 cursor:pointer; 
 float:left;
 padding-top:90px;
}

.next {
 cursor:pointer; 
 float:right; 
 padding-top:90px;
}

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>

Please Help?

:)

UPDATE:

If I remove

  $("#store_container").hide();

..and make it look like this, it works, however the div is opened first 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>

How can I made #store_container be closed with using .hide ? Or is there a way to show it after the function is clicked?



Solution :

I don't know anything about jCarouselLite, but in your style, your .slider is set to visibility:hidden; and I don't see anything in your code that makes it visible.

EDIT:

Don't forget:

$('document').ready(function(){
    // my jquery javascript code
})

    CSS Howto..

    How to add and remove div's (input)

    How to completely change the css position of an element on the page to appear in another part of the document flow?

    How to read CSS Content value with jQuery?

    How can i make each div look like seperate block?

    How to bounce to top with button on image with CSS

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    How to know from css if a select is opened

    Create dom elem on the fly or hide/show

    How to get a div text from html content

    How to exclude particular class name in CSS selector?

    How can I make the left div expand and the right div have constant width?

    http://com.google how do they transform everything to RTL

    When using ''@keyframe play'' in css, how can you get the frame the animation is currently at with javascript?

    showing a css component for a specified number of seconds

    HTML/CSS: flip3d how to do a 360 degrees with 4 pictures

    How to move object into the screen from outside via jQuery transition

    how to give css for arranging label, textbox and text area side by side in the same line

    Html/Css - How to get an image to stretch 100% width of a container then display another image over it?

    How to force wrapper div to keep its optimal width according to its children

    How to Javascript to load a css file only for one specific page?

    How to apply Title Case in input box through css

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    CSS/HTML - How do I get text to go behind an image inside a div

    How can I make a designer's static web page run in rails 4

    How to do formatting using CSS to table

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to 'append' the background with more styles in CSS?

    How to fit inner div inside an outer div

    How to force Visual Studio to honor the BOM at the start of a UTF-8 encoded CSS file?

    CSS show horizontal scroll bars?