Home

Vertical Slide Plugin Wiki

Welcome to the Vertical Slide Plugin Wiki! This space provides documentation and guidance on using the Vertical Slide Plugin for WordPress.

Table of Contents

• Introduction
• Installation
• Usage
  • Creating Slider
  • Displaying Slider
• UI Behavior
• Support and Contributions

Introduction

The Vertical Slide Plugin is a WordPress plugin designed to create sliders on the frontend of your website. It offers a custom post type feature for easy slider management and integrates seamlessly with Advanced Custom Fields Pro (ACF Pro) for enhanced functionality.

Installation

To install the Vertical Slide Plugin, follow these steps:

1. You can download the plugin from here and install it in your Wordpress directly or Clone the ucf-vertical-slide-plugin repo into your local development environment, within your WordPress installation's plugins/ directory: git clone https://github.com/UCF/ucf-vertical-slide-plugin.git
2. Cd into the new ucf-vertical-slide-plugin directory, and run 'npm install' to install required packages for development into node_modules/ within the repo
3. Ensure that ACF Pro plugin is installed and activated.
4. If you haven't already done so, create a new WordPress site on your development environment to test this plugin against, and install and activate all plugin dependencies.
5. Activate this plugin on your development WordPress site.
6. Run gulp default to process front-end assets.
7. Run gulp watch to continuously watch changes to scss and js files. If you enabled BrowserSync in gulp-config.json, it will also reload your browser when plugin files change.

Usage

You can use this plugin to display a slider of people or locations. For better usability, ensure that you add images in PNG format with a transparent background.

Creating Slider

To create the slider using the Vertical Slide Plugin, follow these steps:

1. Navigate to the "Vertical Sliders" section in your WordPress dashboard.
2. Add new sliders and fill out the fields for Image, Title, Subtitle, and Description.

Displaying Slider

To display the slider on your website, use the provided Shortcode [ucf_vertical_slide] with either the slider's slug or ID attribute. The format for using the Shortcode is as follows:

[ucf_vertical_slide slug="title-of-slider"] or [ucf_vertical_slide id="post-id"] 

• For example :

In this case, we can simply add a shortcode with either the ID or the slug:

[ucf_vertical_slide slug="my-slider"] or [ucf_vertical_slide id="84110"]

• Note: If you provide both the ID and the slug, the slug will be skipped here.

UI Behavior

The Vertical Slide Plugin features intuitive UI behavior:

• Disables browser scrolling when the mouse pointer enters the slider section.
• Allows sliding to the next slide without enabling browser scrolling until the end slide is reached.
• Slide navigation via keyboard (Up and Down keys) or touch swipe gestures (up and down).

Support and Contributions

For support, issues, or inquiries, please submit a GitHub issue or contact our support team. Contributions to the development of the Vertical Slide Plugin are welcome! Feel free to fork this repository and submit pull requests.