How To Create Dynamic Posts Responsive Slider with SmartSlider WordPress Plugin

Categories:

Sliders are great to display highlights and key content on websites. If you are using WordPress website, then there are various plugins to create sliders.  Slider can be of various types – image sliders, static text sliders, post sliders, video sliders etc. If you want to display latest posts from a certain category, then you can create dynamic post slider. In this post, we will see How To Create Dynamic Posts Responsive Slider with SmartSlider WordPress Plugin.

Dynamic Slider

A dynamic slider is a type of slider that automatically pulls content from some source, such as from WordPress site, YouTube channel, WooCommerce store, and more. For example: if you may like to display your latest blog posts on your homepage. With a dynamic slider, you can pull latest blog posts from your WordPress site and display a slideshow of your latest posts in the slider. For this, we need to create dynamic posts slider.

In this post we are using SmartSlider WordPress Plugin to create Dynamic Posts Responsive Slider. There are two options – by filter or by ID. In dynamic post sldier, we need to specify the post IDs which we want to display. In dynamic post slider by filter, we can select the category or tags or other filter options to display the dynamic post slider.

Smart Slider 3

In this example, we are using a particular category within the SmartSlider settings to display Dynamic Posts Responsive Slider.  Here the requirement is to show only some news without fancy background and featured images. Otherwise, you can also customize the dynamic slider to create beautiful slider with good looking background, and images.

Here is a brief video demo How To Create Dynamic Posts Responsive Slider with SmartSlider WordPress Plugin

If you prefer to read, skip the video and continue below.

Steps in brief to create Dynamic Posts Responsive Slider with SmartSlider WordPress Plugin

1) Go to WordPress > Plugins > Add New plugin

2) Search for “SmartSlider 3” WordPress plugin, install and activate it.
A new menu item will be available in the left sidebar by the name “SmartSlider”.

3) Go to SmartSlider menu from the left sidebar > click Dashboard.

4) Click on “New Project”

Here you will get an option to “Create New Project (from scratch)” or “Start with a Template”.
If you are planning to create sliders such as image slider, static text slider, etc. then you can start with a template and customize it as per your needs.

5) For dynamic post slider, start from scratch. Click on “Create New Project”  in the screen above.

6) Choose the project type.
Name the slider, size  and layout options. Then click on create.

7) Click on ADD SLIDE > click DYNAMIC SLIDES

Create Dynamic Posts Responsive Sliders

8) Next, choose POSTS

9) Next, choose BY FILTER. The other option is BY IDs.

10) Next, select the filters. You can choose CATEGORIES, TAGS, etc.
Here we are choosing only one specific category which we want to display in the dynamic post slider.
Customize other filter options such as to include sticky post or not, sorting order, ascending or descending,

11) After you have set your filter, click on VIEW RECORDS to check if your filter fetched any results or not.
If not, then there may be something wrong with the filter settings.

12) If you can see records, Click ADD to add the dynamic slider.

13) Now, it is time to customize the dynamic slider.
There are several settings to customize the slider. We will not be covering the settings. You can explore the settings and customize as per your requirements. There will be layers which you can select and edit the settings as per requirements. Some basic layers in SmartSlider plugin are: Row and Col, Heading Layer, Text Layer, Image Layer, Button Layer.

Anyways, the basic settings are:

  • Size
  • Autoplay (on, off)
  • Animation timing between slides
  • Background Image options
  • Content options etc.

14) Click on a particular layer, then edit the CONTENT and its settings.
In this case, we are not displaying any background image. Instead, we are using background color.
We are gonna display a Title, and excerpt only.

If you want to have dynamically changing content, you should set variables.
Without variables, you will have a static layer.

For the title, we have {title} variable. We can choose a heading H2, H1 etc. depending on requirement. There are also presets which we can use instead of customizing each parameter individually.

We duplicated the Title row and used it for the Excerpt. We used the variable {excerpt} to get the excerpt. And then used presets for the design.

You can watch the video above for each of these steps.

15) Displaying the slider

After the slider is customized, it is now time to display. We want to display in the HomePage. So go to Pages > HomePage > Edit.

We can use the slider short-code and paste it. Or we can click on the SmartSlider icon in the editor and insert the SmartSlider slider.

After that, update the page. View the page to see the slider.

If you need to do certain changes, you can go back to SmartSlider menu from the left sidebar > and edit the slider.

Customizing SmartSlider for Responsive View

There are several options in SmartSlider plugin to customize the slider for responsiveness. You can set different settings for mobile, tablet and desktop view.

You can refer to the following articles:

For more details, you can refer to

 

#WordPress #WordPressPlugins #SmartSlider

*******************
You may also subscribe to this channel on YouTube. Click here.

Previous

How to enable dark theme in Windows 11

How to save files as PNG in Photoshop?

Next

Leave a Reply

Discover more from Techubber

Subscribe now to keep reading and get access to the full archive.

Continue reading