Adding Unslider to a drupal 7 website with twitter-bootstrap theme

This week I set to add a slider to http://frazerk.net/ which uses drupal 7 and twitter-bootstrap. I decided upon http://unslider.com/

I found a number of stumbling blocks, so I am sharing this in the hope that it will help you, or for me next time I need to do this for another site :) The instructions on unslider.com/ seemed so simple, thats why I went with it, and yes, it did add a simple slider, but a lot of tweeks needed to be done to include images, and navigation tools, and touch swiping.

 I am also new to drupal, so I hope this step by step instruction is useful for other drupal beginners. I wont go in to any detail, so it should also be useful for the experienced. I'm going to assume you already have jQuery working on your site.

So the stages are:
Edit your page to include the html 
Add some javascript 
Add css styling


  Edit your page to include the html

You can play with this on an unpublished page, then copy it to your published pages when you are ready.
the basic html included on unslider:

<div class="banner">

  <ul>

      <li>This is a slide.</li>

      <li>This is another slide.</li>

      <li>This is a final slide.</li>

  </ul>

</div>

is really not what we were after, so I looked at the source code on unslider and copied theirs: This includes images and links: You can change the images and text to suit you

<div class="banner">

 <ul>

   <li style="background-image: url("img/sunset.jpg");">

      <h1>INTRO TEXT</h1>

      <p>more</p>

   <a class="btn" href="#maybe">button</a>

 </li>

 <li>more slides</li>

</ul>

</div>

It will look terrible until you also add the CSS and javascript, so just leave it for now :)

Every thing below is in the backend, in the bootstrap them folder. For me that was at sites/all/themes/twitter-bootstrap. From now on assume any folder I talk about are in that directory.

Add some javascript
You can choose whether to link to the javascript file on their site, or to download it and host it at your site. I saved the unslider.js file from unslider.com in to folder js I added this code in to template.php which is in the twitter-bootstrap directory. I added it just before: function twitter_bootstrap_theme()

//    including javascript to power the UNSLIDER

drupal_add_js(drupal_get_path('theme', 'twitter_bootstrap').'/js/unslider.js', 'file');
//drupal_add_js('http://unslider.com/unslider.min.js', 'external');


drupal_add_js('

if(window.chrome) {
   jQuery(".banner li").css("background-size", "100% 100%");
}

jQuery(document).ready(jQuery(".banner").unslider(
                                            {keys: true, 
                                         dots: true,
                                         fluid: true

                                         })
);
 
var unslider = jQuery(".banner").unslider();
jQuery(".unslider-arrow").click(function() {
                           var fn = this.className.split(" ")[1];
                             unslider.data("unslider")[fn]();
                          }
        );', 
    array('type' => 'inline', 'scope' => 'footer'));

  
  
//    Unslider finished

Thats all the JS taken care of.

Add css styling
The styling was by far the hardest part. I created a separate css file for this slider. There is a lot more than the little css mentioned on unslider.com. But almost all of it I took from their site, viewing the css used on the page. You can download it here. Save it and upload it in to your sites/all/themes/twitter-bootstrap/css folder. You also need to tell drupal to use this extra css file.

This is done by adding

stylesheets[all][] = css/unsliderBanner.css

to twitter_bootstrap.info

 You need to clear the cache for drupal to include this new file. Visiting the theme selection page will also clear the .info file cache. Log in to your website and navigate to : Administration > Appearance (admin/appearance)
 You can view https://drupal.org/node/171209 and https://drupal.org/node/337176 if you want to read about adding style sheets and clearing the cache. You dont need to.

In the slider css file you can edit the size and styling of your slider to match your site. The slider looked very distorted when the window was different sizes, ie, on a mobile, or if someone has their browser window set to a fraction of the screen. I added a lot of @media lines to adjust the slider to match the responsive twitter theme. We used images that were 640w:440h, so the slider had to be width:50% or it would fill the whole screen. I recommend you use images where the width is greater than 1000:300 if you'd like the slider to be the width of your page, and still have room underneath. You'll have to change the widths and heights in the css file to match what you choose.

Thats it
It was a couple of days messing around to learn where everything went, and also to get all the responsiveness to be the right size. I hope it works well for you and your visitors enjoy it.

Update:

I made extensive updates to make the slider and swipe work, and you can read about it here : http://frazer.livejournal.com/21898.html and maybe buy me a pizza.