<div class="slide-container" id="slider1_container">
  <div u="slides" class="slides">
    <div class="challenge" ng-repeat="c in sf" ng-click="goToC(c._id)">
      Content
    </div>
    <div class="challenge" ng-click="goToC(8)">
      Additional Content
    </div>
  </div>
  <span u="arrowleft" class="challenge-arrow-left" style="top: 20px; left: 2px;"></span>
  <span u="arrowright" class="challenge-arrow-right" style="top: 20px; right: 2px;"></span>
  <div id="challenge-navigation">
    <div u="navigator" class="challenge-nav-bullets">
        <div u="prototype"></div>
    </div>
  </div>
</div>

var jssor_1_options = {
      $AutoPlay: false,
      $SlideWidth: ($(window).width()-60)/2,
      $Cols: 2,
      $Loop: 0,
      $SlideSpacing: 20,
      $BulletNavigatorOptions: {
        $Class: $JssorBulletNavigator$,
        $ChanceToShow: 2,
        $AutoCenter: 1,
        $Steps: 2,
        $Rows: 1,
        $SpacingX: 7,
        $SpacingY: 7,
        $Orientation: 1
      },
      $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$,
        $ChanceToShow: 2,
        $AutoCenter: 2,
        $Steps: 2
      }
  };
  var jssor_slider1 = new $JssorSlider$('slider1_container', jssor_1_options);
  $('.challenge-arrow-right').css('left',$(window).width() - 17);
  $('#challenge-navigation').css({'width':$(window).width()});