How I built my carousel image slider

I thought I would share the process and steps I took to build a carousel image slider.
Hopefully you can learn from my mistakes and I’ll have saved you some time…
I wanted to add this to my page
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
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
and tried it, but I still couldn’t get it to work in Rails
After I did more Google searching I found
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
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
Then I did get it to work but I could only display 3 pictures at a time
I went back to here
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
And it finally worked
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!


3 thoughts on “How I built my carousel image slider

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s