Inspiration
My initial Figma design for this page showed multiple items, and I wanted to use a slider that showed multiple items, with buttons to view more.
What it does
The carousel shows three items at a time, with buttons to move to the next or previous item. It moves one item at a time.
How we built it
I used Bootstrap for the initial carousel, and then looked up solutIons for showing multiple items. Using jQuery, I was able to get the behaviour I wanted. The webpage itself was built yesterday for a different challenge, and the carousel and images were added for this challenge.
Challenges we ran into
The site works for large screens, but there seems to be a bug (probably in the jQuery code) when displaying the carousel for smaller screens. The intended behaviour is for the carousel to shrink back to only showing one item at a time. Currently, it automatically shuffles through the items and the navigation doesn't work. I'll have to do more debugging for this.
What we learned
I learned how jQuery can be used to manipulate items on the page, even ones that are already a component of a framework like Bootstrap.
What's next for Finding and Using Libraries
I'll be looking more into jQuery to correct the carousel issue for smaller screens. I may also find another library to handle the carousel if it's more efficient that Bootstap/jQuery.
Log in or sign up for Devpost to join the conversation.