_variables.scss

//
// Slider
//

// slides alignment
$track-vertical-align: center !default; //=> choose: center, flex-start (top) or flex-end (bottom)

// slides alignment if all slides fit in the viewport
$track-no-slide-horizontal-align: center !default; //=> choose: center, flex-start (left) or flex-end (right)
$track-no-slide-vertical-align: $track-vertical-align !default; //=> choose: center, flex-start (top) or flex-end (bottom)

//
// Slides
//

// slide content alignment
$slide-horizontal-align: center !default; //=> choose: center, flex-start (left) or flex-end (right)
$slide-vertical-align: center !default; //=> choose: center, flex-start (top) or flex-end (bottom)

// slide dimensions and spacing
$slide-width: auto !default; // choose: auto or any width (in pixels or percentage of viewport)
$slide-max-width: 100% !default; // choose: none (allow any width), 100% (crop slides to fit viewport) or any other width
$slide-height: auto !default; // choose: auto or any height (in pixels)
$slide-margin: 0 !default; // space between 2 slides

// slide default text color
$slide-text-color: #ffffff !default;

// default slide background
$slide-background: transparent !default; //=> choose: transparent or any value

// when using data-background to set background images, the default slide background will be on top of the image
// set this option to use a different background in this case (like a default overlay color)
// you can also use $slide-background-overlay with a .slide-overlay in specific slides
$slide-data-background: transparent !default; //=> choose: transparent or any value

// background zoom when using data-zoom-background
$slide-data-background-transform-hover: scale(1.1) !default; //=> choose: none or any transform
$slide-data-background-transform-speed: 300ms !default;

// background for optional slide-overlay div
// this is meant to be placed in a content slider
$slide-background-overlay: rgba(0,0,0,.5) !default; //=> choose: transparent or any value

//
// Default slide image styles
//

// include the default slide image CSS?
$include-default-slide-image-styles: true !default;

// the image max height will determine the slider height
// if $slide-height is set to auto.
$slide-image-max-height: $slide-height !default; //=> choose: none or any value

@if ($slide-height == auto) {
    $slide-image-max-height: none !default; //=> choose: none or any value
}

// zoom the image on hover
$slide-image-transform-hover: scale(1.1) !default; //=> choose: none or any transform
$slide-image-transform-speed: 300ms !default;

// text align inside .slide-image
$slide-image-text-align: center !default; //=> choose: left, center, right

// image hover overlay styles
$slide-image-hoverlay-color: rgba(255,255,255,.8) !default;
$slide-image-hoverlay-background: rgba(0,0,0,.3) !default;
$slide-image-hoverlay-font-size: 30px !default;
$slide-image-hoverlay-fade-in-speed: 400ms !default;

// image caption styles
$slide-image-caption-color: #ffffff !default;
$slide-image-caption-background: rgba(0,0,0,.4) !default;
$slide-image-caption-font-size: 14px !default;
$slide-image-caption-padding: .8em !default;
$slide-image-caption-speed: 300ms !default; //=> slide up / down
$slide-image-single-line: true !default; //=> if true, long captions will be truncated

//
// Default arrow styles
//

// include the default arrow CSS?
$include-default-arrow-styles: true !default;

// should the arrows be placed over the slides
// or should we add padding to the slider to prevent the overlap?
$place-arrows-over-slides: true !default;

// hide the previous arrow when at the start of the slider
// and the next arrow when at the end of the slider?
$hide-arrows-at-end-of-track: true !default;

// arrow styles
$arrow-box-width: 30px !default;
$arrow-font-size: 30px !default;
$arrow-transition: width 300ms ease 400ms, background 300ms, color 300ms !default;

// normal colors
$arrow-box-background: rgba(0,0,0,.3) !default;
$arrow-color: #ffffff !default;

// hover colors
$arrow-box-background-hover: rgba(0,0,0,.6) !default;
$arrow-color-hover: #ffdd8a !default;

// end of track colors
$arrow-box-background-end: $arrow-box-background !default;
$arrow-color-end: #7e7e7e !default;