캐 러셀이 부트 스트랩에 응답하지 않습니다

Question

저는 비 부트 스트랩 플랫폼에서 완벽하게 작동하는 내 클라이언트를위한 캐 러셀을 빌드했지만 부트 스트랩에서 수행 한 것과 동일한 작업을 수행하여 비 부트 스트랩 플랫폼에서 수행하는 것처럼 반응이 멈추도록합니다. 제대로 작동하지 않는 js 문제가 있습니다. 여기

내 코드

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

업데이트 된 코드 : 나는 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> 

,666을 포함