BW Slideshow

Formerly Change Between, this plugin can handle automatic or manual slideshows usually used for feature images at the top of pages. It can be used for changing between any elements automatically, with next and previous buttons, individual page navigation or any combination of these.

This plugin is quite basic and should not be used unless it fits your requirements accurately. Transitions are currently configured as CSS instead of Greensock. If viable, this plugin will be updated in future.

Example usage

 

To assist in creating any transitions classes are added and removed from your elements when in use.

  • sbis-cb-showing - added when element is starting to be shown to when completely hidden
  • sbis-cb-hidden - only added when element should be completely hidden (opposite of sbis-cb-showing)
  • sbis-cb-incoming - added when element is set to start showing until completely shown
  • sbis-cb-outgoing - added when element is set to start hiding until completely hidden
  • next - set when element starts being shown or hidden if we are moving forwards
  • prev - set when element starts being shown or hidden if we are moving backwards

bwSlideshow

Variable/Key
Type
Default
Description
cls
string
-
Class name which is applied to all your elements you want to change between.
settings
object
{
  interval_time:5000,
  fade_time:500,
  cross_fade:false,
  links_cls:false,
  auto_change:true,
  title_selector:false
}

bwSlideshow Settings

Below are variables you can have in your settings object to customise behaviour.

Variable/Key
Type
Default
Description
interval_time
integer
5000
Milliseconds to wait before changing
fade_time
integer
500
Milliseconds to wait before changing
cross_fade
boolean
false
Should the incoming and outgoing elements transition at the same time.
links_cls
string
false (bool)
Set the the classname for all links which change the element being displayed. For next buttons add the class next. For previous/back buttons add the class prev. Otherwise you link should reference the element to show by ID (e.g. href='#showItem1')
auto_change
boolean
true
set to false to disable automatic changing.
title_selector
string
false (bool)
any element showing can have an attribute data-cb_title. If you define title_selector, this element will display the contents of your data-cb_title attributes for each item.