Skip to content
Search Calcite Web
Search
Calcite Web
Documentation
Examples
Guides
Quick Reference
Dark Theme
Calcite Web
Examples
Download Latest Release
Overview
Basic Pages
Grid
Navigation
Marketing
E-Commerce
i18n
Examples
marketing
Back to Top
Marketing Pattern Examples
Marketing
Image Switcher
View HTML
Image switchers for switching images.
Image Switcher
<!-- Sample HTML --> <div class="grid-container"> <div class="column-10 pre-1 post-1 padding-leader-6"> <a class="image-switcher js-view-toggle is-active" data-set="image-switcher" data-view="foo" href="#"> <figure class="image-switcher-preview"> <img src="../../assets/img/docs/01-circle.svg" alt=""> </figure> <div class="image-switcher-title"> <p class="trailer-0">Image One</p> </div> </a> <a class="image-switcher js-view-toggle" data-set="image-switcher" data-view="bar" href="#"> <figure class="image-switcher-preview"> <img src="../../assets/img/docs/02-circle.svg" alt=""> </figure> <div class="image-switcher-title"> <p class="trailer-0">Image Two</p> </div> </a> <a class="image-switcher js-view-toggle" data-set="image-switcher" data-view="baz" href="#"> <figure class="image-switcher-preview"> <img src="../../assets/img/docs/03-circle.svg" alt=""> </figure> <div class="image-switcher-title"> <p class="trailer-0">Image Three</p> </div> </a> </div> <div class="column-12"> <img class="image-switcher-view js-view is-active" src="../../assets/img/docs/01-square.svg" alt="one" data-set="image-switcher" data-view="foo"> <img class="image-switcher-view js-view" src="../../assets/img/docs/02-square.svg" alt="two" data-set="image-switcher" data-view="bar"> <img class="image-switcher-view js-view" src="../../assets/img/docs/03-square.svg" alt="three" data-set="image-switcher" data-view="baz"> </div> </div>
Close
Copy to Clipboard
Image One
Image Two
Image Three
Carousel
View HTML
Work in progress.
Carousel
<!-- Sample HTML --> <div class="carousel"> <div class="carousel-panel is-active" data-toggle-set="carousel" data-toggle="foo"> <img src="../../assets/img/docs/01-picture.svg" alt="one"> </div> <div class="carousel-panel" data-toggle-set="carousel" data-toggle="baz"> <img src="../../assets/img/docs/02-picture.svg" alt="two"> </div> <div class="carousel-panel" data-toggle-set="carousel" data-toggle="bar"> <img src="../../assets/img/docs/03-picture.svg" alt="three"> </div> </div> <nav class="carousel-nav"> <a href="#" class="js-view-toggle icon-ui-left icon-ui-flush font-size-2" data-toggle-set="carousel" data-toggle='prev'></a> <a href="#" class="carousel-dot js-view-toggle is-active" data-toggle-set="carousel" data-toggle="foo"></a> <a href="#" class="carousel-dot js-view-toggle" data-toggle-set="carousel" data-toggle="baz"></a> <a href="#" class="carousel-dot js-view-toggle" data-toggle-set="carousel" data-toggle="bar"></a> <a href="#" class="js-view-toggle icon-ui-right icon-ui-flush font-size-2" data-toggle-set="carousel" data-toggle='next'></a> </nav>
Close
Copy to Clipboard
