carousel is not responding on bootstrap

Question

I have build carousel for my clients which works perfect on non bootstrap platform but same thing i did on bootstrap to make it responsive it stop respond like was doing on non bootstrap platform. there is js issue which is not working properly.

Here is my code

var $clientcarousel = $('#clients-list');
var clients = $clientcarousel.children().length;
var clientwidth = (clients * 140); // 140px width for each client item 
$clientcarousel.css('width', clientwidth);

var rotating = true;
var clientspeed = 1800;
var seeclients = setInterval(rotateClients, clientspeed);

$(document).on({
  mouseenter: function() {
    rotating = false; // turn off rotation when hovering
  },
  mouseleave: function() {
    rotating = true;
  }
}, '#clients');

function rotateClients() {
  if (rotating != false) {
    var $first = $('#clients-list li:first');
    $first.animate({
      'margin-left': '-140px'
    }, 600, function() {
      $first.remove().css({
        'margin-left': '0px'
      });
      $('#clients-list li:last').after($first);
    });
  }
}
});

#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 200px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}

#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
  opacity: 0.65;
}

#clients .clients-wrap ul li img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div id="clients">
      <div class="clients-wrap">
        <ul id="clients-list" class="clearfix navbar">
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client01-cartoon-network.png" alt="Cartoon Network"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client02-rough-draft-studios.png" alt="Rough Draft Studios"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client03-spongebob-movie2.png" alt="SpongeBob Movie #2"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client04-apple-inc.png" alt="Apple Computers"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client05-google-talk.png" alt="Google chat talk"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client06-g4tv.png" alt="G4TV channel"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client07-wonka-candy.png" alt="Wonka Chocolates and Candy"></li>
        </ul>
      </div>
      <!-- @end .clients-wrap -->
    </div>
    <!-- @end #clients -->
  </div>

</div>

Answer 1

updated code:

i included jquery https://code.jquery.com/jquery-3.1.0.js

    <div class="container-fluid">
    <div class="row">
    <div class="col-12">


      <div id="clients">
        <div class="clients-wrap">
          <ul id="clients-list" class="clearfix navbar">
            <li class="nav-item"><img class="nav-link img-fluid" src="http://i.imgur.com/sqOrTvo.png" alt="Cartoon Network"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/Eu0IboI.png" alt="Rough Draft Studios"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/n0RJ0p3.png" alt="SpongeBob Movie #2"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/VdV6cWz.png" alt="Apple Computers"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/VdV6cWz.png" alt="Google chat talk"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/udZvHOB.png" alt="G4TV channel"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/EehPfDN.png" alt="Wonka Chocolates and Candy"></li>
          </ul>
        </div><!-- @end .clients-wrap -->
      </div><!-- @end #clients -->
    </div>
    </div>
    </div>



<script>
    var $clientcarousel = $('#clients-list');
    var clients = $clientcarousel.children().length;
    var clientwidth = (clients * 140); // 140px width for each client item 
    $clientcarousel.css('width', clientwidth);

    var rotating = true;
    var clientspeed = 1800;
    var seeclients = setInterval(rotateClients, clientspeed);

    $(document).on({
        mouseenter: function() {
            rotating = false; // turn off rotation when hovering
        },
        mouseleave: function() {
            rotating = true;
        }
    }, '#clients');

    function rotateClients() {
        if (rotating != false) {
            var $first = $('#clients-list li:first');
            $first.animate({
                'margin-left': '-140px'
            }, 600, function() {
                $first.remove().css({
                    'margin-left': '0px'
                });
                $('#clients-list li:last').after($first);
            });
        }
    }
</script>

updated fiddle link