How to add a Carousel to your website.
Adding a Bootstrap or jQueryUI Slider/carousel to your website.
Share this post:
Adding an interactive slider to your website
A jqueryUI or Bootstrap slider can add, not only some style to your webpage but also give it a level of professionalism. Although generally used to showcase an array of images, a slider can also save vertical space on your website for the many levels of an application that the user may not even interact with otherwise. It really leans up the look of your website and is one of my favorite utilizations of the slider that I don't see a lot of developers using.
In this tutorial I'm going to be breaking down the step by step process and hopefully get your slider up and running on your very own website. I'm going to try to be as detailed as possible and easy to follow as there are a lot of steps to this process, that if missed, will leave your sliders functionality broken but that anger problem you have otherwise had under control. I'm looking at you Bruce Banner!
Step One:Add bootstrap.css & bootstrap.js
Often times when pulling some snippet of code offline to impliment into your own website can be quiet frustrating as many of these folks leave off the fact you need to add libraries for the snippet to actually function correctly. So your first step will be to add these libraries straight away so we don't run into this, all too common, issue.
Since the order of these matter a great deal and going along with our all over theme, are one of the many little things that can make your code not perform the way you intended or worse; not work at all.
So what I have recently started doing with all my websites is copy and paste a template of all the libraries I use, in the order they need to be, from there I delete the ones that I never intend on using within the site. The reason I don't just leave them there is some libraries can increase the loading time of your webpage, and in today's climate of web development the user may be viewing your website on a data restricted tablet or smartphone and you want the user experience to be your number one priority, removing the unused libraries will speed up your load times as well as make the end user a whole lot happier you didn't eat up their data for a technology that wasn't even used.
Now that that little rant is out of the way, here is my header and script tags
First the head tags:
Then the script tags below the last line within your body:
keep in mind that at the time of writing this tutorial, all libraries are the latest versions, if you are coming to this post some time in the future when a library has since been updated you may need to link to the newer version of said library. Im not gonna link here as the same issue would arise but googling "latest version of [insert library name] cdn".
Step Two:Add required HTML to your...uhh HTML doc
Now I want to preface this step with the fact that I have created my own slider but used the bones of the bootstrap version if you will. I mention this because if you would like my version copy and past my code, otherwise just use the bootstrap version which I have also detailed below. If you would like to see my version in action click here
My custom version HTML:
One important note here is that on the div "myCarousel" I included a data value that reads (data-interval="false"). This is to stop the carousel from automatically switching to the next slide at a given interval. Since I am using this as a contact sheet the slide doesn't really make sense in my case, however you are more than welcome to remove it without any ill effects
My Custom version CSS:
Well that's it for my version. Make sure that you change the "body" tag in the CSS to match your particular scenario as this will change the background of all of your HTML page. Unless that is something you want. Then go ahead and leave it in, it's up to you.
Bootstrap Carousel HTML:
Step Three:Test & Shim
The final part in this tutorial is what I dub the "Test & Shim" phase
Test because you want to make sure all of the buttons work and act like they are supposed to. Do this even before you start customizing it by adding pictures or other content. The reason you want to hold off on the customization is you want to rule that out as a reason for the code not working the way you intended it to. After it's working you'll want to move on to the second part in this step. "Shim"