Jssor Slider (Working)

by fredd man

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdn.rawgit.com/jssor/slider/master/js/jssor.slider.min.js"></script>
<script src="https://cdn.rawgit.com/adebisi-fa/dang-jssor/master/demo/scripts/dang-jssor-0.0.3/dang-jssor.min.js"></script>

<body ng-app="demo1">
  <div class="container" style="margin-bottom: 15px; margin-top: 15px" ng-controller="MainController">
    <div class="slides-container" enable-jssor jssor-options="options" jssor-trigger="true" jssor-object="slide4" style="position: relative; top: 0px; left: 0px;  width: 600px; height: 300px;">
      <div class="slides" u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:600px;height:300px;overflow:hidden;">
        <div>
          
          
          <!-- DRAGABLE 3 -->
<!-- Draggable DIV -->
<div id="mydiv9">
  <div id="mydivheader9"> Click Aqui para mover </div>
  <script>
// Make the DIV element draggable:
dragElement(document.getElementById("mydiv9"));
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }
function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }
function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    //...

CSS

.arrows {
  position: absolute;
  cursor: pointer;
  display: block;
  font-size: 1.3em;
  overflow: hidden;
  text-align: center;
  width: 20px !important;
  height: 24px !important;
  background-color: #fff;
  color: #666D7C;
  border: 1px solid #dfe0e4;
  padding: 8px;
}

.jssora10ldn {
  background-position: -256px -39px;
}

.jssora10rdn {
  background-position: -316px -39px;
}

//slider side by side
.jssorb01 {
  position: absolute;
}

.jssorb01 div,
.jssorb01 div:hover,
.jssorb01 .av {
  position: absolute;
  /* size of bullet elment */
  width: 12px;
  height: 12px;
  filter: alpha(opacity=70);
  opacity: .7;
  overflow: hidden;
  cursor: pointer;
  border: #000 1px solid;
}

.jssorb01 div {
  background-color: gray;
}

.jssorb01 div:hover,
.jssorb01 .av:hover {
  background-color: #d3d3d3;
}

.jssorb01 .av {
  background-color: #fff;
}

.jssorb01 .dn,
.jssorb01 .dn:hover {
  background-color: #555555;
}

.jssora13l {
  background-position: -10px -35px;
}

.jssora13r {
  background-position: -70px -35px;
}

.jssora13l:hover {
  background-position: -130px -35px;
}

.jssora13r:hover {
  background-position: -190px -35px;
}

.jssora13l.jssora13ldn {
  background-position: -250px -35px;
}

.jssora13r.jssora13rdn {
  background-position: -310px -35px;
}

.jssora13l.jssora13lds {
  background-position: -10px -35px;
  opacity: .3;
  pointer-events: none;
}

.jssora13r.jssora13rds {
  background-position: -70px -35px;
  opacity: .3;
  pointer-events: none;
}

.slides div {
  width:400px;
}

.slides img {
  padding: 0 10px;
}








/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),...

JavaScript

angular.module("demo1", ["dang-jssor"])
  .controller("MainController", function($scope) {
    $scope.options = {
      $AutoPlay: false,
      $SlideWidth: 400,
      $Bullets: false,
      name: "sliderWithArrow",
      $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$,
        $ChanceToShow: 2
      }
    };
  });