Problems getting Carousel jQuery plugin working

Question

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?

Answer 1

I don't see that you have add html elements with bootstrap attributes like data-target and data-slide-to. When I inspect your page and replace this:

<ol><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;</li></ol>

with this: (example from plugin site)

<ol class="carousel-indicators"><li data-target="#my<ahref="http://www.jqueryscript.net/tags.php?/Carousel/">Carousel</a>" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol>

I get dots that actually work.

Answer 2

Try:

    (function ($) {  
             $( 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);
              })();
            });
    })(jQuery);