Suraido

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

Javascript

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

     
 <script>

  $('.suraido-container').suraido({
    "fluid": true,
    "enableKeys": true,
    "enableDots": true,
    "enableArrows": true,
    "autoplay": false 
  })
 </script>

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.

Usage

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;
    }
  }
}

       
  <script>
    $('.custom-slider').suraido({
      paginationClass: 'pages',
      paginationItemClass: 'page',
      arrowsClass: 'nav',
      arrowClass: 'nav-item'
    });
  </script>

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.

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

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

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

//Dots
$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;

//Arrows
$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;

//Caption
$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;

Search for documentation