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:
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
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 also changed the unslider.js to make arrow and slide navigation work for me. You can save this copy from here if you like
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
refresh the page on your website, and hopefully it will all be looking great :) [remember to alter the style sheet to match your needs].
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 etc. I hope it works well for you and your visitors enjoy it. Please comment if this helps you, I'd like to know sharing this was worthwhile.
Extras:
Arrows:
if you'd like clickable navigation arrows, you can change template.php to include
jQuery(".banner").unslider(
{keys: true,
dots: true,
fluid: true,
arrows: true
)
You also have to change the unslider.js, so that the arrows would appear on the banner and could be styled independantly. if you'd like you can save mine, that also works with the style sheet I gave you.
Touch swiping
Admission: I found that the latest version of the unslider was not on the unslider.com website, but when I downloaded the latest from github it didn't work, so I simply took the code for swiping from the latest release and included it in my copy - which you can get here. :)
The website says that basic touch swiping will work if you include jquery.event.move.js and jquery.event.swipe.js. Add this to template.php (as you can see I added it before the drupal_add(unslider.js) - oh, and you can save them to your local server if you like)
drupal_add_js('https://raw.github.com/stephband/jquery.event.move/master/js/jquery.event.move.js', 'external');
drupal_add_js('https://raw.github.com/stephband/jquery.event.swipe/master/js/jquery.event.swipe.js', 'external');
drupal_add_js('http://unslider.com/unslider.min.js', 'external');
but for me it didn't work, so I added a bit to my html page and javascript so its now super smooth.
In your html banner you need to make some changes:
add class="slides_wrap" to
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:
- This is a slide.
- This is another slide.
- This is a final slide.
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
INTRO TEXT
more
button
- more slides
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 also changed the unslider.js to make arrow and slide navigation work for me. You can save this copy from here if you like
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
refresh the page on your website, and hopefully it will all be looking great :) [remember to alter the style sheet to match your needs].
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 etc. I hope it works well for you and your visitors enjoy it. Please comment if this helps you, I'd like to know sharing this was worthwhile.
Extras:
Arrows:
if you'd like clickable navigation arrows, you can change template.php to include
jQuery(".banner").unslider(
{keys: true,
dots: true,
fluid: true,
arrows: true
)
You also have to change the unslider.js, so that the arrows would appear on the banner and could be styled independantly. if you'd like you can save mine, that also works with the style sheet I gave you.
Touch swiping
Admission: I found that the latest version of the unslider was not on the unslider.com website, but when I downloaded the latest from github it didn't work, so I simply took the code for swiping from the latest release and included it in my copy - which you can get here. :)
The website says that basic touch swiping will work if you include jquery.event.move.js and jquery.event.swipe.js. Add this to template.php (as you can see I added it before the drupal_add(unslider.js) - oh, and you can save them to your local server if you like)
drupal_add_js('https://raw.github.com/stephband/jquery.event.move/master/js/jquery.event.move.js', 'external');
drupal_add_js('https://raw.github.com/stephband/jquery.event.swipe/master/js/jquery.event.swipe.js', 'external');
drupal_add_js('http://unslider.com/unslider.min.js', 'external');
but for me it didn't work, so I added a bit to my html page and javascript so its now super smooth.
In your html banner you need to make some changes:
add class="slides_wrap" to
- and class="img_slide business" to every
- slide
- And to activate it you need to add some more to the javascript added in template.php
We will change:
drupal_add_js('
if(jQuery(".banner").length>0){
jQuery(document).ready(
jQuery(".banner").unslider(
{keys: true,
dots: true,
fluid: true,
arrows: true
}
)
);
}',
array('type' => 'inline', 'scope' => 'footer'));
To
drupal_add_js('
if(jQuery(".banner").length>0){
jQuery(document).ready(
jQuery(".banner").unslider(
{keys: true,
dots: true,
fluid: true,
arrows: true
}
)
);
var wrap = jQuery(".slides_wrap"),
slides = wrap.find(".img_slide"),
width = slides.width();
slides
.on("move", function(e) {
// Move slides with the finger
// banner has moved -100% when one slide to the right
var left = 100 * e.deltaX / width;
wrap[0].style.left = parseInt(wrap[0].style.left.replace("%", ""))+left+"%";
})
.on("moveend", function(e) {
setTimeout(function(){
var left = parseFloat(wrap[0].style.left.replace("%", ""));
var left_rounded = Math.round(left/100)*100;
if(left%100!=0){
jQuery(".slides_wrap").animate({"left":left_rounded + "%"});
}
},800);
});
}
',
array('type' => 'inline', 'scope' => 'footer'));
Check it and see
I really hope that works for you. It literally was a few days tweaking all that, so I really hope people out there love it.
And if you use it on a commercial site, please buy me a pizza or 2
:)