Grid Column Carousel – Scrollable & scalable carousel for your grid system

Welcome to the fantastic world of scrollable columns for your favorite responsive grid system!

Grid Column Carousel is a wonderful plugin that allows you to scroll columns which scale up and down together with the responsive grid you are using. The magic happens when your grid system hits the breakpoints and changes the amount of columns you have per page then Grid Column Carousel automatically changes the number of columns per slide. As simple as that!

Grid Column Carousel is a very simple way to create a grid carousel for Bootstrap, Foundation or whatever responsive framework you are using. There are just two key classes that you must use in order to have a working carousel.

Let’s have a look how it can be implement. The following example uses Bootstrap framework.

The HTML markup

<div class="grid-column-carousel row">
      <ul class="grid-column-carousel__list">
        <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <h3>1 This is a column with a lot of text in</h3>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <h3>2 This is a column with a lot of text in</h3>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <h3>3 This is a column with a lot of text in</h3>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <h3>4 This is a column with a lot of text in</h3>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <h3>5 This is a column with a lot of text in</h3>
        </li>
        <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <h3>6 This is a column with a lot of text in</h3>
        </li>
      </ul>
      <div class="grid-column-carousel__page-indicators">
        <ul>
            <li class="dot active"></li>
        </ul>
      </div>
    </div>

As you may notice in the example above, there are .grid-column-carousel for the main div element and .grid-column-carousel__list for the ul one.

If you want to have slide indicators, you should include .grid-column-carousel__page-indicators class with .dot .active classes for the li element.

Triggering the carousel is done with a little script:

<!-- Include the script--<
    <script src="js/GridColumnCarousel.js"></script>
    
    <!-- initialize the carousel -->
    <script>
      window.onload = function() {
        var options = {
          elem: document.getElementsByClassName('grid-column-slider')[0],
          gridColClasses: 'col-xs-12 col-sm-6 col-md-4 col-lg-3'
        };
         
        var gCCarousel = new GCCarousel(options);      
      };
    </script>

The Grid Column Carousel is written in pure JavaScript which means that it does not depend on any library such as jQuery, Underscore or whatever. Just use your framework grid and create a carousel with your content.

See the demo to get the idea and download the plugin to try it out yourself.

DEMO Download Grid Column Carousel