Read more

SudoSlider: a jQuery slider

Arne Hartherz
July 02, 2014Software engineer at makandra GmbH

SudoSlider is a simple yet powerful content slider that makes no (or very few) assumptions about your markup and is very customizable.

Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

You can basically embed any HTML into the slides, so you can mix images, videos, texts, and other stuff.

Check out the demos Show archive.org snapshot .

Please note:

  • There is a ton to configure. Check the demos and read the docs Show archive.org snapshot .
  • It does not bring styles for prev/next links etc, so you need to style controls yourself (which I consider to be a good thing).
  • The script does apply CSS styling (width/height) to the slides to make sliding in/out work. If you run into issues because of this, try setting the responsive option to true (you probably want it anyway). It makes slides be as wide as their container.

You may want to use this CoffeeScript to start with:

$(".slider--contents").sudoSlider
  auto: true # maybe turn this off when debugging your slider's CSS
  continuous: true
  responsive: true # required for the slides to take up their place in the container element
  autoHeight: false
  autoWidth: false
  touch: true

  # animation
  pause: 4000
  resumePause: 4000 # Continue after the user interacted with the slider

  # controls
  prevNext: false # we bring our own
  customLink: '.slider--pager' # we have 2 of those, and they specify a "data-target" for SudoSlider (see docs)
Posted by Arne Hartherz to makandra dev (2014-07-02 10:24)