Flickity test for shoppable gallery - Breakers

by Jayson Buquia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>
<div class="carousels">
    
    <div class="gallery pics">
    <div class="item"><img src="http://www.lorempixel.com/300/185/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/180/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/182/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/180/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/183/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/187/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/180/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/185/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/180/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/184/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/180/nature" alt=""></div>
    <div class="item"><img src="http://www.lorempixel.com/300/183/nature" alt=""></div>
</div>
        
        <div class="gallery text">
           <div class="item">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt architecto fugit adipisci provident reiciendis qui blanditiis ex minus error in eveniet maxime maiores eligendi excepturi non minima nemo id officia.</p>
           </div>
           <div class="item">
               <p>Illo iste aut fugit autem tempore aliquid repellendus reprehenderit sequi cupiditate maiores inventore atque sapiente similique saepe vitae cumque rerum in voluptate ut eligendi cum sint eveniet minus deleniti laborum.</p>
           </div>
           <div class="item">
           ...

SCSS

* {
    padding: 0;
    margin: 0;    
}

.gallery {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.item {    
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    
    img {
        width: 20%;
        opacity: 0.2;        
    }
    
    p {
        width: 80%;
        display: block;
        margin: auto;
        padding: 2em 0;
    }
}

JavaScript

var $p = $('.pics'), // pics gallery
    $t = $('.text'); // text gallery

// upon loading of images
$p.imagesLoaded(function(){
    
    // initialize pics gallery
    $p.flickity({
        wrapAround: true,
        cellAlign: 'center',
        cellSelector: '.pics .item',
        // slower slide speed
        selectedAttraction: 0.012,
    });   
    
    // initialize text gallery
    $t.flickity({
        wrapAround: true,
        cellAlign: 'center',
        cellSelector: '.text .item',
        pageDots: false,
        prevNextButtons: false,
        // faster slide speed
        selectedAttraction: 0.1,
        friction: 0.5
    });
    
    // hold text gallery flickity data
    var $f = $t.data('flickity');
    
    // 1. get the selected index fr. $t
    // 2. slide $p to this index
    $t.on('cellSelect',function(e){
        var selectedIndex = $f.selectedIndex;        
        $p.flickity('select',selectedIndex);
    })
});