Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ### 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
- });
- }
- };
Add Comment
Please, Sign In to add comment