Lightweight Slider

Lightweight image slider plugin for WordPress

Beach Shore at Dusk

Photograph by Pok Rie from Malaysia

Scenic View Of Ocean During Sunset

Photograph by Nuno Campos from Portugal

Scenic View from the Dock

Photograph by Fabio Partenheimer from Essen

Black Rock Formation

Photograph by Quang Nguyen Vinh from Vietnam

About

Lightweight Slider is a free and extremely lightweight responsive image slider which uses custom post types and featured images. Each image has a ‘srcset’ which enables the browser to automatically choose image sizes based on the size of the screen. Smaller images are loaded for mobile and high resolution for large monitors.

An easy to use settings page allows full control over slide height, delay between slides, transition duration and animation type. The code is well documented throughout and provides an excellent resource for those interested in plugin development.

Features

  • Extremely lightweight (main files less than 25kb!)
  • Easy set up using custom post types and featured images
  • Optional pagination and navigation controls
  • Adjustable delay and transition time between slides
  • Choose between fade or slide animation
  • Animations pause when browser window inactive
  • Fully responsive
  • Semantic, minimal HTML
  • Touch and mouse drag enabled
  • No external resources loaded
  • Simple to modify (plugin consists of only three main files)

Limitations

In order to keep this plugin as lightweight as possible it was necessary to make some compromises during development.

  • This slider only works with images
  • You can only create one one slideshow per website (but you can use it on multiple pages)

Installation

  1. Download the plugin from https://wordpress.org/plugins/lightweight-slider/
  2. Copy the lightweight-slider folder to the plugins folder on your website
  3. Activate the plugin
  4. Choose Lightweight Slider from your WordPress side menu
  5. Click ‘Add New’ to add new slides
  6. Change settings as required
  7. Add [lightweight-slider-shortcode] to any page on your website