### PUG

.product__carousel
    ul#light-slider
        li(data-thumb="./img/content/product-carousel.jpg")
            .product__carousel-img
                img(src="./img/content/product-carousel.jpg" alt='card-img')
        li(data-thumb="./img/content/product-carousel.jpg")
            .product__carousel-img
                img(src="./img/content/product-carousel.jpg" alt='card-img')
        li(data-thumb="./img/content/product-carousel.jpg")
            .product__carousel-img
                img(src="./img/content/product-carousel.jpg" alt='card-img')
        li(data-thumb="./img/content/product-carousel.jpg")
            .product__carousel-img
                img(src="./img/content/product-carousel.jpg" alt='card-img')
        li(data-thumb="./img/content/product-carousel.jpg")
            .product__carousel-img
                img(src="./img/content/product-carousel.jpg" alt='card-img')

### SASS

.product__carousel
  max-width: 570px
  margin-bottom: 70px

  .lSSlideWrapper
    margin-bottom: 30px

  .lSSlideOuter .lSPager.lSGallery li
    max-width: 155px
    //width: calc(100 / 3 * 1% - 40px) !important
    margin: 7px
    border-radius: 1px
    background: #FFF
    transition: box-shadow .2s

    &.active
      box-shadow: 0 0 0 5px $c-hover

    a
      display: flex
      justify-content: space-between
      align-items: center


### JS

const productCarousel = () => {
  if ($('.product').length) {
    $('.product #light-slider').lightSlider({
      gallery: true,
      item: 1,
      loop: true,
      thumbMargin: 30,
      thumbItem: 3
    });
  }
};