Question

目标

我一直试图将slick.js整合到我的网站中。

我尝试了什么？

我已经收录了一些内容。

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

详细照片

我希望它看起来像这样。

enter image description here

但事实证明是这样的。

enter image description here

问题

我做了一些我不想做的事吗？

Edit

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

Answer 1

来自slick.js usage docs：

在你的＆lt;中添加slick.css头＆gt;

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

如何正确地将slick.js整合到您的网站中？

1 个答案: