css - jQuery - jCarouselLite - Images are not showing up -
I've included jCarouselLite with the site already working, though PREV and next buttons appear, but No image Image links are correct.
Any thoughts?
jQUERY:
& lt; Script type = "text / javascript" & gt; // jCarouselLite $ (function () {$ (".l slider"). JCarouselLite ({btnNext: ".nxt", btnPrev: ".prev", view: 4});}); & Lt; / Script & gt;
HTML:
& lt; Div id = "list" & gt; & Lt; Div class = "prev" & gt; & Lt; Img src = "image / prev.jpg" alt = "prev" /> & Lt; / Div & gt; & Lt; Div class = "slider" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" headline = "title1" & gt; & Lt; Img src = "picture / archive_item_mag.jpg" alt = "image1" class = "captive" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" headline = "title 2" & gt; & Lt; Img src = "picture / archive_item_mag.jpg" alt = "image2" class = "capture" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" headline = "title3" & gt; & Lt; Img src = "picture / archive_item_mag.jpg" alt = "image3" class = "capture" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" headline = "title4" & gt; & Lt; Img src = "picture / store_item_img.jpg" alt = "image4" class = "capture" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" headline = "title 5" & gt; & Lt; Img src = "picture / archive_item_mag.jpg" alt = "image 5" class = "capture" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" headline = "title6" & gt; & Lt; Img src = "picture / store_item_img.jpg" alt = "image 6" class = "capture" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" headline = "title 7" & gt; & Lt; Img src = "picture / archive_item_mag.jpg" alt = "image 7" class = "captive" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" headline = "header 8" & gt; & Lt; Img src = "picture / collection_item_mag.jpg" alt = "image 8" class = "capture" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "next" & gt; & Lt; Img src = "picture / next.jpg" alt = "next" /> & Lt; / Div & gt; & Lt; / Div & gt;
CSS:
.slider {background-color: # 3399FF; Swim left; Margin: 15px; Status: Relative; Visibility: hidden; } .slider ul {height: 180px; Width: 840px; } .slider ul li {padding: 0 20px; } .slider ul li img {cursor: indicator; Height: 150px; Cushion Top: 3px; Width: 180px; } .prev {cursor: pointer; Swim left; Padding-Top: Multiplied 90px; } .next {cursor: pointer; float right; Padding-Top: Multiplied 90px; }
Script:
& lt; Script type = "text / javascript" src = "http://www.theratio.net/js/jquery .js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "js / jcarousellite_1.0.1.pack.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "js / captify.tiny.js" & gt; & Lt; / Script & gt; :
Update:
If I remove
$ (" # Store_container "). Hide ();
.. and display it this way, it works, though the device has been opened first rather than shut down.
& lt; Script type = "text / javascript" & gt; $ (Function () {$ ('toggle') Toggle (function () {$ ('# store_container'). Slide Down ("slow", function () {$ ('# store_data'). FadeIn () ;}};}, Function () {$ ('# store_data') .FadeOut ("fast", function () {$ ('# store_container'). SlideUp ("slow");});})}} ; & Lt; / script & gt;
How do I turn off using #store_container? Right? Or is there a way to show it after clicking the function? < / P>
I do not know anything JCarouselLite, but in your style, your .slider visibility: The PIN is set to
and I do not see anything in your code which makes it visible.
Edit:
Do not forget:
$ ('document'). Ready (work () {// my jquery javascript code})
Comments
Post a Comment