Suraido is a simple, yet powerful touch-enabled slider for small devices.

  • Posasda Villa de la Aldea, San Miguel de Allende, México.

  • San Miguel de Allende Nightlife

  • La Plaza Principal, San Miguel de Allende.

  • San Miguel de Allende Cathedral.

  • Rosewood Hotel, San Miguel de Allende.

Setup Suraido

The HTML setup is pretty straightforward and Suraido takes all the hard work for you. You just need a div container with a suraido data attribute. You can easily add images, captions and pagination. Here is the markup for you to try.

  <div class="suraido-container" data-suraido>
<li style="background:url(/assets/img/1.jpg)">
<div class="caption">
<p>Posasda Villa de la Aldea, San Miguel de Allende, México.</p>
<li style="background:url(/assets/img/2.jpg)">
<div class="caption">
<p>San Miguel de Allende Nightlife</p>
<li style="background:url(/assets/img/3.jpg)">
<div class="caption">
<p>La Plaza Principal, San Miguel de Allende.</p>
<li style="background:url(/assets/img/4.jpg)">
<div class="caption">
<p>San Miguel de Allende Cathedral.</p>
<li style="background:url(/assets/img/5.jpg)">
<div class="caption">
<p>Rosewood Hotel, San Miguel de Allende.</p>

In case you are wondering how would you make a call to suraido via Javascript.


"fluid": true,
"enableKeys": true,
"enableDots": true,
"enableArrows": true,
"autoplay": false

Plugin usage

We don't currently provide customization through data attributes, we will in the near future, don't worry. In the mean time we provide the options you can send via javascript with its values.


You can invoke suraido via javascript with many options.

Name Type Default Description
speed integer 500 The speed at which the images transition takes, this means 500 miliseconds.
delay integer 3000 The time it takes from one slide to past to the next, this applies when autoplay is enabled.
loop boolean false Loops through all of the suraido sliding elements.
enableKeys boolean true Enable keys to move between the slider elements.
enableDots boolean true Enables pagination for the slider.
enableArrows boolean true Enable arows for navigation.
prev string « The arrows to display on the slider previous control.
next string » The arrows to display on the slider next control.
autoplay boolean false Autplays the slider as a the document loads.
paginationClass string pagination The class for the pagination in the slider. Use for further customization.
paginationItemClass string dot The class name for each element on the pagination.
arrowsClass string arrows The arrows class name wrapper.
arrowClass string arrow The class name for the arrows on the arrows wrapper.

Creating your slider

We provide some useful mixins for you to creare your own slider with minimal customization, just a sip of javascript and a bit of css.

.custom-slider {
  @include slider-base;

  .caption {
    @include slider-caption;

  .pages {
    @include slider-pagination;

    .page {
      @include slider-pagination-dot;

  .nav {
    @include slider-arrows;

    .nav-item {
      @include slider-arrow;
paginationClass: 'pages',
paginationItemClass: 'page',
arrowsClass: 'nav',
arrowClass: 'nav-item'

Extending your sliders

Is fairly easy to create your own sliders, simply by including the mixins and set the correct configuration on the JS plugin. For a more advance customization, check the sass source file.

Availabale sass variables

You can customize the default suraido variables to meet your needs.

$suraido-slider-min-height: 330px !default;

$suraido-item-min-height: 25rem !default;

$suraido-pagination-position: 0 !default;
$suraido-list-width: 300% !default;
$suraido-list-item-width: 33% !default;
$suraido-pagination-z-index: 20 !default;

$suraido-dot-size: 0.71428571rem !default;
$suraido-dot-separation: 0.28571429rem !default;
$suraido-dot-border-width: 0.14285714rem !default;
$suraido-dot-border-style: solid !default;
$suraido-dot-border-color: #CCC !default;
$suraido-dot-radius: 0.42857143rem !default;
$suraido-dot-opacity: 0.4 !default;
$suraido-include-dot-transition: true !default;
$suraido-dot-transition: background 0.5s, opacity 0.5s !default;
$suraido-dot-active-background-color: #444 !default;
$suraido-dot-active-opacity: 1 !default;
$suraido-dot-background: #CCC;

$suraido-arrows-color: #FFF !default;
$suraido-arrows-z-index: $suraido-pagination-z-index - 10 !default;
$suraido-arrow-height: 60px !default;
$suraido-arrow-line-height: $suraido-arrow-height !default;
$suraido-next-arrow-padding: 15px !default;
$suraido-prev-arrow-padding: 15px !default;

$suraido-caption-font-size: 14px !default;
$suraido-caption-bottom-position: 30px !default;
$suraido-caption-height: 50px !default;
$suraido-caption-color: #FFF !default;
$suraido-caption-font-weight: lighter !default;
$suraido-caption-padding-top: 10px !default;
$suraido-caption-padding-left: 10px !default;
$suraido-caption-background: #000 !default;
$suraido-caption-background-alpha: 0.5 !default;