Revolution-slider

Revolution-slider

SASS:
@import mixins
@import ../css/sprite
@import vars

$heading-font: Georgia,sans-serif
$excerpt-font: Arial,sans-serif
$heading-size: 22rem
$excerpt-size: 2rem
$heading-color: #fff
$excerpt-color: #fff

#main-slider
  &:hover .tparrows
    opacity: .7
  .style-1
    text-align: center
    h3.heading
      color: $heading-color
      font-size: $heading-size
      +m(768)
        font-size: 14rem
      +m(480)
        font-size: 10rem
      position: relative
      display: block
      font-family: $heading-font
      font-weight: 100
      +capitalize
    p.excerpt
      color: $excerpt-color
      font-family: $heading-font
      font-size: $excerpt-size
      position: relative
      font-weight: 100
      margin-bottom: 40px
      +m(768)
        margin-top: 30px
      +m(480)
        font-size: 2rem
        left: 0
        margin-top: 50px
    //PROGRESS
  .tp-bannertimer
    height: 7px
    background: rgba(0,0,0,.24)
    //NAVIGATION
  .tparrows
    background: rgba(255,255,255,.3)
    width: 36px
    height: 36px
    box-sizing: content-box
    padding: 4px
    +br(24px)
    position: relative
    opacity: 0
    transition: opacity .3s ease
    z-index: 1
    +m(768)
      display: none
    &:hover
      opacity: 1
  .tp-leftarrow
    position: relative
    left: 60px!important
  .tp-leftarrow::before
    content: ""
    @include sprite($slider-arrow-left)
  .tp-rightarrow
    position: relative
    right: 60px!important
  .tp-rightarrow:before
    content: ""
    @include sprite($slider-arrow-right)
  .tp-arr-imgholder
    display: none

//Opera-Mini
.opera-mini-slide
  width: 100%
  height: 349px
  +jpg(screen-slider-3)
  +cover
  text-align: center
  display: none;
  a.button
    position: relative
    top: 250px
    
JADE:
.opera-mini-slide
  a.button Shop now
#main-slider
  .fullwidthbanner-container
    .fullwidthbanner
      ul
        li(data-transition="random-premium" data-slotamount="7", data-bgposition="center center" )
          img(src="src/img/slide-1.jpg", alt="", data-bgposition="center center" data-kenburns="on" data-duration="20000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="140")
          .caption.style-1.lft(data-x="center" data-y="center" data-speed="700"  data-voffset="-50" data-start="1000" data-easing="easeOutBack")
            h3.heading Bikes
            p.excerpt Fast, slim, and very fun!
          .caption.lfb(data-x="center" data-y="center" data-speed="700" data-voffset="140" data-start="1300" data-easing="easeOutBack")
            a.button(href="google.com") find your bike
        li(data-transition="random-premium" data-slotamount="7")
          img(src="src/img/slide-2.jpg", alt="", data-bgposition="center center" data-kenburns="on" 
              data-duration="20000" 
              data-ease="Linear.easeNone" 
              data-bgfit="120" 
              data-bgfitend="100")
          .caption.style-1.lft(data-x="center" data-y="center" data-voffset="-50" data-speed="700" data-start="1000" data-easing="easeOutBack")
            h3.heading riding
            p.excerpt our bikes stronger <br> than you ever imagined
          .caption.lfb(data-x="center" data-y="center" data-voffset="140" data-speed="700" data-start="1300" data-easing="easeOutBack")
            a.button(href="google.com") find your bike
            
  JAVASCRIPT:
  //REVOLUTION-SLIDER
  $('.fullwidthbanner').revolution(
  {
    delay:59000,
    startheight:640,
    disableProgressBar: 'off',
    spinner: 'spinner1',
    hideThumbs:200,
    stopAfterLoops:0, 
    minHeight: 500,
    spinner: 'spinner1',
    hideThumbs:200,
    stopAfterLoops:0, 
    navigationType:"bullet",
    navigationArrows: "verticalCentered",
    navigationStyle:"preview1",
    shadow:1,
    fullWidth:"on",
  }
);