Formally the RefinedSlidr (developed by Aaron Marquez of StackManiac) this slideshow stack has established itself as one of the very best slideshow gallery stacks available. At the time of RefinedSlidr being merged into the Stacks4Stacks project, this was the most popular stack sold by StackManiac. And for good reasons too; like the ease of setup, choice of customisable settings and the excellent results this stack could deliver time and time again.

RefinedSlider was totally rewritten in August 2015. Following-on from the successes of past versions, this latest version boasts a much-improved editing interface to compliment Stacks 3, many more style and behavioural settings, compatibility improvements and various other changes. RefinedSlider is a brilliant choice of stack in lots of projects; in instances where you want more customisability than our lighter Rotator stack.
 

Key features at a glance...
  • Embed RefinedSlider into your normal page flow or ExtraContent / FreeStyle containers without needing any additional stacks
  • Support for unlimited images, dragged and dropped into your page or sourced from an online location (like an image warehouse)
  • Easily delete images, add new images or change the order of images without needing to delete and re-add the stack each time
  • Quality 2D transitional effects that work reliably across all major web browsers and devices (no awkward stuttering or pixelation of images)
  • Display a complete responsive grid of thumbnail images below the slider, to enable quick navigation for end users
  • Setup your slider to run in either automatic or manual modes
  • Easily change the style and position of image captions, to suit the type of slider you're building
  • Fully responsive, with the option to set a maximum width and breakpoints to hide components (like navigation) on smaller screens
  • Randomise the display of images, have the slider start on a random image or set the slider to start on an image other than the first
  • Lightweight and efficient source code to help keep your pages loading quickly. Ability to have multiple RefinedSliders on the same page
  • Option to display slide numbers or bullet points below the slider or layered over your images
  • Images inside RefinedSlider can be set as links to resources, pages within your website or external websites
  • The option for powerful custom call-backs, to let RefinedSlider interact with itself or other elements / content on the page

Example

This is a working example of the RefinedSlider stack, with the default settings applied. The slider featured here is the same one demonstrated in the video.
 

Setup

Follow these instructions for getting a RefinedSlider stack working in you webpage:
  1. Once installed into Stacks 3, drag and drop a RefinedSlider stack into your webpage
  2. Click the blue '+' button to add new slides. Configure the slides with either a local image or a warehoused image, using the options provided in the RefinedSlider Image settings. You can also change the image titles, ALT attributes or apply links here too
  3. You can optionally customise any further style or behavioural settings, in the main RefinedSlider stack options. For example, you can toggle the display of navigation, captions, thumbnails pagination and other features on and off or change their colour
  4. Preview your page in RapidWeaver. Export or publish your completed page when done.

As always, hovering your mouse cursor over settings in edit mode will display an informational tooltip about what each setting does and any important information.

You can use multiple RefinedSlider stacks on the same page. However as always, we recommend against ignoring the 'one effect per page' rule and using a multitude of different animation stacks on the same page. This can otherwise have a very detrimental effect on page loading speed and may introduce compatibility issues. Most expert web designers work by the "less is more" protocol!

Optimising images

For best results, always optimise your images before putting them inside RefindedSlider or uploading them to your web server. This will ensure RapidWeaver continues running smoothly and your completed webpages will load fast. Images can be optimised in the following ways:
  1. Crop or resize images to the desired size in photo editing software like Photoshop, Pixelmator, Acorn, Gimp or DropFix
  2. Save images in either PNG or JPG format, at 72 dpi.
  3. Put images through ImageOptim to delete surplus meta data and other information not required
  4. Aim towards keeping each image less-than 200 kb in size. Images with a file size greater than this may not display on some smartphones and other lower-powered devices.

Using custom call-backs

Call-backs were added in version 2.1 and can be located within the RefinedSlider Advanced Settings. The idea of call-backs is to let you inject extra jQuery Javascript into the slider, to perform custom functions when certain events take place. For example, you could have RefinedSlider hide itself when the slideshow finishes, by entering this into the Slideshow End box:

$('.refinedSliderWrapper').hide();
or have users redirected to another page, when the slideshow ends:

window.location.href = "http://example.com";

These custom call-backs can be used by anyone proficient with jQuery Javascript, to make RefinedSlider an exceptionally powerful slideshow. There are a huge number of possible ways RefinedSlider can interact with other page elements or content, though use of custom call-backs.