How to Implement a Custom Bootstrap Carousel for a Podcast Web-App
The Bootstrap Carousel feature is “a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript.” The tool is great for dynamic side-scrolling of content on a webpage, which is immediately usable out of the box.
As a beginner to programming and in Front-end (as well as Bootstrap), I was initially unsure on how I could leverage the library’s Carousel component to cycle through a series of content, other than images which were demonstrated on the documentation page.
With a little probing, I managed to apply it in one of my projects, where I attempted to mimic the side-scrolling function of a podcast app like Spotify’s.
A brief walkthrough on how Carousels are used in my Podcast Web-app
The web-app consists of 3 carousels (there is a third one below that displays the episodes, but not shown in this picture):
- Top Banner: This uses Carousels in their most basic capacity — to display a series of captivating banners / pictures to showcase the latest podcast episodes. This can be implemented simply by following the Bootstrap’s documentation.
- Popular podcast series: This is where we enter into a slightly more intermediate usage of Carousel’s slides. Each Carousel slide consists of different podcasts (made using Bootstrap’s Cards) which can be side-scrolled using the two buttons on the right.
This article aims to delve deeper into how to implement point 2 , with considerations to responsive design, using only the basic HTML/CSS and the existing capabilities offered by Bootstrap.
The version of Bootstrap used at the point of writing is v4.5.x, and ejs is my template view engine. The app is solely created on a server-side only basis with no AJAX or the likes.
Key Things to note about Bootstrap’s Carousel
- Carousel works with custom markup besides image (tags).
In this example, I made use of Bootstrap’s Card components,
https://getbootstrap.com/docs/4.5/components/card/ - It is important to to add the .active class to the first slide. Otherwise the carousel will not function properly. This is important in our implementation, especially when it comes to rendering carousels of different number of cards in each slide(to be touched on later).
- This article assumes a basic understanding on the relevant classes of the Bootstrap Carousel component.
Implementing Cards inside a Carousel Slide
Referencing the code snippet below, by leveraging on Bootstrap Cards for every podcast series, we can nest each podcast series into a Carousel component as seen from lines 23 to line 48.
At the time of implementation, the row of popular podcast series consists of a variable number of podcasts. In the largest display, we want to display at least 5 per slide, perhaps 3 in medium display and 1 in mobile view. Let’s tackle the largest display first.
Say if we only have 8 podcast series in the entire universe of our podcast app, we would ideally want to display 5 podcast series on the first slide, and the other 3 on the next slide. Hence, we only indicate .active on this first slide, and not on the second slide.
Using ejs’ ability to incorporate conditional logic into our html, if the number of popular podcast series is less than 5, the program will recognise in line 15 that there is only 1 slide to be rendered and that slide will be set as .active.
However, if there are more than 5 podcasts, it will recognise in line 52 that the first (up to) 5 podcast series are in the first slide, and hence set that to be .active. There can only be 1 slide with .active, if there are more than 1, the carousel would not slide.
You can assume any class that is not the same as the default Carousel classes described in the documentation to have been modified by yours truly.
Responsive Design: Resizing the window
In the app, I have fixed the height and width of the cards for UI considerations. Hence, resizing the window horizontally does not display all 5 podcast series cards.
This causes trouble from a UI standpoint where a user may only see 3 podcast series instead of 5 every time we scroll the carousel by clicking on the arrows.
Notwithstanding the constraints of my server-side application (where no DOM manipulation is used), a solution to fix this is to make use of media queries, where we display another view (we will call it with a class of displayAtMediumBreakpoints), where we will only display up to 3 podcast series in this setting.
We will apply a value of display:none and display:block to classes displayAtLargeBreakpoints and displayAtMediumBreakpoints respectively, in CSS.
Responsive Design: Mobile View
Last but not least, we can also specify a display of simply 1 podcast series, per slide, where the first podcast series is automatically set as .active.
Alternatively, instead of using a carousel on mobile view, we can simply remove it and allow users to side-scroll. That may give users a better UX, but for now, I kept things consistent and continued to render a carousel. It looks something like this:
Final Notes
By now, you would have realized that this implementation relies on having 3 ejs files rendering at different breakpoints (they are hidden with a ‘display:none’ using css if they are not shown).
You can either do this by using media queries or simply using bootstrap’s display property, but I chose to do it using the former.
Also, you can also perform a dynamic replacement of the number of podcast series/bootstrap cards to display in each slide using AJAX/further DOM manipulation.
But for now, this is a slightly more verbose way of achieving the same effect.
Thanks for reading!
