Event Slider

The sliders plugin helps users display their events in slider forms at the front end of the website along with the event image, event title, organizer name, and description. The slider plugin comes with responsive designs that are suitable for all devices.

Installing The Plugin

The installation process is the same for all the addons, offered by WP Event Manager. They can be both installed automatically and manually.

1. Automatic Installation: You can install the plugin from the backend of your WordPress. Click Here to see how you can install the plugin automatically.
2. Manual Installation: You can also install the plugin manually using SFTP or FTP tools. Click Here to see how you can install the plugin manually.

Watch the entire video for better understanding.

How To Get The Event Sliders Using A Shortcode?

There are two different methods to display the Event Slider on the website.

1. The First one is using a shortcode.
2. The second one is using a page template.

Follow the below-mentioned steps to display the Event Slider on the website using a shortcode:

1. Log in to the Admin panel.
2. Go to WP-admin >> Pages >> Add New.
3. Add a suitable title to it.

4. Add the below-mentioned short code to the text area of the description box.

   For Events, use the shortcode[events_slider].

   For Past Events use the shortcode[past_events_slider].

5. Preview and publish it on the website.

   [events_slider featured="true" limit="5" orderby="rand"]

The Slider Shortcode Attributes

• featured: When set to true it only shows the featured events and when set to false it shows no featured events. You can leave it entirely to show both.
• cancelled: When set to true it only shows the canceled events and when set to false it shows no canceled events. You can leave it entirely to show both.
• event_online: When set to true it only shows the online events and when set to false it shows the offline events. You can leave it entirely to show both online and offline events.
• limit: This manages the number of events to display on the sliders.
• orderby: Displays the order of the events on the slider in respect to the attributes mentioned. Supports title, ID, name, modified, parent, rand, event_start_date, featured.
• order: Defaults to ‘ASC’. Can be set to ‘ASC’ or ‘DESC’ to choose the sorting the direction of events on the slider.
• navigation: When set to true it shows the navigation arrows and when set to false it hides these arrows.
• dots: When set to true it shows dots below the slider and when set to false it hides these dots.
• infinite: When set to true it shows infinite events on the slider. The slider will keep showing all the events listed.
• adaptiveheight: If set to true, the slider’s height will auto adjust itself according to the banner image, if set to false, the height will be stagnant irrespective of the banner size.
• autoplay: Set it to true, to autoplay the events on the slider. Set it to false if you want to manually navigate the events.
• autoplay_speed: [event_slider autoplay=”true” autoplay_speed=”300″] This will decide at what speed the autoplay of events should work. You can set it according to your requirements.

Past Event Slider shortcode

Follow the below mentioned shortcode for past event sliders

[past_events_slider orderby=”title” limit=”5″]

Note: Same attributes as mentioned above are used in the past event slider shortcode as well.

How To Get Sliders Using Page Template?

1. Create a new .php file into the root folder of your theme.
2. Name it something along the lines of “wpem-slider-template.php”.
3. Add below code into the file and save.

   <?php 
   /** Template Name: Slider Template 
   * @since: 1.0.0 
   */ 
    get_header(); ?> 
    
   <?php echo do_shortcode('[events_slider]');?>
    
   <?php get_footer(); ?>
   

Now, go to WP-admin >> Pages >> Add New. Here, you will get the “Slider Template” option for the Template under the “Page Attributes” section at the right bottom side of the page. Select that template and publish the page. That’s it! 🙂

For more clarification, see this screenshot:

Frontend View Of The Slider

This is how your slider will look on the front end of your website with the event image, event title, organizer’s name, and organizer’s description.

Responsive View Of The Slider

The Slider plugin from WP Event Manager comes with responsive designs which makes it easy for your website visitors to view the website on any of their preferred devices including mobile phones, tabs, iPads and more without hampering the overall format of the website.

How to stretch an image in a Slider?

If a user wants to stretch an image, he or she can apply the following CSS

.wpem-prime-event-slider-wrapper .wpem-prime-event-slider-item .wpem-prime-event-slider-content .wpem-prime-event-slider-image img { width: 100%; height: 100%; }

Advanced: Overriding/Customizing the Template Files

For overriding or customization, template files can be found in the wp-event-manager-sliders/templates/ directory.

To override a template file, you need to follow the below mentioned steps:

1. Create a directory “wp-event-manager-sliders” under your theme folder.
2. Copy the template file to “/wp-content/yourtheme/wp-event-manager-sliders/” directory.
3. Your theme will use all the template files from the “/wp-content/yourtheme/wp-event-manager-sliders/” directory instead of the plugin’s template file (/wp-content/plugins/wp-event-manager-sliders/).
4. wp-event-slider.php – which displays the event listings with a slider.

Remember: If you have overridden template file and plugin frequently updating then you need to sync template file with new updates from the plugin’s template file for better functionality and new features.