Flickity Test for responsive layout

by Jayson Buquia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<div class="gallery-container">
    <div class="flickity-gallery">
        <div class="gallery-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit repellendus consequuntur ex nostrum atque fuga veniam veritatis. Consectetur aspernatur corrupti assumenda quis veritatis nobis commodi voluptate dolore reiciendis necessitatibus?</div>
        <div class="gallery-item">Sint esse laborum voluptatum voluptatem aliquam reiciendis explicabo cum excepturi repellat eveniet nam recusandae ab molestias aperiam qui obcaecati quibusdam. Est sit excepturi repellendus eum tenetur possimus laudantium harum consectetur.</div>
        <div class="gallery-item">A porro ducimus in molestias deserunt quod eos sit dolores velit nam doloribus recusandae excepturi earum provident animi dignissimos aliquam quasi hic ut veniam distinctio tenetur impedit nihil ex magni.</div>
        <div class="gallery-item">Nihil eaque voluptas nesciunt quae itaque necessitatibus modi eos consectetur provident ipsa voluptates veniam ducimus. Dolorem rerum fugit quaerat quae sint esse reiciendis natus ab repellat. Hic omnis quod accusantium.</div>
        <div class="gallery-item">Nulla totam tenetur est molestias et accusamus atque placeat consequatur alias ipsa officia odio voluptatum. Eius eum distinctio ut eveniet corrupti. Voluptatum officiis ut facere repudiandae id harum reprehenderit nobis.</div>    
    </div>
    <div class="gallery-status"></div>
</div>

SCSS

.flickity-gallery {
    transition: all 0.5 ease;
    background-color: #eee;
    overflow: hidden !important;
}

.gallery-item {
    width: 50%;
    transition: all 0.5 ease;
}

@media (min-width: 500px) {
    .gallery-item {
        
    }
}

@media (min-width: 700px) {
    .gallery-item {
        
    }
}

JavaScript

var 
flickityData = null,
cellAlign    = null,
$w         = $(window),
$galleryStatus = $('.gallery-status'),
breakpoint = {
        narrow : 0,     // min width for mobile
        medium : 375,   // min width for tablet
        wide   : 768    // min width for desktop
    };

function updateCellAlignment() {
    var w = $w.width();  
    
    if ( w >= breakpoint.medium ) {
        cellAlign = 'left';             
    }
    else if ( w >= breakpoint.narrow ) {
        cellAlign = 'center';            
    }
    
};

function updateGalleryStatus() {    
      var cellNumber = flickityData.selectedIndex + 1;
      $galleryStatus.text( cellNumber + '/' + flickityData.cells.length );    
};

$('.flickity-gallery').imagesLoaded(function(){
    
    updateCellAlignment();
    
    $('.flickity-gallery').flickity({
        cellSelector: '.gallery-item',
        wrapAround: true,
        cellAlign: cellAlign,
        pageDots: false,
        prevNextButtons: false
    }).on('cellSelect',updateGalleryStatus);    
    
    flickityData = Flickity.data('.flickity-gallery'); 
    flickityData.selectedIndex = 0;
    updateGalleryStatus();
    
});

$w.resize(function(){
    if ( flickityData ) {
        updateCellAlignment();
        flickityData.options.cellAlign = cellAlign;        
    }
});