OFRAG Frontend Components Library v0.0.0

Detail Slider: Images And Videos 

<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="detail-slider__top-slider-video">
                            <div class="video-player">
                                <div class="video-player__thumbnail-container" data-modal-id="video-modal-1634288260">
                                    <div class="image ">
                                        <picture>
                                            <img src="https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg" class="image__img video-player__thumbnail-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                        </picture>
                                    </div>

                                    <div class="video-player__thumbnail-play-button"></div>
                                </div>
                            </div>
                            <script type="text/html" class="modal__placeholder" id="video-modal-1634288260-placeholder">
                                <aside class="modal modal--slide" id="video-modal-1634288260" aria-hidden="true" data-modal>
                                    <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
                                        <div class="modal__container--medium" role="dialog" aria-modal="true" aria-labelledby="video-modal-1634288260-title">
                                            <div class="modal__container-inner">
                                                <header class="modal__header">
                                                    <h3 class="modal__title" id="video-modal-1634288260-title"></h3>
                                                    <div class="modal__close">
                                                        <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                                            <span class="visually-hidden"></span>
                                                        </button>
                                                    </div>
                                                </header>
                                                <main class="modal__content" id="video-modal-1634288260-content">

                                                    <div class="video-player">
                                                        <div class="video-player__youtube-container">
                                                            <iframe class="video-player__youtube" src="https://www.youtube.com/embed/X6OByqtMDIo?iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1&autoplay=1" allowfullscreen allowtransparency allow="autoplay; fullscreen"></iframe>
                                                        </div>
                                                    </div>

                                                </main>
                                            </div>
                                        </div>
                                    </div>
                                </aside>
                            </script>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="detail-slider__top-slider-video">
                            <div class="video-player">
                                <div class="video-player__thumbnail-container" data-modal-id="video-modal-1327877594">
                                    <div class="image ">
                                        <picture>
                                            <img src="/example-assets/images/video-player/poster.jpg" class="image__img video-player__thumbnail-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                        </picture>
                                    </div>

                                    <div class="video-player__thumbnail-play-button"></div>
                                </div>
                            </div>
                            <script type="text/html" class="modal__placeholder" id="video-modal-1327877594-placeholder">
                                <aside class="modal modal--slide" id="video-modal-1327877594" aria-hidden="true" data-modal>
                                    <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
                                        <div class="modal__container--medium" role="dialog" aria-modal="true" aria-labelledby="video-modal-1327877594-title">
                                            <div class="modal__container-inner">
                                                <header class="modal__header">
                                                    <h3 class="modal__title" id="video-modal-1327877594-title"></h3>
                                                    <div class="modal__close">
                                                        <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                                            <span class="visually-hidden"></span>
                                                        </button>
                                                    </div>
                                                </header>
                                                <main class="modal__content" id="video-modal-1327877594-content">

                                                    <div class="video-player">
                                                        <div class="video-player__video" data-plyr-provider="vimeo" data-plyr-embed-id="229479141" data-config="{'controls':true,'autoplay':true,'muted':true,'loop':{'active':false},'vimeo':{'muted':true,'background':true,'transparent':true}}"></div>
                                                    </div>

                                                </main>
                                            </div>
                                        </div>
                                    </div>
                                </aside>
                            </script>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="detail-slider__top-slider-video">
                            <div class="video-player">
                                <div class="video-player__thumbnail-container" data-modal-id="video-modal-931187041">
                                    <div class="image ">
                                        <picture>
                                            <img src="/example-assets/images/video-player/poster.jpg" class="image__img video-player__thumbnail-image is-loading" alt="Test Produkt" onload="this.classList.remove('is-loading')" />
                                        </picture>
                                    </div>

                                    <div class="video-player__thumbnail-play-button"></div>
                                </div>
                            </div>
                            <script type="text/html" class="modal__placeholder" id="video-modal-931187041-placeholder">
                                <aside class="modal modal--slide" id="video-modal-931187041" aria-hidden="true" data-modal>
                                    <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
                                        <div class="modal__container--medium" role="dialog" aria-modal="true" aria-labelledby="video-modal-931187041-title">
                                            <div class="modal__container-inner">
                                                <header class="modal__header">
                                                    <h3 class="modal__title" id="video-modal-931187041-title"></h3>
                                                    <div class="modal__close">
                                                        <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                                            <span class="visually-hidden"></span>
                                                        </button>
                                                    </div>
                                                </header>
                                                <main class="modal__content" id="video-modal-931187041-content">

                                                    <div class="video-player">
                                                        <span class="visually-hidden">Test Produkt</span>
                                                        <p class="visually-hidden">Test Description</p>
                                                        <video class="video-player__video" preload="auto" playsinline controls autoplay muted data-config="{'controls':true,'autoplay':true,'muted':true,'loop':{'active':false}}" poster="/example-assets/images/video-player/poster.jpg">
                                                            <source src="/example-assets/videos/video-player/video.mp4" type="video/mp4">
                                                        </video>
                                                    </div>

                                                </main>
                                            </div>
                                        </div>
                                    </div>
                                </aside>
                            </script>
                        </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--video">
                            <div class="image ">
                                <picture>
                                    <img src="https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg" class="image__img detail-slider__bottom-slider-image is-loading" alt="Test Produkt" onload="this.classList.remove('is-loading')" />
                                </picture>
                            </div>

                            <div class="detail-slider__bottom-slider-thumbnail-play-button"></div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="detail-slider__bottom-slider-image-container--video">
                            <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" onload="this.classList.remove('is-loading')" />
                                </picture>
                            </div>

                            <div class="detail-slider__bottom-slider-thumbnail-play-button"></div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="detail-slider__bottom-slider-image-container--video">
                            <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 class="detail-slider__bottom-slider-thumbnail-play-button"></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--videos-and-images">
            <div class="detail-slider__meta-left">6 Bilder</div>
            <div class="detail-slider__meta-right">3 Videos</div>
        </div>
    </div>
</div>
 
{% include '@SharedComponents/modules/b2b-product-detail/components/detail-slider/detail-slider.twig' %}
 
{
  "labels": {
    "amountOfImages": "6 Bilder",
    "amountOfVideos": "3 Videos"
  },
  "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": "https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg"
      },
      "youtube": {
        "id": "X6OByqtMDIo",
        "poster": "https://img.youtube.com/vi/X6OByqtMDIo/maxresdefault.jpg",
        "autoplay": false,
        "overlay": true
      }
    },
    {
      "thumbnail": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/thumb.png"
      },
      "vimeo": {
        "id": "229479141",
        "poster": "/example-assets/images/video-player/poster.jpg",
        "autoplay": false,
        "overlay": true
      }
    },
    {
      "thumbnail": {
        "alt": "Test Produkt",
        "src": "/example-assets/images/detail-slider/thumb.png",
        "src2x": "/example-assets/images/detail-slider/thumb.png"
      },
      "video": {
        "title": "Test Produkt",
        "description": "Test Description",
        "mp4": "/example-assets/videos/video-player/video.mp4",
        "poster": "/example-assets/images/video-player/poster.jpg",
        "autoplay": false,
        "overlay": true
      }
    },
    {
      "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.