The Instagram Slider is a full width slider which uses Simple slider type. This is the most common usage of the sliders, because it displays one slide at a time, which helps the visitor focus on one message.

There are three slides in the slider, which the bullet control indicates at the bottom of it. Apart from the bullets, the slider supports touch screen navigation. Additionally, there’s a special CTA that goes to the next slide.

Layers

The Instagram Slider template uses simple layers. There are three image layers, one for the image image, another for the decoration and the third is for the icon. You can also find two heading and a text layer that create the main content.

Animations

Smart Slider is a great tool to create animated layers. In this slider there are two layers which have layer animations: the main image and the decoration one next to it.

Layout

There are lots of interesting layouts in the Instagram Slider. The most obvious one is the main headline that partially covers the image. How to create such layout? Simply give a negative margin to the text to make it partially cover the image. Then increase the z-index of the column which contains the text.

The other interesting layout is the CTA button what you can use for navigation. Smart Slider has a dedicated button layer to create buttons. However, this special button is completely custom, which we built using a row, a heading and an image layer.

Responsive

Smart Slider has many cool responsive options, and we used a bunch of them to optimize the slider for mobile. If you check the slider on your phone, the first thing you might notice is that the text align has changed to center, while it was left on desktop. To create a layout like this, simply change the Inner align option on the container of your layer. In this case, it was the column layer.

Rows automatically break their columns into new lines on mobile. Thanks to that, the left column with the textual layers ends up above the right column where the main image is. However, on mobile they appear in a different order, because we changed the column order.

Also we reduced the size of the texts to make them fit better into the mobile layout.

Related Video: Smart Slider Pro Tutorial – Instagram Slider

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

The post Instagram Slider appeared first on Smart Slider 3 — WordPress Plugin.

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.

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.

Layers

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.

Animations

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.

Layout

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.

Responsive

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?

The post Instagram Carousel appeared first on Smart Slider 3 — WordPress Plugin.