Как сделать логотип css слайдер?

Question

Я попытался сделать слайдер с использованием карусели совы. Но карусель не появляется.

Я хочу, чтобы мой карусельного выглядеть следующим образом:

Мой HTML является:

<div class="owl-carousel"> 
     <div class="item"><img src="resources/img/c-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/h-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/a-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/am_logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/le-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/pan-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/i-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/b-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/s-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/so-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/ep-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/d-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/br-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/ap-logo.png" alt="Owl Image"></div> 
     <div class="item"><img src="resources/img/in-logo.png" alt="Owl Image"></div> 
    </div> 

Мой КСС:

.owl-carousel .item{ 
    margin: 3px; 
} 

.owl-carousel .item img{ 
    display: block; 
    width: 100%; 
    height: auto; 
} 

и в моем HTML я включил скрипт:

<script> 


$(document).ready(function() { 

    $(".owl-carousel").owlCarousel({ 

     autoPlay: 3000, //Set AutoPlay to 3 seconds 

     items : 4, 
     itemsDesktop : [1199,3], 
     itemsDesktopSmall : [979,3] 

    }); 

}); 


</script> 

я включала:

<script src="vendors/js/owl.carousel.js"></script> 
<link rel="stylesheet" href="vendors/css/owl.carousel.css" type="text/css"> 
<link rel="stylesheet" href="vendors/css/owl.theme.css" type="text/css"> 
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script> 

Как я могу сделать слайдер появиться? Или есть более простой способ добиться этого слайдера?

Answer 1

Вам необходимо включить файл карусельного филин после вы включили JQuery так:

<link rel="stylesheet" href="vendors/css/owl.carousel.css" type="text/css"> 
<link rel="stylesheet" href="vendors/css/owl.theme.css" type="text/css"> 
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script> 
<script src="vendors/js/owl.carousel.js"></script>