How to reduce side opacity

Question

This is the navigation gallery I'm working on sly on , and I need to reduce the opacity of the elements from the center on the sides of the screen, but I don’t know how to approach it, something like this : Also, as you see in the fragment, setting "itemNav : "forceCentered", for some reason it separates the beginning and end of the frames from the sides of the window too much when scrolling, it should look like this when scrolling to the side: a piece of code , since you can see that the elements bounce around.

jQuery(function($) {
  'use strict';

  // -------------------------------------------------------------
  //   Basic Navigation
  // -------------------------------------------------------------
  (function() {
    var $frame = $('#basic');
    var $slidee = $frame.children('ul').eq(0);
    var $wrap = $frame.parent();

    // Call Sly on frame
    $frame.sly({
      horizontal: 1,
      itemNav: 'forceCentered',
      smart: 1,
      activateMiddle: true,
      activateOn: 'click',
      mouseDragging: 1,
      touchDragging: 1,
      releaseSwing: 1,
      startAt: 3,
      scrollBar: $wrap.find('.scrollbar'),
      scrollBy: 1,
      pagesBar: $wrap.find('.pages'),
      activatePageOn: 'click',
      speed: 300,
      elasticBounds: 1,
      easing: 'easeOutExpo',
      dragHandle: 1,
      dynamicHandle: 1,
      clickBar: 1
    });
  }());
});

.wrap {
  position: relative;
 }
.frame {
  overflow: hidden;
}
.clearfix {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
li {
  float: left;
  width: 227px;
  height: 100%;
  margin: 0 1px 0 0;
  padding: 0;
  background: #333;
  color: #ddd;
  text-align: center;
  cursor: pointer;
  opacity: 0.7;
  font-size: 50px;
}
li.active {
  opacity: 1;
}

<div class="wrap">
  <div class="frame" id="basic">
    <ul class="clearfix">
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://darsa.in/sly/examples/js/vendor/plugins.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.6.1/sly.min.js"></script>

Run codeHide result

Answer 1

active.

, .

jQuery(function($) {
  'use strict';

  // -------------------------------------------------------------
  //   Basic Navigation
  // -------------------------------------------------------------
  (function() {
    var $frame = $('#basic');
    var $slidee = $frame.children('ul').eq(0);
    var $wrap = $frame.parent();

    // Call Sly on frame
    $frame.sly({
      horizontal: 1,
      itemNav: 'forceCentered',
      smart: 1,
      activateMiddle: true,
      activateOn: 'click',
      mouseDragging: 1,
      touchDragging: 1,
      releaseSwing: 1,
      startAt: 3,
      scrollBar: $wrap.find('.scrollbar'),
      scrollBy: 1,
      pagesBar: $wrap.find('.pages'),
      activatePageOn: 'click',
      speed: 300,
      elasticBounds: 1,
      easing: 'easeOutExpo',
      dragHandle: 1,
      dynamicHandle: 1,
      clickBar: 1
    });

    $frame.sly('on', 'active', active);
    active(null, 3);
    
    function active(e, idx) {
      $("#ul").find('li').removeClass();
      $("#ul").find('li').each(function(i, elem) {
        setOpacityClass(Math.abs(i - idx), elem);
        if (i == idx) {
          $(elem).addClass('active');
        }
      })
    }

    function setOpacityClass(grad, elem) {
      $(elem).addClass('op-' + grad);
    }

  }());
});

.wrap {
  position: relative;
}
.frame {
  overflow: hidden;
}
.clearfix {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
li {
  float: left;
  width: 227px;
  height: 100%;
  margin: 0 1px 0 0;
  padding: 0;
  background: #333;
  color: #ddd;
  text-align: center;
  cursor: pointer;
  opacity: 0.7;
  font-size: 50px;
}

li.active {
  opacity: 1;
}

li.op-0 {
  opacity: 1;
}
li.op-1 {
  opacity: 0.7;
}
li.op-2 {
  opacity: 0.5;
}
li.op-3 {
  opacity: 0.3;
}
li.op-4 {
  opacity: 0.2;
}
li.op-5 {
  opacity: 0.1;
}

<div class="wrap">
  <div class="frame" id="basic">
    <ul id="ul" class="clearfix">
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://darsa.in/sly/examples/js/vendor/plugins.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.6.1/sly.min.js"></script>

Hide result