0

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?

5
  • have you cleared the caches?
    – Bala
    Dec 19, 2015 at 10:30
  • Yes, used different browsers, VPN ect...is it working for you? Dec 19, 2015 at 10:42
  • I'm not talking about the browser cache, have you cleared the cache in performance page?
    – Bala
    Dec 19, 2015 at 10:46
  • Yes, after every change Dec 19, 2015 at 10:48
  • Are you using ckeditor? If yes, perhaps ckeditor is changing your html code.
    – No Sssweat
    Dec 20, 2015 at 4:00

2 Answers 2

2

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.

2
  • Actually, I don't understand how to put all the HTML sections together. Can you paste it in if you have a chance blastoise? I tried to modify the HTML with the code you gave me, but not quite there yet... Dec 19, 2015 at 13:46
  • Well I'm not sure how you want to accomplish this. I suggest you to create some content type that contain title field, image field and slide body field. Then create 3 nodes with that field. After that you use Views for that content type and then theme views rows. In that way you can get desired output. You can have full control of html. And here you can find info about views drupal.stackexchange.com/questions/80147/… :)
    – blastoise
    Dec 19, 2015 at 16:50
0

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.