Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, before the offer ends on November 29th!

Buy Now

Instagram Carousel

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: Using the Instagram Carousel you can create an engaging carousel from your Instagram posts in no time.

Premium: Gain access to all slider templates with a single purchase.

Minimum version:


Slider Settings

The Instagram Carousel is a full width slider, so it fills the browser width horizontally. It uses the Carousel slider type, which can display more slides next to each other. Based on its settings, the Instagram Carousel slider can display up to 4 slides together.

Switching between the slides of the carousel is super easy. There are arrows on each sides of the slider, and there are bullets at its bottom. Apart from that, swiping is supported on touch screens.

One of the most interesting aspects of the Instagram Carousel is the background image. It’s the background of the slider itself, so it covers the whole slider area.

Slider Background image option

Additionally, the slides have rounded corners. This looks super nice and gives a card-like layout to the carousel. You can change the border radius option, which is responsible for the rounded corners at the Slides tab.

Border Radius option for the slides


The layout of the Instagram Carousel is pretty simple. On each slide there’s an image layer and two rows. One row has two columns to display the Instagram username and another column to display the post date. However, the other row has one column only, and it displays the text layer at the bottom.


There are no special animations on this slider. The only effect you can see is the Horizontal Main animation of the Carousel, that moves the slides.


The Instagram Carousel has an interesting layout solution. The username and date of the post are displayed on top of the image. How did we do that? Simply set a negative top margin to the row that contains these text layers.

Negative top margin


Smart Slider is a responsive slider and has many cool options to optimize your sliders for small screens. However, at this carousel we didn’t really needed to make changes for small screens. This is because of the Carousel type’s default behavior. As the screen gets smaller, it starts to display less slides, and won’t resize them until there’s only one slide. So, each slide has almost the same size on tablet and mobile.

Related Documentation: How to use a demo slider in your generator

Related Post: How to Add an Instagram Slider for your WordPress Site?