Slider (slider)

🔗 External documentation.

ID Label Description Schema
title Title
slides Slides A list of slide components 
            id: slider
label: Slider
homepage: 'https://design-system.w3.org/components/slider.html'
slots:
    title:
        id: title
        label: Title
    slides:
        id: slides
        label: Slides
        description: 'A list of slide components'
library:
    js:
        'https://design-system.w3.org/dist/assets/js/slider.js': {  }
    id: slider
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': slider
            title: 'What organizations think about us'
            slides:
                -
                    '@component': slide
                    quote:
                        -
                            '@element': p
                            '@content': 'The School of Informatics at the University of Edinburgh is a world leader in research and teaching in Computer Science, Artificial Intelligence and Cognitive Science.'
                        -
                            '@element': p
                            '@content': 'W3C technologies are both used and studied here, and we are proud to contribute to their development.'
                    logo:
                        -
                            '@element': img
                            src: 'https://design-system.w3.org/dist/assets/images/edinburgh-uni.png'
                            alt: 'The University of Edinburgh'
                    content:
                        -
                            '@element': p
                            '@content': 'Dierdre De Veloper'
                        -
                            '@element': p
                            '@content': 'Lead Dev'
                -
                    '@component': slide
                    quote:
                        '@element': p
                        '@content': 'Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, a search engine, cloud computing, software, and hardware.'
                    logo:
                        -
                            '@element': img
                            src: 'https://design-system.w3.org/dist/assets/images/google.png'
                    content:
                        -
                            '@element': p
                            '@content': 'Ann Other-Developer'
                        -
                            '@element': p
                            '@content': 'Lead Dev'
                -
                    '@component': slide
                    quote:
                        '@element': p
                        '@content': 'Amazon.com, Inc. is an American multinational technology company based in Seattle, Washington, which focuses on e-commerce, cloud computing, digital streaming, and artificial intelligence.'
                    logo:
                        -
                            '@element': img
                            src: 'https://design-system.w3.org/dist/assets/images/amazon.png'
                    content:
                        -
                            '@element': p
                            '@content': 'Joe Bloggs'
                        -
                            '@element': p
                            '@content': 'Lead Dev'

What organizations think about us
<div class="component component--slider u-full-width" data-component="slider"> <div class="l-center"> <h2 id="slider-title">What organizations think about us</h2> <section aria-labelledby="slider-title"> <ul class="clean-list" role="presentation"> <li> <figure class="slide"> <blockquote class="slide__quote"> <p> <p>The School of Informatics at the University of Edinburgh is a world leader in research and teaching in Computer Science, Artificial Intelligence and Cognitive Science.</p> <p>W3C technologies are both used and studied here, and we are proud to contribute to their development.</p></p> </blockquote> <figcaption class="slide__cite l-sidebar"> <div> <div class="sidebar"> <div class="slide__logo"> <img alt="The University of Edinburgh" loading="lazy" src="https://design-system.w3.org/dist/assets/images/edinburgh-uni.png" /></div> </div> <div class="not-sidebar"> <p>Dierdre De Veloper</p> <p>Lead Dev</p></div> </div> </figcaption> </figure></li><li> <figure class="slide"> <blockquote class="slide__quote"> <p> <p>Google LLC is an American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, a search engine, cloud computing, software, and hardware.</p></p> </blockquote> <figcaption class="slide__cite l-sidebar"> <div> <div class="sidebar"> <div class="slide__logo"> <img loading="lazy" src="https://design-system.w3.org/dist/assets/images/google.png" /></div> </div> <div class="not-sidebar"> <p>Ann Other-Developer</p> <p>Lead Dev</p></div> </div> </figcaption> </figure></li><li> <figure class="slide"> <blockquote class="slide__quote"> <p> <p>Amazon.com, Inc. is an American multinational technology company based in Seattle, Washington, which focuses on e-commerce, cloud computing, digital streaming, and artificial intelligence.</p></p> </blockquote> <figcaption class="slide__cite l-sidebar"> <div> <div class="sidebar"> <div class="slide__logo"> <img loading="lazy" src="https://design-system.w3.org/dist/assets/images/amazon.png" /></div> </div> <div class="not-sidebar"> <p>Joe Bloggs</p> <p>Lead Dev</p></div> </div> </figcaption> </figure></li> </ul> </section> </div> </div>