Facebook Twitter Instagram
    Facebook Twitter YouTube
    AlienWP
    • Home
    • About
    • Contact
    • Sections
      • Collections
      • Guides
      • HowTo
      • WordPress Themes
      • WordPress Plugins
      • Hosting
      • News
    AlienWP
    Home»Documentation»Sliders: Documentation

    Sliders: Documentation

    Installation

    1. Download and unzip the plugin package.
    2. Upload the folder 'sliders' to '/wp-content/plugins/'.
    3. Navigate to the “Plugins” page in your WordPress admin panel and Activate the plugin. A new item “Slides” would appear in your admin menu.

    slides_post_type

    Create Slider

    From your WordPress admin panel, navigate to Slides → Sliders and create a new Slider by filling out the setting fields:

    • Name – write a name for your slider. This is a required field but it serves only as a reference, so anything would work.
    • Width – set the maximum slide image width. Ideally, this should be the max width of the containing element. For example, if the default/desktop width of your site is 940px, and you want this to be a full-width slider, write ‘940’ in the field.
    • Height – set the maximum height of the slide images in pixels.
    • Effect – select the animation (transition) effect. There are two options – ‘fade’ and ‘slide’.
    • Delay – set the time interval between two slides in milliseconds (1000 milliseconds = 1 sec).
    • Animation Duration – set the speed of the transition effect in milliseconds (1000 milliseconds = 1 sec).
    • Start Automatically – if unchecked, your visitors would need to use the navigation elements to scroll between the slides.

    slider_setup

    When done, click “Add New Slider”. Your new slider will be added to the list. If you need to review and edit the slider settings, simply click on its name in the table and the “Edit Slider” screen would appear.

    Create Slides

    Next, we need to create a few slides to use in our new slider. Go to Slides → Add New Slide and fill out the following fields:

    • Title – would appear in the upper right corner of the slide. Optional.
    • Slide Image – click on “Set featured image” to upload the image you want to use for this slide. It should be wide and tall no less than the previously set slider width/height.
    • Slide Link – if you want to make the slide clickable (so it directs the user to another place if clicked), fill out this field with the respective URL. Optional field.
    • Sliders – select the slider(s) this slide belongs to in the side box.
    • Slide Order – use numbers (0, 1, 2, 3,…) to set the place of this slide within the slider sequence. This field is optional and can be used for editing/re-arranging the slides after they are already created. If omitted, the slide creation date would be used to arrange the slides order – the newest slides would appear first.

    When done, click “Publish”. Then you’d probably want to repeat these steps to create a few more slides for your slider.

    slide_edit

    How to Display the Slider on your Site

    Sliders are displayed via a shortcode, which looks like this:

    [sliders id="17"]

    That ’17’ must be replaced with the ID of the specific slider you want to display. Using it without specifying an ID is also possible – if you simply add [sliders] to your page/post/widget, ALL slides would be included, regardless of the slider they belong to.

    But how would you know the ID’s of your sliders? Go to Slides → Sliders and look at the table to the right, where all sliders are listed. For your copy-pasting pleasure, the last column contains the exact shortcode you should use. Simply copy it from there and paste where you want it displayed.

    sliders_shortcodes

    And where exactly to paste this shortcode? Here are the options:

    • In your post or page – directly paste [slider id="121"] in the post/page editor area and save.
    • In your template file – be it header.php, home.php, post.php, page.php,… Use this syntax: <?php echo do_shortcode( '[sliders id="23"]' ); ?>
    Latest
    Video

    Best Summer LUTs (Free & Paid) Hottest Color Grading for a Sizzling Summer

    By Oliver DaleMarch 27, 2023

    Summer is the perfect time for capturing and sharing memories with family and friends. Whether…

    Best Vintage LUTs (Free & Paid) Give Your Videos a Retro Vibe

    March 21, 2023

    Best Cinematic LUTs (Free & Paid) for Show-Stopping Visuals

    March 16, 2023

    1000+ Best Lightroom Presets: Ultimate Collection!

    March 16, 2023
    About

    Welcome to AlienWP!
    A blog about WordPress, Design, Technology & Productivity.

    Coupon Codes
    • WPEngine Coupon Code
    • Elegant Themes Coupon Code
    • Media Temple Coupon Code
    • Template Monster Coupon Code
    • Tesla Themes Coupon Code
    • Bluehost Coupon Code
    • CSSIgniter Coupon Code
    • Dreamhost Coupon Code
    • Engine Themes Coupon Code
    • Flywheel Coupon Code
    • InkyDeals Coupon Code
    • Inmotion Hosting Coupon Code
    • Liquidweb Coupon Code
    Social
    • Facebook
    • Twitter
    • YouTube
    About

    AlienWP themes and plugins rely on core WordPress functionality to achieve speed, seamless integration and simplicity of use.

    You won't find bloated options and admin panels here: Only the award-winning, intuitive interface we all know and love.

    • About Us
    • Terms & Conditions
    • Privacy Policy
    • Contact Us
    • Best WordPress Hosting
    • Hosting Reviews
    Recent Posts
    • Best Summer LUTs (Free & Paid) Hottest Color Grading for a Sizzling Summer
    • Best Vintage LUTs (Free & Paid) Give Your Videos a Retro Vibe
    • Best Cinematic LUTs (Free & Paid) for Show-Stopping Visuals
    • 1000+ Best Lightroom Presets: Ultimate Collection!
    • 250 Free Lightroom Presets: Ultimate Categorized Collection for Photographers
    • Monarch Social Sharing Plugin Review: Get More Shares & Follows
    • 10 Best WordPress Membership Plugins 2020: In-Depth Guide to Free & Paid Options
    Coupons
    • WPEngine Coupon Code
    • Elegant Themes Coupon Code
    • Media Temple Coupon Code
    • Template Monster Coupon Code
    • Tesla Themes Coupon Code
    • Bluehost Coupon Code
    • CSSIgniter Coupon Code
    • Dreamhost Coupon Code
    • Engine Themes Coupon Code
    • Flywheel Coupon Code
    • InkyDeals Coupon Code
    • Inmotion Hosting Coupon Code
    • Liquidweb Coupon Code
    Facebook Twitter YouTube

    Copyright © 2013 - Kooc Media Ltd. All rights reserved. Registered Company No.05695741
    Our Sites: FlowPresets / GardenBeast / GolfMonster / Blockonomi / Money Check / Vinjatek / BoatingBeast / Beanstalk

    Type above and press Enter to search. Press Esc to cancel.