javascript - 如何正确地将 slick.js 集成到您的站点中？

Question

GOAL

我一直在尝试将 slick.js 集成到我的网站中。

---

What have I tried ?

我已经包含了所有内容。

    <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>

---

详细照片

我希望它看起来像这样。

结果却变成了这个样子。

---

Question

• 我有没有做过我不该做的事？

---

编辑

• 为什么 slick.js 搞砸了我的 div 的高度？
• 有没有办法在某处调整回来？

Answer 1

来自 slick.js usage docs :

Add slick.css in your < head >

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