Skip to content

Instantly share code, notes, and snippets.

@kbytin

kbytin/loryWithThumbs

Last active December 21, 2016 23:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kbytin/a19324c30d9fb4612420a7a7f99a1b5a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kbytin/a19324c30d9fb4612420a7a7f99a1b5a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Kirill renamed this gist Dec 21, 2016. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → loryWithThumbs
    View file
    File renamed without changes.
  2. Kirill created this gist Dec 21, 2016.
    50 changes: 50 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    import {lory} from 'lory.js';

    document.addEventListener('DOMContentLoaded', () => {
    const productSlider = document.querySelector('.product-page-slider');
    const productSliderCount = productSlider.querySelectorAll('.slide').length;
    const productNavContainer = productSlider.querySelector('.product-page-slider__nav');
    const productNavItem = document.createElement('li')
    const productNavItemInner = document.createElement('div')

    function handleSliderNav(e) {
    if (e.type === 'before.lory.init') {
    for (let i = 0; i < productSliderCount; i++) {
    let clone = productNavItem.cloneNode();

    let backgroundImg = productSlider.querySelector('.js_slides').children[i].style.backgroundImage;

    let cloneInner = productNavItemInner.cloneNode();
    cloneInner.style.backgroundImage = backgroundImg;
    clone.appendChild(cloneInner);
    productNavContainer.appendChild(clone);
    }

    productNavContainer.childNodes[0].classList.add('is-active');
    }

    if (e.type === 'after.lory.init') {
    for (let i = 0; i < productSliderCount; i++) {
    productNavContainer.childNodes[i].addEventListener('click', function(e){
    renderProductSlider.slideTo(Array.prototype.indexOf.call(productNavContainer.childNodes, e.target));
    });
    }
    }

    if (e.type === 'after.lory.slide') {
    for (let i = 0; i < productSliderCount; i++) {
    productNavContainer.childNodes[i].classList.remove('is-active');
    }
    productNavContainer.childNodes[e.detail.currentSlide - 1].classList.add('is-active');
    }
    }

    productSlider.addEventListener('before.lory.init', handleSliderNav);
    productSlider.addEventListener('after.lory.init', handleSliderNav);
    productSlider.addEventListener('after.lory.slide', handleSliderNav);

    const renderProductSlider = lory(productSlider, {
    enableMouseEvents: true,
    infinite: true,
    });
    });