I am trying to get a Carousel on my site, but I am having problems.
I want to install http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel-with-jQuery-Bootstrap.html.
I have created a content item for testing this on http://xuzo.com/testing/node/26.
Method A: my own stylesheets (not working)
I pasted the HTML from http://www.jqueryscript.net/slider/Full-Width-Responsive-Carousel-with-jQuery-Bootstrap.html and put it in my content item under FULL html format. I have tried to make it work with my own style sheets that I copied from the website above, I put them into my info file, and uploaded them to the server.
stylesheets[all][] = carrousel/bootstrap.min.css
stylesheets[all][] = carrousel/jquerysctipttop.css
scripts[all][] = carrousel/bootstrap.min.js
scripts[all][] = carrousel/jquery.min.js
Since I have the style sheets, I am not sure I had to use CSS injector and JS injector or not.
Method B: external CDN JS styles sheets + my own style sheets (not working)
I put my own style sheets that I copied from the website above into my .info file.
stylesheets[all][] = carrousel/bootstrap.min.css
stylesheets[all][] = carrousel/jquerysctipttop.css
I linked the external CDN files in template.php.
drupal_add_js('//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', 'external');
drupal_add_js('//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js', 'external');
The page shows up with images, but it is not working.
In CSS injector I tried this code.
#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}
In JS injector I tried this code.
jQuery(document).ready(function($) {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
});
I know I am missing something, but what?