Anonymous Anonymous - 7 months ago
742 0

No description

HTML

carousel test

<html>
  <head>
    <base href="/">
    <title>Carousel test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="C:\Users\johan\Documents\sandbox\slick\slick.js"></script>

  </head>
  <style>

    .container-fluid { max-width: 960px; }
    .big, .small { height: 200px; box-sizing: border-box; padding: 10px; float: left; }
    .big {
        width: 70% !important;
        background: pink;
        background-image: url(http://placehold.it/350x150);
        background-size: cover;
        background-position: center;
    }
    .small {
        width: 30% !important;
        background: blue;
        background-image: url(http://placehold.it/150x150);
        background-size: cover;
        background-position: center;
    }
    @media (max-width: 600px) {
        .big, .small {
            width: 100% !important;
        }
    }

  </style>
  <body>
      <div class="container-fluid">
          <div class="carousel">

            <div class="big">
                stuff 1
            </div>
            <div class="small">
                stuff 2
            </div>
            <div class="small">
                stuff 3
                </div>
            <div class="big">
                stuff 4
            </div>
        </div>
      </div>

      <script>
      
      $(document).ready(function(){
          $('.carousel').slick({
                dots: true,
                slidesPerRow: 2,
                rows: 2,
                
                responsive: [
 
                    {
                        breakpoint: 600,
                        settings: {
                            slidesPerRow: 1,
                            rows: 1,
                        }
                    }
                ]
          });
      });

      </script>
  </body>
</html>