Timeline and History Slider

Getting Started

Timeline and History Slider adds a Menu tab in WP Admin side with the name “Timeline Slider” where you can add a Title, Timeline Content, Timeline Image, edit and delete.

Screen shows “Timeline Slider” tab in the left side and all timer content added

This plugin work same like WordPress post section where you can add title and featured image. To add a new image in plugin just need to follow few steps.

1.Go to Timeline Slider Tab and click on Add New
2.Add title, Timeline content, Timeline image and update

Bellow screen shows how to add a Timeline

How to Display and Shortcode

Display a Timeline is very simple. Just add the following shortcode on any page:
Timeline and History contain below shortcode.

Timeline Slider

[th-slider]

You can also use template code to display image slider.

<?php echo do_shortcode('[th-slider]'); ?>

Gutenberg Blocks

Please go to page or post and add “Gutenberg Blocks“.

Timeline Slider Parameter

[th-slider]

  • Design: [th-slider design="design-1"]
    Select the design. right now there are 2 designs. design-1 and design-2
  • Pagination(Slider DOTS): [th-slider dots="false"]
    Display dots or not. Values are “true OR false”.
  • Arrows: [th-slider arrows="false"]
    Display slider arrows or not. Values are “true OR false”.
  • Autoplay and Autoplay Interval: [th-slider autoplay="true" autoplay_interval="100"]
    Enable Autoplay or not and Values are “true OR false”. You can set Autoplay Interval. You can enter any numeric value.
  • Slide Speed: [th-slider speed="3000"]
    You can set slider speed.
  • Limit: [th-slider limit="-1"]
    Limit define the number of images to be display at a time. By default set to “-1″ ie all images. eg. if you want to display only 5 images then set limit=”5″.
  • Category: [th-slider category="5,10,15"]
    Display slider by their category ID. You can pass multiple ids by comma separated.
  • Fade: [th-slider fade="true"]
    Slider Fade effect. By default effect is slide. If you set fade=”true” then effect change from slide to fade.
  • Loop: [th-slider loop="true"]
    Enable continuous sliding. Values are “true” OR “false”.
  • Slider Lazyload: [th-slider lazyload=""]
    Select option to use lazy loading in slider. Values are “ondemand”, “progressive”.
  • Extra Class: [th-slider extra_class=""]
    You can add extra class here.