Как правильно интегрировать slick.js на свой сайт?

Question

ЗАДАЧА

Я пытался интегрировать slick.js в мой сайт.

---

Что я пробовал?

Я включил eveything.

<script src="/assets/js/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 


    <script type="text/javascript" src="/slick/slick.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 


    $('.slick').slick({ 
     slidesToShow: 5, 
     slidesToScroll: 5 
    }); 


     }) 
    </script> 

HTML

<!-- Styles --> 
    <link href="/brave/css/owl.carousel.css" rel="stylesheet"> 
    <link href="/brave/css/styles/ecommerce.css" rel="stylesheet"> 
    <link href="/brave/css/styles/style.css" rel="stylesheet"> 
    <link href="/brave/css/styles/skin-lblue.css" rel="stylesheet" id="color_theme"> 
    <link href="/brave/css/custom.css" rel="stylesheet"> 

    <style type="text/css"> 
     .imgbox{ 

      border-radius:5px; 
      width:200px; 
      height:150px; 
      display: table-cell; vertical-align: middle; 

     } 
    </style> 

    <!-- Outer Starts --> 
    <div class="outer"> 
     <!-- Main content starts --> 
     <div class="main-block"> 

      <!-- Shopping Items --> 
      <div class="ecommerce"> 

       <!-- Shopping items content --> 
       <div class="shopping-content"> 
        <!-- Block Title --> 
        @foreach (MarketingMaterialCategory::orderBy('order','asc')->get() as $mmc) 
        <h2 class=" title lighter"></i>&nbsp; {{{ $mmc->name or '' }}} &nbsp;<small> </small></h2> 
        <div class="row slick "> 
         @foreach (MarketingMaterial::where('marketing_materials_category_id','=', $mmc->id)->get() as $marketing_material) 
         <div class="col-md-2 " > 
          <!-- Shopping items --> 
          <div class="shopping-item"> 
           <!-- Image --> 
           <div class="col-sm-12 imgbox" > 
            <!-- <span class="col-sm-6"></span> --> 
            <a href="#"><img class="col-sm-12 pull-right" width="200" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" /></a> 
           </div> 
           <!-- Shopping item name/Heading --> 
           <h6><a href="#">{{{ $marketing_material->title or '' }}}</a><span class="color pull-right">{{ FileHelper::formatBytes($marketing_material->media_size,0) }}</span></h6> 
           {{ $marketing_material->description or '' }} 
           <!-- Shopping item hover block & link --> 
           <div class="item-hover bg-color hidden-xs"> 
            <a href="/marketing_materials/{{$marketing_material->id}}/download/media_path" >Download</a> 
           </div> 
          </div> 
         </div> 
         @endforeach 
        </div> 
        <hr> 
        @endforeach 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

---

Подробный фото

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

Но оказаться, как это.

---

Вопрос

• ли я сделать что-нибудь, что я не думаю, чтобы?

---

Edit

• Почему slick.js завинтить высоту моего DIV?
• Есть ли способ отрегулировать это где-то?

Answer 1

От slick.js usage docs:

Добавить slick.css в вашей голове <>

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>