0

GOAL

I've been trying to integrate slick.js into my site.

What have I tried ?

I've included 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>

Detail Photo

I want it to look like this.

enter image description here

But it turn out to be like this.

enter image description here

Question

  • Did I do anything that I am not suppose to ?

Edit

  • Why slick.js screw up the height of my div ?
  • Is there a way to adjust that back somewhere ?
iori
  • 3,236
  • 12
  • 43
  • 78

1 Answers1

1

From the slick.js usage docs:

Add slick.css in your < head >

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
Catalin MUNTEANU
  • 5,618
  • 2
  • 35
  • 43
  • Thanks. I got it now, but my height of the div is screw up. Do you why it does that ? Is there a way to adjust it ? Check out this [image](https://dl.dropboxusercontent.com/u/56134944/Capture.JPG) – iori Dec 09 '14 at 21:05
  • You'll have to set a minimum height to all your items in carousel. There's nothing else you can do in this case. – Catalin MUNTEANU Dec 09 '14 at 21:06
  • `set a minimum height` - ok. which file is it ? slick.css ? – iori Dec 09 '14 at 21:08
  • You have multiple divs with different content. It's normal that each element has a different height. Set the height of all these elements to the height of the highest one. You can do this in any CSS file except the ones that belong to a 3rd party library. – Catalin MUNTEANU Dec 09 '14 at 21:10
  • Even if I have multiple divs, but the contents in them is very similar. I think `slick.js` did something to it, this is what it's look [like](https://dl.dropboxusercontent.com/u/56134944/line.JPG) - if I am not integrate with slick.js – iori Dec 09 '14 at 21:26
  • it looks like it's moving the captions of the divs to the upper right, not adjusting the height (i.e. how "parkinsons" is below the image but "mapk" is to the right). Hard to know what's going on without seeing the code "in action" as it were. Maybe add a clearing div after the image and see what that does. `
    description of image` [more info on clearing divs: http://stackoverflow.com/questions/8554043/what-is-clearfix]     – JSilv Dec 09 '14 at 21:53