Customization Magic – Listic Slider with Right-Aligned Text and Single Sliding Content

Posted By on |


Listic Slider is Add-on Compatible

Listic Slider is Add-on Compatible

Get slides from any RSS Feed, NextGEN Gallery, Post Attachments and Custom Taxonomies using SliderVilla Add-ons.
Works Perfectly With All Themes

Works Perfectly With All Themes

If you like to have a slider like Listic, no need to change the theme. It works with almost all ...
Best Slider for Sidebar in Any WordPress Theme

Best Slider for Sidebar in Any WordPress Theme

Install and Embed Listic Slider in Sidebar or any other place in existing theme using shortcode, widget and template tag.
Link Slides to Any Internal or External Links

Link Slides to Any Internal or External Links

Add URL for slides as per your choice. Dedicated post meta box for these and many other parameters.

Read More

Unlimited Settings Set and Unlimited Sliders

Unlimited Settings Set and Unlimited Sliders

All SliderVilla sliders including Listic comes with setting set feature. Create and add unlimited sliders with different settings.
Horizontal Scroll, Vertical Scroll, Fade and Many Other Transitions

Horizontal Scroll, Vertical Scroll, Fade and Many Other Transitions

From Settings panel, you can choose the transition effect as per your choice.
SEO (Search Engine Optimization) Ready

SEO (Search Engine Optimization) Ready

Listic is SEO ready where we took care of everything required for on-page SEO in a slider.
No Compromise on Performance

No Compromise on Performance

With smart techniques and better coding practices, Listic doesn't compromise with site performance.

Read More

Best Support in Industry

Best Support in Industry

Get 24 x 7 lifetime support for the slider plugin and free setup.

Tutorial to Customize Listic Slider for above Design

Listic Slider WordPress Plugin is capable of creating different designs of content slider. For example, apart from the default “List View” sliding format, we showed a customization tutorial for “Single Content, Text-in-Bottom” slider. Today, we are showing you a step by step guide to create “Right-Aligned Text and Single Sliding Content” slider out of Listic Slider plugin.

Step # 1 – On Listic Slider Settings panel, Go to Basic Settings ==> Number of Items Visible in One Set and change that to “1″.

Step # 2 – Change “Complete Slider Width” to 630, “Complete Slider Height” to 277 and “Sliding Area Height” to 275

Step # 3 – Populate “Slide Border Thickness” as 1 and “Slide Border Color” as #dfdfdf.

Step # 4 –  On same Settings page, Go to “Slider Content ==> Thumbnail Image ==>”Image Size” and choose “custom size (width : 400)” and “Maximum Height of the Image” to 275.

Step # 5 – On “Navigation Settings” tab, under “Navigation Basics”, select “Navigation Arrows and Buttons Folder” as Black.

Step # 6 – Under “Navigation Settings” tab, go to “Navigational Arrows” section and “Navigation Arrow Distance from Bottom of the Slider” to 10%.

Step # 7 – On the same tab, go to “Navigational Buttons” section and change “Navigation Button Distance from Bottom of the Slider” to 10% and “Navigation Buttons Left Margin” to 75%.

Step #8 – Now it’s time to add some custom CSS for this design. On the “Default Setting” page on “Settings Panel”, you can see a “Custom Styles” box under “Miscellaneous” section on “Basic Settings” tab. Paste the below CSS in that styles box,

div#listic_slider_4_next.listic_next  {right:70px !important;z-index:99;}
div#listic_slider_4_prev.listic_prev  {left:440px !important;z-index:99;}
div#listic_slider_4 p.more a{
padding: 3px 7px !important;
background-color: #666 !important;color:white;
margin-top:8px;
color:white !important;}
div#listic_slider_4 p.more a {float:left !important;}
div#listic_slider_4 .listic_slideri {margin:0 20px 0 0 !important;}
#listic_slider_4 .listic_slide img{padding:0 20px 0 0 !important;}
#listic_slider_4 h2 a{padding:10px 0 5px 0 !important;display:block;border-bottom: 1px solid #ddd;}

Note – As for above example, I create a new slider from “Sliders” sub-menu under Listic Slider Admin Menu, and the generated ID for that slider group was #4. I wanted to apply the above CSS only to that custom slider, that’s why the above CSS code is pointing to the #4 DIV and Class. You can change that as per your slider ID in CSS. YOu can find the Slider ID either on the “Sliders Menu page” or by viewing the source code of the page where the slider is embedded.

That’s it. The final result would be same as the slider embedded in this post.

So finally, it means you just need to download one WordPress plugin (Listic Slider) and with few customization from settings panel, you can embed different looking multiple sliders on your WordPress site.

What are you waiting for? Go ahead and grab a copy of Listic Slider WordPress Plugin today.

Download Listic Slider WordPress Plugin Now

ShortcodesResult
[listicrecent]To have a slider with recently published blog posts automatically appearing inside the slider, you just need to paste the shortcode inside the page or post content area where you want the slider to embed
[listicslider]Manually add any post to the slider using Listic Slider meta box available on edit post/page window. To embed a slider with those added posts/pages, use this shortcode.
[listiccategory catg_slug="social-media"]Embed a slider with posts from specified category. For example, this shortcode will embed Listic Slider with posts from category with permalink as ‘social-media’
[listicslider set="3" id="2"]Get Slider ID from Sliders sub-page on dashboard, and setting ID from Settings sub-page. This shortcode will embed a custom slider with setting set 3 and will show slides of Slider ID 2
Need Custom WordPress Slider Developed or Looking for Changes in SliderVilla Sliders? Contact us