jrSlider.html

<div class="jrSlider">
      <div class="jrSliderWrapper">
        <div class="first" data-bg="/assets/img/img_pacolobaton.jpg">
          <div class="caption">
            <div class="captionWrapper">
              <h2>Todo y Todos por encontrarlos</h2>  
              <p>La diferencia entre perderlos y encontrarlos radica en actuar a tiempo y todos a una, con todos los medios.</p>
              <p><a href="{{ path('pacolobaton') }}" class="btn">Conoce más</a></p>
            </div>
          </div>
        </div>
        <div class="second" data-bg="/assets/img/img_cruzroja.jpg">
          <div class="caption">
            <div class="captionWrapper">
              <p><span>familylinks.icrc.org</span>, el nuevo sitio de Cruz Roja para restablecer el contacto entre seres queridos.</p>
              <p><a href="http://familylinks.icrc.org" target="_blank" class="btn">Ir al sitio</a></p>
            </div>
          </div>
        </div>
        {# <div data-bg="http://placekitten.com/1200/800">
          <div class="caption">
            <div class="captionWrapper">
              <h2>Todo y Todos por encontrarlos</h2>  
              <p>La diferencia entre perderlos y encontrarlos radica en actuar a tiempo y todos a una, con todos los medios.</p>
              <p><a href="" class="btn">Conoce más</a></p>
            </div>
          </div>
        </div> #}
      </div>
    </div>

jrSlider.sass

.jrSlider
      +clearfix
      width: 100% !important
      height: 450px
      position: relative
      .jrSliderWrapper
        position: absolute
        +same(top,left,border,outline,0)
        +same(width,height, 100% !important)
        &>div
          background-size: cover
          background-position: 498px top
          +breakpoint($tablet)
            background-position: right top
          position: absolute
          overflow: hidden
          width: 100%
          +opacity(0)
          +same(width,height, 100%)
          +same(top,left,border,outline,0)
          +transition(1s)
          &.active
            +opacity(1)
            +transition(1s)
            z-index: 99
          &.second
            background-position: 600px top
            +breakpoint($tablet)
              background-position: center top
            &>.caption
              +breakpoint($desk)
                +span(4 of 12 at 1)
                float: none
                padding-top: 1em
                padding-bottom: 0
              .captionWrapper
                padding-top: 1em
                padding-bottom: 0
                h2,p
                  color: $white
                  font-size: 1.4em
                  +breakpoint($tablet)
                    font-size: 2em
                  span
                    font-size: 1.6em
                    font-weight: 700
                p>a
                  font-size: 1em
                  +breakpoint($tablet)
                    font-size: .6em
          &>.caption
            +span(12)
            display: table
            height: 100%
            padding: 5% 8%
            background-color: rgba($white,.4)
            +breakpoint($desk)
              +span(7 of 12)
            .captionWrapper
              display: table-cell
              vertical-align: middle
              .btn
                @extend .btn.inverted
              h2,p,p>a
                text-align: center
                +breakpoint($desk)
                  text-align: left
              h2
                color: $black
                font-size: 2.5em
                line-height: 1.2em
                +breakpoint($desk)
                  font-size: 3em
              p
                +ff($of)
                color: $black
                font-size: 1.3em
                line-height: 1.5em 
      .jrSliderNav
        .jrSliderNavRight,.jrSliderNavLeft
          width: 16px
          height: 16px
          border: solid $white
          border-width: 3px 3px 0 0
          +transform(rotate(45deg))
          margin: 8px 0 0 5px
          position: absolute
          top: 45%
          right: .5em
          z-index: 100
          cursor: pointer
          +breakpoint($tablet)
            width: 34px
            height: 34px
            border-width: 10px 10px 0 0
            right: 1em
        .jrSliderNavLeft
          +transform(rotate(-135deg))
          left: .5em
          +breakpoint($tablet)
            left: 1em
        .jrSliderNavBullets
          position: absolute
          z-index: 101
          bottom: 0
          left: 0
          right: 0
          text-align: center
          a
            cursor: pointer
            +box-shadow()
            +border-radius(50%)
            width: 12px
            height: 12px
            display: inline-block
            background-color: rgba($white,.5)
            margin: .5em
            border: 0 solid $black
            +transition(1s)
            &.active
              +transition(1s)
              border: 2px solid $white
        .jrSliderContinue
          cursor: pointer
          +same(height,width,40px)
          position: absolute
          +same(right,top,30px)
          margin: -10px 0 0 -10px
          display: block
          z-index: 100
          span
            +same(height,width,38px)
            display: block
            position: relative
            top: 0
            left: 0
            margin: 0
            text-indent: -9999px
            &:before,
            &:after 
              +transition(all 0.5s)  
              content: ''  
              +same(height,width,border-right-width,0px)
              +same(top,left,50%)
              display: block
              background: transparent
              border: 10px transparent solid
              border-left-color: #ffffff
              position: absolute
              margin: -10px 0 0 -5px
          &.active 
            position: absolute
            +same(height,width,40px)
            z-index: 101
            span:before,span:after
              content: ''
              border: 3px #ffffff solid
              border-top-width: 15px
              border-bottom-width: 0
              left: 37.5%
              +transform(rotate(360deg))
            span:after 
              left: 62.5%

jsSlider.js

if ($('.jrSlider').length){  
    jrSlider = {
      i: 1,
      sequence: null,
      jrSliderSequenceStop: function(){
        clearInterval(this.sequence);
      },
      jrSliderSequenceChange: function(){
        t=this;
        $('.jrSliderNavBullets a:nth-child('+ t.i +')').addClass('active').siblings().removeClass('active');
        $('.jrSliderWrapper > div:nth-child('+ t.i++ +')').addClass('active').siblings().removeClass('active');
        t.i = $('.jrSliderWrapper > div').length<t.i ? 1 : t.i;
        t.i = t.i<1 ? 1 : t.i;
      },
      jrSliderSequenceStart: function(){
        t = this;
        t.jrSliderSequenceChange();
        t.sequence = setInterval(function(){
          $('.jrSliderNavBullets a:nth-child('+ t.i +')').addClass('active').siblings().removeClass('active');
          t.jrSliderSequenceChange();
        }, 10000);
      },
      jrSliderContinue: function(){
        this.jrSliderSequenceStart();
      },
      jrSliderPause: function(){
        this.jrSliderSequenceStop();
      },
      jrSliderNav: function(){
        this.jrSliderSequenceStop();
        this.jrSliderSequenceStart();
      },
      jrSliderManual: function(t){
        this.i = t.hasClass('jrSliderNavLeft') ? this.i-- : this.i++;
        this.jrSliderNav();
      },
      jrSliderInit: function(){
        t = this;
        $('.jrSlider').append('<div class="jrSliderNav"> <div class="jrSliderContinue active"><span></span></div> <a class="jrSliderNavLeft"></a> <a class="jrSliderNavRight"></a> <div class="jrSliderNavBullets"></div> </div>');
        $('.jrSlider .jrSliderWrapper > div').each(function(index){
          $(this).css('background-image', 'url(' + $(this).attr('data-bg') + ')');
          $('.jrSliderNavBullets').append('<a class="'+ ++index +'"></a>');
        });
        $('.jrSliderNavBullets a').click(function(e){e.preventDefault();t.i=$(this).attr('class'); t.jrSliderSequenceChange(); $('.jrSliderNavBullets a:nth-child('+  +')').addClass('active');});
        $('.jrSliderNavLeft,.jrSliderNavRight').click(function(e){e.preventDefault();t.jrSliderManual($(this));})
        $('.jrSliderContinue').click(function(e){e.preventDefault();$(this).hasClass('active') ? t.jrSliderPause() : t.jrSliderContinue();$(this).toggleClass('active');});
        $('.jrSliderWrapper > div:nth-child(1)').addClass('active');
        $('.jrSliderWrapper > div').length>1 ?  t.jrSliderSequenceStart() : t.i = 1;
      }
    }
    jrSlider.jrSliderInit();
  }