How to configure & Style the Card Slider
The Card Slider widget lets you create beautiful Content Sliders on your WordPress website built. This element can be used to display featured posts, announcements, latest posts, etc without touching a single line of code. The Card Slider widget can display your website’s posts as well as custom content and you can alter them easily. Here in this tutorial, you’re going to learn how to use the Card Slider element. So let’s get straight into it:
⇒See Demo⇐
Creating Sliders with the Card Slider Addon
Select a style and set shortcode name
The Card Slider element has updated with the latest styles and templates. You can start adding your content under a preset layout of the Card Slider element. Let’s see how it works:
Click on the “Card Slider” icon, and it will then take you to the Settings page. 
Here, you need to select a particular style to create content with the element. Select a style and give it a name that identifies your shortcode then save it. 
Now, you’ll find the customization page with lite and advanced settings. There you can add and customize your Card Slider data.
Customizing the General Settings
»Content
Post Query
Here in this section, you can define the primary post query of your Card Slider…
⇒Post Type: Select the post type you want to display on the card slider. You can select either Post or Page as post type here.
⇒Author: Select the name of the author whose post you want to display in the slider.
⇒Categories: Select the category whose post/page you want to showcase.
⇒Tags: To display posts associated with a particular tag.
⇒Include Post: If you want to display only certain posts, then you can define the include here.
⇒Exclude Post: If you do not want certain posts to appear, you can simply ‘Exclude’ those contents as well.
⇒Posts Per Page: You can restrict posts per page to display a specific number of posts on a single page of the card slider. It takes a numeric value which signifies the number of posts to be displayed at a time.
⇒Offset: Use this setting to skip over posts (e.g. “2” to skip over 2 posts)
⇒Order By: Order your post in a certain manner. You can use different options like Post ID, Author, Date, Title, etc to filter your post.
⇒Order Type: Sort your post in ascending or descending order based on the criteria selected in Order By option.
Layout Settings
⇒Link Style: Set the link style of the card slider layout either the current tab or a new tab.
⇒Show Image: Show/hide the image from the card slider post layout.
⇒Image Size: Customize the fixed size of the image from our pre-defined size type.
⇒Show Title: Show/hide the title of the card on the slider.
⇒Show Excerpt: Show/hide the excerpt of the card on the slider.
⇒Excerpt Word: Set the excerpt word limit here.
⇒Show Meta: Show/hide the meta description on the card slider here.
⇒Meta Position: Customize the meta position either entry header or entry footer.
»Style
Layout Settings
⇒Background Color: Add a custom color to the card slider layout’s background. And when you choose an image as the background, upload a valid image or put a custom link for the background image.
Note: If you want to use an image as the background, then make sure you adjust the opacity from the background color.
⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom, and left of the layout for different dimensions. You can link the values together or customize them individually.
⇒Border Color: Add a custom color to the border.
⇒Border Radius: Set the border radius for the top, right, bottom, and left around the layout border for different dimensions.
⇒Padding: Set the padding value for the top, right, bottom, and left around the layout for different dimensions. You can link the values together or customize them individually.
⇒Margin: Set the margin value for the top, right, bottom, and left around the layout for different dimensions. You can link the values together or customize them individually.
⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.
⇒Animation: Animation settings is an advanced tool where you can add an animation type for your slider layout. You also have control over the responsive animation issue like animation duration, delay, offset, and looping.
Post-Thumbnail
⇒Thumbnail Align: Customize the alignment of the post thumbnail either left or right.
⇒Thumbnail Width: Customize the post thumbnail width manually for different dimensions.
⇒Thumbnail Height: Customize the post thumbnail height manually for different dimensions.
⇒Border Radius: Set the border radius for the top, right, bottom, and left around the post thumbnail for different dimensions.
⇒Margin: Set the margin value for the top, right, bottom, and left around the post thumbnail for different dimensions. You can link the values together or customize them individually.
Post Title
⇒Select Tag: Define the HTML tag for the post title text. Respectively h1, h2, h3, h4, h5 & h6 from bigger to smaller in size.
⇒Color: Add a custom color to the title text.
⇒Typography: Set the typography options for the post title texts. Here you can customize the font-family, font size, decoration, and styles.
⇒Padding: Set the padding value for the top, right, bottom, and left around the title for different dimensions. You can link the values together or customize them individually.
Excerpt
⇒Color: Add a custom color to the excerpt text.
⇒Typography: Set the typography options for the post excerpt texts. Here you can customize the font-family, font size, decoration, and styles.
⇒Padding: Set the padding value for the top, right, bottom, and left around the excerpt for different dimensions. You can link the values together or customize them individually.
Meta Setting
⇒Meta Name:
→Typography: Set the typography options for the meta name texts. Here you can customize the font-family, font size, decoration, and styles.
→Color: Add a custom color to the meta title/name text.
→Padding: Set the padding value for the top, right, bottom, and left around the meta name/title for different dimensions. You can link the values together or customize them individually.
⇒MetaData:
→Color: Add a custom color to the metadata text.
→Typography: Set the typography options for the metadata texts. Here you can customize the font-family, font size, decoration, and styles.
→Padding: Set the padding value for the top, right, bottom, and left around the metadata texts for different dimensions. You can link the values together or customize them individually.
⇒Meta Avatar:
→Avatar type: Set the meta avatar type either auto or common. If you select auto, then customize the width and height option. And when you select common, then add the avatar image and then customize the avatar width and height.
⇒Padding: Set the padding value for the top, right, bottom, and left around the meta box for different dimensions. You can link the values together or customize them individually.
Button Settings
⇒Button Align: Customize the read more button alignment on the card.
⇒Button Show: Show/hide the read more button on the card.
⇒Button Text: Add the button text here.
⇒Link Opening: Set the link opening either the current tab or a new tab.
⇒Padding: Set the padding value for the top, right, bottom, and left around the button for different dimensions. You can link the values together or customize them individually.
⇒Margin: Set the margin value for the top, right, bottom, and left around the button for different dimensions. You can link the values together or customize them individually.
Button Style
⇒Typography: Set the typography options for the button texts. Here you can customize the font-family, font size, decoration, and styles.
⇒Color: Add a custom color to the button text for both normal and hover mode.
⇒Background Color: Add a custom color to the button text background and control the opacity.
⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom, and left of the button text for different dimensions. You can link the values together or customize them individually.
⇒Border Color: Add a custom color to the border.
⇒Border Radius: Increasing the border-radius will add circular corners to the button container around the image. You can adjust the border-radius in pixels, % or em.
⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.
»Slider Settings
Slider Settings
⇒Effects: Add an effect to the card slider item here. Select from the lists.
⇒Custom Width Height: Enable/disable the custom width height option. If enabled, set the width & height manually for the slider for different dimensions.
⇒Items Gap: Generate the gap between slider items manually for different dimensions.
⇒Autoplay: Choose Yes or No to rotate slides automatically
⇒Autoplay Speed (ms): Set the time it takes for the next slide to start rotating. This time is in milliseconds, so 1000 ms is equal to 1 second.
⇒Pause On Hover: Select whether or not to pause autoplay when a user interacts with the card slider. Yes or No.
⇒Infinite Loop: Show the slider in a continuous loop, infinitely. Yes or No
⇒Grab Cursor: Enable/disable the grab cursor feature on the slider.
⇒Arrows: Enable arrows as the navigation in the card slider. When enables, customize the arrow settings in a separate section.
⇒Dots: Enable pagination dots in the card slider. When enables, customize the dots settings in a separate section.
⇒Direction: Choose to have the slides rotate direction from left or right
At the end of everything, hit the Save button and then see your beautiful Card Slider with stunning sliders in the preview section. That is all about using the Card Slider element. Now, just Copy the Shortcode and Paste in any area where you think your Cards will fit.
Note: Remember, forget to save the changes will cause losing all of your data. So, each time after done editing, make sure you save them.