Creative Services Toolkit

Documentation

CS Slider Documentation

Get help with setup, functionality, and troubleshooting

Click for Demo

Setup

The CS Slider is fully functioning slider / slideshow / carousel with many options, making it flexible enough to use in most applications.

  • The main component of the CS Slider is the ul with an li for each frame of the slider. Add as many li as you need frames.
  • Each li has properties which define what happens when that frame is visible
    • data-track tracking to fire when frame is visible
      Value: 1x1 tracking tag URL
      Conditions: This is optional, leave blank if no tracking is required
    • data-start - Function to fire when the frame is visible then it animates to be not visible. Like an onHide function
      Value: Function name
      Conditions: If used then a function needs to be defined outside of any other functions, including the jQuery ready function.
    • data-complete - Function to fire when the frame becomes visible. Like an onShow function
      Value: Function name
      Conditions: If used then a function needs to be defined outside of any other functions, including the jQuery ready function.
  • The span are default buttons for back/next. You can define your own buttons in the Javascript options below.

  • options tells the Slider how it should function
    • debug - Sets whether the Slider should log messages in the console or not
      Default: True
    • useBaseCSS - Loads in a base CSS file to provide functionality and basic styling
      Default: true
    • container - Defines the HTML wrapper for your Slider
      Default: $(".carousel")
      Conditions: Should match the class or ID of the ul in your HTML
    • nextBtn - Defines which HTML to act as the next button
      Default: $(".button.next")
      Value: jQuery object for the element you want to be the next button - ex: $(".myNextButton")
      Conditions: If left blank the Slider will add a next button for you
    • backBtn - Defines which HTML to act as the back button
      Default: $(".button.back")
      Value: jQuery object for the element you want to be the back button - ex: $(".myBackButton")
      Conditions: If left blank the Slider will add a back button for you
    • startRandom - Start on a random frame
      Default: True
      Conditions: If set to False Slider will start on frame 1
    • animationStyle - Define how the carousel should animate from slide to slide
      Default: Slide
      Options: slide, overlap, overlapAndScale, fade, fadeAndScale
    • direction - Defines the direction the Slider should animate
      Default: horizontal
      Value: horizontal or vertical Conditions: Has no effect for fade or fadeAndScale animationStyle
    • width - Visible width of the Slider, like mask width
      Default: 300px
      Value: px or percentage - ex: 300px / 100%
    • height - Visible height of the Slider, like mask height
      Default: 600px
      Value: px or percentage
    • loop - Define if the Slider should loop back to the start when on the last frame
      Default: True
    • autoAdvance - Define if the Slider should auto advance through frames on load
      Default:true
      Conditions: If set to True then set autoAdvancePause and autoAdvanceStop
    • autoAdvancePause - When auto-advancing number of seconds to pause on each frame
      Default: 2
      Value: number of seconds
      Conditions: Has no effect if autoAdvance is not set to True
    • autoAdvanceStop - Number of frames to advance through before auto-advance stops
      Default: 5
      Value: number of frames
      Conditions: Has no effect if autoAdvance is not set to True
    • pagination - Define if the Slider should automatically add pagination dots
      Default: True
    • slidePadding - Space between frames
      Default: 0
      Value: px only
      Conditions: Not available if width or height is set in percentage
    • animationSpeed - Animation time when switching frames
      Default: 1
      Value: number of seconds
    • Additional options you can add

    • initiallyVisible - Defines if the Slider is visible when ad loads
      Default: true
      Conditions: If Slider is hidden when ad loads, like in a sidekick for instance, set to false to avoid tracking inconsistencies
    • video - tell the slider the name of the video player, if you have one.
      Default: this is an optional option
      Conditions: Setup the video player first, otherwise you'll get an error.
  • window.carousel1 = new CS_Carousel(options) creates a new CS Slider and assigns it to the carousel1 variable
    This allows you to call functions that are defined inside the CS Slider, such as getting the current slide number, or jumping to a specific slide. For a full list of available functions see the Function Section below

Functions

These functions are available as part of the CS Slider. You can call them by using the variable that you assigned the CS Slider, like window.carousel1.function();

Tracking

  • tag - URL to a tracking 1x1 image

Auto Advance

Change Frame (next or back)

  • direction - Either "prev" or "next"

Jump to a Frame

  • whichSlide - The number of the frame to go to, 1 2 3 etc
  • instant - If instant is True Slider will go to that frame with no animation. If left blank it will animate like normal

Determine if the Slider is currently animating

  • Returns either true or false.
  • Example: if(yourVariable.vars.isAnimating === false){ //do something }

Determine what frame the Slider is on

  • Returns a number for the current frame of the Slider.
  • Example: if(yourVariable.vars.onSlide !== 2){ yourVariable.jumpSlide(2); }

Get the current frame DOM element

  • Returns the jQuery element associated with the current frame of the Slider.
  • This is helpful when you want to find something on the current frame.
  • Example: yourVariable.vars.slides.eq(yourVariable.vars.onSlide - 1).find(".title").text()
    This would find the current frame HTML, then find a div called title, then get the text value of that div.

Do something after Slider has finished animating