---
description: >-
  https://stackoverflow.com/questions/22545466/how-can-i-create-a-carousel-with-multiple-rows
---

# How can I create a carousel slick with multiple rows? (ok)

{% file src="https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYjAG13rAPdbArSfRyB%2F-LuZk0Rh6BzwTqn_gfBb%2F-LuZkqU0AY5p72LbCjxu%2Fslick-1.8.1.rar?alt=media&token=79b3f14f-d5fe-4e6c-9bf9-f3bee6f789e2" %}

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYjAG13rAPdbArSfRyB%2F-LuZk0Rh6BzwTqn_gfBb%2F-LuZl27kbKr6hJxohYSY%2FDemo1.png?alt=media\&token=5e61a1fc-33de-4554-8e00-49bd49b9b813)

```
<!DOCTYPE html>
<html>

<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
  html, body {
    margin: 0;
    padding: 0;
  }
  * {
    box-sizing: border-box;
  }
  .slider {
    width: 50%;
    margin: 100px auto;
  }
  .slick-slide {
    margin: 0px;
  }
  .slick-slide img {
    width: 100%;
  }
  .slick-prev:before,
  .slick-next:before {
    color: black;
  }
  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
  }
  .slick-active {
    opacity: .5;
  }
  .slick-current {
    opacity: 1;
  }
  .grandchild {
    float: left;
    padding: 15px;
  }
  .clearboth:after {
    content: "";
    display: table;
    clear: both;
  }
  </style>
</head>

<body>
  <div class="slider">
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=1">
    </div>
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=2">
    </div>
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=3">
    </div>
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=4">
    </div>
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=5">
    </div>
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=6">
    </div>
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=7">
    </div>
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=8">
    </div>
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=9">
    </div>
    <div class="grandchild clearboth">
      <img src="http://placehold.it/350x100?text=10">
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.slider').slick({
          dots: false,
          slidesPerRow: 4,
          rows: 2
      });
    });
  </script>
</body>

</html>
```
