Add, remove class on follow the button in carousel jQuery

Question

How to change this line from 100px to 100%?

.animate({marginLeft:-100*(parseInt(integer)-1)})

And how to add, remove class on to .pic li and .title a follow the button in the carousel

jsfiddle: http://jsfiddle.net/04dsr8wn/3/

$(document).ready(function() {

  $('.trig span').click(function() {
    var integer = $(this).attr('rel');
    $('.carousel-box .pic').animate({
      marginLeft: -100 * (parseInt(integer) - 1)
    })
    $('.trig span').each(function() {
      $(this).removeClass('on');
      if ($(this).hasClass('button' + integer)) {
        $(this).addClass('on')
      }
    });
  });
  Next();
  setInterval(function() {
    Next();
  }, 6000);
});

function Next() {
  var _next = false;
  $('.trig span').each(function() {
    if (_next) {
      $(this).addClass('on');
      _next = false;
    } else if ($(this).hasClass('on')) {
      _next = true;
      $(this).removeClass('on')
    }

  });
  if (_next)
    $(".trig span:eq(0)").addClass("on");

  var activeIndex = parseInt($(".on").attr("rel"));
  $('.carousel-box .pic').animate({
    marginLeft: -100 * (parseInt(activeIndex) - 1)
  });
}

.panel {
  width: 705px;
  overflow: hidden;
  position: relative;
  height: 80px;
  margin-bottom: 20px;
}

.panel .pic {
  width: 2820px;
  position: absolute;
  height: 80px;
}

.panel .scrollx {
  width: 705px;
  float: left;
  padding: 20px 0;
  font-size: 15px;
  font-style: italic;
  color: #b0b0b0;
  line-height: 20px;
  text-align: center;
}

.button1,
.button2,
.button3,
.button4 {
  background: #999;
  padding: 6px;
  display: block;
  float: left;
  margin-right: 5px;
}

.on {
  background: #111;
  padding: 6px;
  display: block;
  float: left;
  outline: none;
}

.clear {
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="carousel-box">
  <div class="panel">
    <ul class="pic">
      <li class="scrollx on">1 Lorem Dolor Ipsum...</li>
      <li class="scrollx">2 Lorem Dolor Ipsum...</li>
      <li class="scrollx">3 Lorem Dolor Ipsum...</li>
      <li class="scrollx">4 Lorem Ipsum Dolor sit amet ....</li>
    </ul>
    <ul class="title">
      <a href="#" class="on">title 1</a>
      <a href="#" class="">title 2</a>
      <a href="#" class="">title 3</a>
      <a href="#" class="">title 4</a>
    </ul>
  </div>

  <ul class="trig">
    <span class="button1 on" rel="1"></span>
    <span class="button2" rel="2"></span>
    <span class="button3" rel="3"></span>
    <span class="button4" rel="4"></span>
  </ul>
</div>

Answer 1

To your first question: You can convert to a string and add an % sign like so:

let w = -100*(parseInt(integer)-1);
$('.carousel-box .pic').animate({marginLeft:w+"%"})

To make your Next function work, change the code to the following:

$('.trig span').click(function(){
  let newPage = $(this).attr('rel');
  Next(newPage);
});
  Next();
  setInterval ( function(){Next();}, 6000 );
});

function Next(num){

    let maxPages = $(".trig span").length;
    let currPage = parseInt($(".trig span.on").attr("rel"));
    let nextPage = (num === undefined) ? currPage+1 : num;

    if(nextPage > maxPages)
        nextPage = 1;

    $('.pic li.on').removeClass("on");
    $('.title a.on').removeClass("on");
    $(".trig span.on").removeClass("on");

    $('.pic li').slice(nextPage-1, nextPage).addClass("on");
    $('.title a').slice(nextPage-1, nextPage).addClass("on");
    $('.trig span').slice(nextPage-1, nextPage).addClass("on");

    let w = -100*(parseInt(nextPage)-1);
    $('.carousel-box .pic').animate({marginLeft:w+'%'}); 
}