Emwat Oon Posted October 15, 2013 Share Posted October 15, 2013 Would anyone happen to know what files I need to get a working carousel? I downloaded Bootstrap 3.0.0. I copied the markup example from the doc and added jquery and carousel.js. It didn't work. I copied a working html markup carousel. The pictures and the javascript was there, but it's nowhere near a carousel. Added holder.js. Added transition.js. Added carousel.css I found in the examples folder. Gave up and took all of those away. Used Bootstrap.min.js and Bootstrap.css. Finally working. But I don't want to have the entire bootstrap js in there. I tried going back to the getbootstrap website, went to customize, untoggled everything except functioning carousel, and I'm back to what I had before I added holder.js. Link to comment Share on other sites More sharing options...
davej Posted October 15, 2013 Share Posted October 15, 2013 (edited) This? http://sorgalla.com/projects/jcarousel/examples/static_simple.html Edited October 15, 2013 by davej Link to comment Share on other sites More sharing options...
Emwat Oon Posted October 16, 2013 Author Share Posted October 16, 2013 (edited) Well, I've tried that and I can't seem to get it working. Maybe I'm overlooking something? <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link rel="stylesheet" href="css/bootstrap.css" media="screen" />--> <link rel="stylesheet" href="screen.css" media="screen" /> <link rel="stylesheet" href="handheld.css" media="handheld" /> <style> .jcarousel { position: relative; overflow: hidden; /* You need at least a height, adjust this to your needs */ height: 200px; } .jcarousel ul { width: 20000em; position: absolute; list-style: none; margin: 0; padding: 0; } .jcarousel li { float: left; } </style> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head><body> <p id="loginStuff">Welcome</p> <nav> <ul> <li>a</li> <li>a</li> <li>a </li> </ul> </nav> <div id="columnWrap"> <div class="left-col"><div class="jcarousel"> <ul> <li><img src="http://placehold.it/200x200" alt=""></li> <li><img src="http://placehold.it/200x200" alt=""></li> </ul></div> </div> <div class="right-col"> </div> </div> <div id="footer"> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>!window.jQuery && document.write('<script src="jquery-1.9.1.js"></script>')</script> <script type="text/javascript" src="dist/jquery.jcarousel.min.js"></script> <script type="text/javascript"> $(function() { $('.jcarousel').jcarousel({ // Configuration goes here }); }); </script> <!--<script src="js/scripts.js"></script>--></body></html> All this shows is the two placeholder pictures by each other instead of a working carousel. Edited October 16, 2013 by Emwat Oon Link to comment Share on other sites More sharing options...
thescientist Posted October 16, 2013 Share Posted October 16, 2013 are you checking for errors on the console? Also, why are you two different versions of the core jQuery library? i would get rid of the line with document.write at minimum Link to comment Share on other sites More sharing options...
davej Posted October 16, 2013 Share Posted October 16, 2013 All this shows is the two placeholder pictures by each other instead of a working carousel. Well, I downloaded the other carousel and it does seem rather overly-complicated. What exactly do you want the carousel to do? A simple image slider to display images is easy. It gets more complicated when you want them to animate in a certain way. Link to comment Share on other sites More sharing options...
Emwat Oon Posted October 16, 2013 Author Share Posted October 16, 2013 are you checking for errors on the console? Also, why are you two different versions of the core jQuery library? i would get rid of the line with document.write at minimum I have been checking it with firebug. It doesn't report anything. I haven't thought about the two different versions of jQuery. The second line with document.write is a fallback in the case google's jQuery can't be accessed. I'll change it soon enough. Since I'm not testing it online, it doesn't seem to pick up Google's jQuery. Well, I downloaded the other carousel and it does seem rather overly-complicated. What exactly do you want the carousel to do? A simple image slider to display images is easy. It gets more complicated when you want them to animate in a certain way. I want the showy effects of images moving left to right. I suppose I'll try to make it myself, since you put it that way. Link to comment Share on other sites More sharing options...
Ingolme Posted October 16, 2013 Share Posted October 16, 2013 Your page might be running in quirks mode. <!DOCTYPE> is supposed to be fully uppercase. Link to comment Share on other sites More sharing options...
Emwat Oon Posted October 17, 2013 Author Share Posted October 17, 2013 I've deleted the files to clean up a little bit, so I can't test if it was a quirks mode issue or not. Feel free to close this thread. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now