Posted over 6 years ago. Visible to the public. Linked content.

SudoSlider: a jQuery slider

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

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

Check out the demos.

Please note:

  • There is a ton to configure. Check the demos and read the docs.
  • 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:

Copy
$(".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)

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Arne Hartherz
Last edit:
over 6 years ago
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more