Schein - The Bootstrap Carousel news

June 3, 2014 | by Tiare Feuchtner

As you might have noticed, we have given Schein’s website a thorough rework at the beginning of this year. The big goal was to replace our bulky website that had multiple pages and way too much content, with a sleek single-page product site. To achieve a neat and flexible design, I decided to create my own WordPress template, with which I could built the page our artist had designed. I chose the Twitter Bootstrap framework, because it allows you to create a responsive layout that scales quite well to different screen sizes. I also liked the possibility of choosing my own components, allowing you to keep the framework quite slim. At least in theory… I actually added a whole lot of stuff that isn’t used on our current page. But you never know when it might come in handy.

Since it was the first time that I ever built a website from scratch, I really had no idea where to start. Downloading Bootstrap was easy enough, but then what? In the end it was all quite simple with the help of this detailed tutorial by Zac Gordon.

The thing I spent most time on was the picture carousel, since I found only little help online, to get it to work the way I wanted. Bootstrap conveniently provides this carousel component and with this sample code I had it working in no time.

This is awesome if you have only few pictures to show in your carousel, but we needed something more dynamic, where a varying number of pictures can be easily added and exchanged without editing dozens of lines of code. In the hope that some of you might find it useful, I will go into more detail about this. I found a way to dynamically load the contents of a folder into the carousel. I do this using the php command file_get_contents($dir) to get the names of all the files in the list.
For this to work, you need to make sure, that the folder is not read protected and that it is indexed. Philipp changed those settings for me on the server.

One more change I made was to replace the standard indicators that are featured in Bootstrap’s carousel with thumbnails. For this I simply fill the list of indicators with… well the pictures’ thumbnails. This required a couple of extra lines of CSS in the Stylesheet, which are simply too ugly to post here.

Finally, there was the issue of the scroll bar for navigating through the thumbnails. I mainly use Firefox and the built in scroll bars looked absolutely terrible. I attempted to change their appearance in the stylesheet, which worked for Internet Explorer and Chrome, but had no effect in Firefox. I began to look for a WordPress plugin to style scrollbars, but I got annoyed at all the limitations they had. So I ended up using jscrollpane by simply including the according javascript files and the additional stylesheet. Now I could easily tweak its appearance in CSS. With the helpful documentation on the site I managed to modify the scrolling behaviour, letting it scroll only if the next thumbnail was out of sight and always show the active thumbnail.
I wish to end this blog post with a word of warning: Pay close attention to when and where you include jquery. What I learned the hard way was that you should definitely not include it more than once, and you best do it in the header. Then all javascript will work beautifully.

And one final piece of advice: Debugging is the simplest thing, and you should do it right from the start. In the beginning I had no idea how to do it, and created text output with php or alerts with javascript. Then I tried out the Firefox plugin Firebug and never made text outputs again. Nowadays every browser has a pretty decent built-in page inspector and not only does it let you debug your own code, you can also look at how other pages are made. It’s inspiring, I tell you!

I realize this post was rather more technical than usual, and I apologize to all casual readers. But I hope to give a little insight into our actual daily work, and perhaps it might even be useful to somebody who is plagued by similar problems.