We also adjust a bit the position of the indicators: We do it with this code by setting the caption’s position to “relative”: So, the most important part, relevant to the tutorial, is the part where we move the captions below the slideshow. You can find the rest of the code in the file “style.css” (folder “assets/css”). We use some CSS code here to style the page, of which I’ll only show the part that is more relevant to this tutorial. Just search “aspect ratio calculator” on Google, to calculate the right size for your images. ![]() You can also embed them with other aspect ratios (see documentation of the Embed Bootstrap utility), and in that case you have to also adapt your images.įor example, the two images I’ve used have a size of 1024 x 576 pixels, which means an aspect ratio of 16:9. This is because we have embedded the videos with this ratio (16:9). Important: to make the carousel look good, with the videos and images being responsive and with the same aspect ratio, we use images with a ratio of 16:9. This is the caption description text for video 3. This is the caption description text for image 2. This is the caption description text for video 2. This is the caption description text for image 1. This is the caption description text for video 1. This is a free Carousel template with Videos, Images and Captions, made with the Bootstrap 4 framework.Ĭlick on the indicators, controls and links to interact with the page. Here is the HTML code, I’m showing only the code for the carousel section:Ĭarousel Template with Videos, Images, Captions We use the Bootstrap carousel component by following its documentation here, and the Bootstrap Embed for the videos (documentation here). The HTML is very simple and you can find it in the file “index.html”. I’ve used version 4.4.1 of the Bootstrap framework. I’ll not explain these sections here as they are not relevant to the tutorial. In the demo page I have also added some other sections, to give you an idea on how it might look on a real website. ![]() So, I added these features to the carousel and today I’ll show you how you can do the same and, at the end of the tutorial, you can download the template with all the files as usual.Īs you can see from the LIVE DEMO, in the carousel I’ve embedded two videos from YouTube, one from Vimeo and two images. After publishing this Bootstrap carousel template with videos, there were a few users who tried it and asked how to add some additional featured.įor example, how to use a mix of videos and images in the carousel and how to add captions to a video carousel.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |