© 2020 Rosetta
Swipe through ebook pages and take users to a certain action.
<!-- The data-theme is for example purposes. Don't use in it modules -->
<section class="module ebook-previewer" data-theme="light">
<div class="wrapper">
<!-- heading -->
<div class="heading">
<h2 class="heading__title">
Lorem ipsum dolor sit amet consectetur adipiscing
</h2>
<p class="heading__subtitle">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur
sint occaecat cupidatat non proident sunt
</p>
</div>
<!-- body -->
<div class="module__body">
<div class="slideshow is-ebook-previewer">
<div class="slideshow__wrapper">
<!-- prev arrow -->
<div data-dir="previous" class="slideshow__arrow slideshow__arrow--previous">
<i class="fa-solid fa-arrow-left"></i>
</div>
<div class="slideshow__inner">
<ul class="slideshow__content">
<li class="slideshow__item is-active">
<img
src="https://www.inboundcycle.com/hubfs/0-media/it/hs-tpl-ebook-viewer-cover.png">
</li>
<li class="slideshow__item">
<img
src="https://www.inboundcycle.com/hubfs/0-media/it/hs-tpl-ebook-viewer-cover.png">
</li>
<li class="slideshow__item">
<img
src="https://www.inboundcycle.com/hubfs/0-media/it/hs-tpl-ebook-viewer-cover.png">
</li>
</ul>
</div>
<!-- controls -->
<ul class="slideshow__control">
<li class="slideshow__control-item is-active"></li>
<li class="slideshow__control-item"></li>
<li class="slideshow__control-item"></li>
</ul>
<!-- next arrow -->
<div data-dir="next" class="slideshow__arrow slideshow__arrow--next">
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="module__footer is-flex flex-wrap gap-xs flex-center">
<button class="button is-primary">Primary Button</button>
<button class="button is-primary is-outlined">Secondary Button</button>
</div>
</div>
</section>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt
