How I built my carousel image slider

I thought I would share the process and steps I took to build a carousel image slider.
http://www.bryanttunbutr.com/carousel
Hopefully you can learn from my mistakes and I’ll have saved you some time…
I wanted to add this to my page
http://www.theodinproject.com/javascript-and-jquery/creating-an-image-carousel-slider
http://bxslider.com/examples/carousel-dynamic-number-slides
So first I did some Google searching and found that the popular way to do it is to use JQuery.
I then Googled, “JQuery carousel rails”
I came across this
http://owlgraphic.com/owlcarousel/
Apparently the owl carousel is popular, or at least it appeared at the top of my Google searches, so I went with this one
I looked at the how to
http://owlgraphic.com/owlcarousel/#how-to
and tried it, but I still couldn’t get it to work in Rails
After I did more Google searching I found
https://github.com/acrogenesis/owlcarousel-rails
I found a Rails Gem for the owl carousel app.
I followed the Read me on installing the Gem but it still didn’t work.
I went back to Google searching, things like “owl carousel rails gem”
I was getting pretty frustrated
But I realized I just need to find an example of someone else who got it to work. I went to GitHub and searched for “owlcarousel-rails” in other people’s code
https://github.com/search?q=owlcarousel-rails&type=Code&utf8=%E2%9C%93
I then looked for the projects that had lots of commit messages, I was looking for something like, “Installed owl carousel and added pictures.”
I was going to copy their steps.
I found one here
https://github.com/rookiekojo/LCIYelp/commit/a5f99c89a04035b1e73293cec85c39a3955ad98b
Then I did get it to work but I could only display 3 pictures at a time
I went back to here
http://owlgraphic.com/owlcarousel/#customizing
And saw I just need to change the number of items
But since I had some pics that were in landscape, and some in portrait, there was lots of white space between the picture and the controls at the bottom.
I did lots of Google and Stackoverflow searching on CSS, JQuery, margins, padding, slider, etc.
I found this solution
http://stackoverflow.com/questions/21574698/image-slider-maintaining-equal-height-for-all-images-while-keeping-slider-respo
And it finally worked
http://www.bryanttunbutr.com/carousel
So what did I learn?
1. Google, Google, Google
2. Learn from others’ code, especially if it is a popular Rails Gem
3. I need to keep improving at reading and understanding documentation
4. Coding/web development can be super frustrating, but it does feel nice to finally build it! And hopefully I can share this experience and save people some time and frustration.
Happy coding and building to you all!

Advertisement