OFRAG Frontend Components Library v0.0.0

Detail Slider: Only Images 

<div class="detail-slider">
    <div class="detail-slider__container">
        <div class="detail-slider__top-slider">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="image ">
                            <picture>
                                <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                            </picture>
                        </div>

                    </div>
                    <div class="swiper-slide">
                        <div class="image ">
                            <picture>
                                <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                            </picture>
                        </div>

                    </div>
                    <div class="swiper-slide">
                        <div class="image ">
                            <picture>
                                <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                            </picture>
                        </div>

                    </div>
                    <div class="swiper-slide">
                        <div class="image ">
                            <picture>
                                <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                            </picture>
                        </div>

                    </div>
                    <div class="swiper-slide">
                        <div class="image ">
                            <picture>
                                <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                            </picture>
                        </div>

                    </div>
                    <div class="swiper-slide">
                        <div class="image ">
                            <picture>
                                <img src="/example-assets/images/detail-slider/image.jpg" class="image__img detail-slider__top-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/image.jpg 1x, /example-assets/images/detail-slider/image.jpg 2x" onload="this.classList.remove('is-loading')" />
                            </picture>
                        </div>

                    </div>
                </div>
            </div>
            <div class="detail-slider__top-slider-next"></div>
            <div class="detail-slider__top-slider-prev"></div>
        </div>
        <div class="detail-slider__bottom-slider">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="detail-slider__bottom-slider-image-container">
                            <div class="image ">
                                <picture>
                                    <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                </picture>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="detail-slider__bottom-slider-image-container">
                            <div class="image ">
                                <picture>
                                    <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                </picture>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="detail-slider__bottom-slider-image-container">
                            <div class="image ">
                                <picture>
                                    <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                </picture>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="detail-slider__bottom-slider-image-container">
                            <div class="image ">
                                <picture>
                                    <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                </picture>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="detail-slider__bottom-slider-image-container">
                            <div class="image ">
                                <picture>
                                    <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                </picture>
                            </div>

                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="detail-slider__bottom-slider-image-container">
                            <div class="image ">
                                <picture>
                                    <img src="/example-assets/images/detail-slider/thumb.png" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" srcset="/example-assets/images/detail-slider/thumb.png 1x, /example-assets/images/detail-slider/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                </picture>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-slider__bottom-slider-next"></div>
            <div class="detail-slider__bottom-slider-prev"></div>
        </div>
        <div class="detail-slider__meta">
            <div class="detail-slider__meta-left">6 Bilder</div>
        </div>
    </div>
</div>
 
{% include '@SharedComponents/modules/b2b-product-detail/components/detail-slider/detail-slider.twig' %}
 
{
  "labels": {
    "amountOfImages": "6 Bilder"
  },
  "items": [
    {
      "thumbnail": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/thumb.png",
        "src2x": "/example-assets/images/detail-slider/thumb.png"
      },
      "image": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/image.jpg",
        "src2x": "/example-assets/images/detail-slider/image.jpg"
      }
    },
    {
      "thumbnail": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/thumb.png",
        "src2x": "/example-assets/images/detail-slider/thumb.png"
      },
      "image": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/image.jpg",
        "src2x": "/example-assets/images/detail-slider/image.jpg"
      }
    },
    {
      "thumbnail": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/thumb.png",
        "src2x": "/example-assets/images/detail-slider/thumb.png"
      },
      "image": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/image.jpg",
        "src2x": "/example-assets/images/detail-slider/image.jpg"
      }
    },
    {
      "thumbnail": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/thumb.png",
        "src2x": "/example-assets/images/detail-slider/thumb.png"
      },
      "image": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/image.jpg",
        "src2x": "/example-assets/images/detail-slider/image.jpg"
      }
    },
    {
      "thumbnail": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/thumb.png",
        "src2x": "/example-assets/images/detail-slider/thumb.png"
      },
      "image": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/image.jpg",
        "src2x": "/example-assets/images/detail-slider/image.jpg"
      }
    },
    {
      "thumbnail": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/thumb.png",
        "src2x": "/example-assets/images/detail-slider/thumb.png"
      },
      "image": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/image.jpg",
        "src2x": "/example-assets/images/detail-slider/image.jpg"
      }
    }
  ]
}
  • Content: 
    import './detail-slider.scss';
import DetailSlider, {selector as sel} from 'cando-cx-components-library/components/modules/b2b-product-detail/components/detail-slider/detail-slider';

export default DetailSlider;
export const selector = sel;
  • URL: /components/raw/detail-slider/detail-slider.js
  • Filesystem Path: src/components/modules/b2b-product-detail/components/detail-slider/detail-slider.js
  • Size: 241 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-product-detail/components/detail-slider/detail-slider";
  • URL: /components/raw/detail-slider/detail-slider.scss
  • Filesystem Path: src/components/modules/b2b-product-detail/components/detail-slider/detail-slider.scss
  • Size: 140 Bytes

No notes defined.