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?

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

  • 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... – Bruno Vincent Dec 19 '15 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 '15 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, privacy policy and cookie policy

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