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.

Related post:  vTicker - A jQuery plug-in that adds scrolling vertical tickers to your site

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


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

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close