Implementing the blog home page section

Our blog home page will consist of two main sections:

• Image slider/carousel to showcase blog posts
• All blog posts are presented using cards

Implementing the image slider

The first section will contain an image slider, also known as a carousel, which is intended to display highlighted posts/content.

Simple image slider

Firstly, we will create an image slider that automatically scrolls and has no buttons or captions.

Add the following code to the index.php file:

Let's run through the lines of code we just added:

• Line 3 adds a fixed width container, nothing new here.
• Line 4 adds a row, again nothing new here.
• Line 5 adds a div that spans all 12 columns on all screen sizes.
• Line 6 adds the carousels parent container with the functionality set to slide automatically.
• Line 7 creates the inner section to store all the different slides.
• Line 8 creates a carousel item/slide and is set to active so it is displayed first.
• Line 9 creates an image to be displayed in the slide...