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

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.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

DEMO Download Grid Column Carousel


This plugin is created by Anders Nysom. More info at: Grid Column Carousel


You may also like...

3 Responses

  1. Mark Harris says:

    This is awesome and works great so far implemented in a Bootstrap 3 site I’m developing. However it doesn’t work using Bootstrap 4 using the demo and the “col-xs-12 col-sm-6 col-md-4 col-lg-4” column class (all the content goes to one skinny column).

    Any idea on how to easily adopt this to work with version 4?

    Thanks!

    • designify says:

      Hello, Mark,

      I haven’t tested it on BS4 so I really cannot say. Can you send me link to the testing website? I will have a look. Use the form on the contact page if you don’t want to put it in a comment.

      Cheers,
      Petia

  2. Mark Harris says:

    Thank you Petia. Sending you a test link via your contact form now.

Leave a Reply

Your email address will not be published. Required fields are marked *