Description
Simple Fullscreen Responsive Slider (or Simple Slider) is exactly that—an
easy-to-use, lightweight, responsive slider plugin designed to add a fullscreen
slide show to your front page. It supports multiple post thumbnails for slide
backgrounds, has no branding, and you can edit all the CSS directly from the
options page (or add it into your stylesheet and leave the custom CSS blank).
DEVELOPER-FRIENDLY
Or perhaps this section should read “client-friendly” as the plugin has no
branding on the slide editor or options page. Our goal was to create a useful
slider that other developers would feel comfortable with and enjoy using on
client projects. Note: The plugin is intended for developers and changing its
appearance requires customizing the default CSS.
CUSTOMIZABLE
The plugin provides either a fading or sliding transition (with customizable
slide and effect durations), slide overlays, and allows developers to edit all
CSS directly from the options screen. Alternatively, you can leave the custom
CSS blank and add the required styles into your main stylesheet.
RESPONSIVE DESIGN
When combined with Chris Scott/VOCE Platform’s awesome Multiple Post Thumbnails
plugin (see
Multiple Post Thumbnails), users can attach up to six separate images for a
true responsive slider. The plugin will prompt for six different backgrounds and
use those images according to the device used (instead of sending large images
to mobile devices and/or low resolution images to retina and 4K displays). If
you leave a slot open, it will search subsequently smaller sized images so, at
a minimum, you must attach an image to the smallest slot.
The slider uses Patrick Kunka’s EasyFader jQuery plugin (visit
https://github.com/patrickkunka/easyfader for more information).
Screenshots
The options panel for Simple Slider.
Installation
INSTALLING THE PLUGIN
The plugin can be installed and activated in the usual fashion. See
Managing
Plugins if you need help with this.
ADDING THE CODE
You will need to manually edit your theme and insert the following code to display
the slider. This is typically added after your opening body or header tag and
it will only work on your front page. The slider will not display properly if
this is wrapped in additional tags.
<?php if (shortcode_exists( 'simple-slider' )) : do_shortcode( '[simple-slider]' ); endif; ?>
SAVING THE OPTIONS
Lastly, you will need to, at a minimum, visit the slider options page and save
the default options to the options database. You can do this from the newly
created “Settings > Slider Options” page. From here, you can style the slider
by customizing the default CSS. As this plugin is designed for other developers
the default CSS is quite basic.
FAQ
Let us know if you have any questions or suggestions!
Q. What happens if I use MultiPostThumbnails but do not fill (attach) all of the image sizes?
A. The plugin will search for subsequently smaller sized images and use them to construct the media queries. As a result, the first (and smallest) image slot is required.
Q. What are the image sizes used by Simple Slider?
A. On its own, Simple Slider provides one featured image slot for a “one size fits all” background. If you have Multiple Post Thumbnails installed, Simple Slider will instead prompt for:
- Smartphones: 888px by 888px (max-width: 1136px)
- Tablets: 1366px by 768px (max-width: 1599px)
- Laptops: 1600px by 900px (max-width: 1919px)
- Desktops: 1920px by 1080px (max-width: 2559px)
- Retina Displays: 2560px by 1600px (max-width: 3839px)
- 4K Displays: 3840px by 2160px (min-width: 3839px)
Q. I can’t get my slider to show up on my home page?
A. Chances are it’s getting wrapped with another tag that does not have the correct CSS.
Q. How do I style the slider?
A. The slider is intended for web designers and so customizing the appearance requires changing the default CSS.
Reviews
Contributors & Developers
“Simple Fullscreen Responsive Slider” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Simple Fullscreen Responsive Slider” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.4 – Minor CSS fix. Updated for WordPress 4.2.1.
1.0.3 – Minor bug fix. Updated for WordPress 4.0.
1.0.2 – Updated Dashicon and Plugin URL.
1.0.1 – Fixed a PHP Warning (Thanks @jonhurleydesign)
1.0.0 – Initial Release Tested to 3.9.2.