Slideshow

Need a collection of images without wasting your pages and time? Slideshow is here for you! To use only Fire UI Slideshow feature, copy and paste these stylesheet and script tag into your head element to load Fire UI navbar CSS and JS.

<link rel="stylesheet" href="https://unpkg.com/@fire-ui/fire-ui@0.1.1/src/feature/Slideshow/slideshow.css">
<script src="https://unpkg.com/@fire-ui/fire-ui@0.1.1/src/feature/Slideshow/slideshow.js"></script>

Slideshow

Example

Example of slideshow with all classes available combine together:

Caption One

Caption Two

Caption Three

❮ ❯

<div class="slideshow-container">
    <div class="slideshow">
        <img src="https://cdn.spacetelescope.org/archives/images/wallpaper2/heic2007a.jpg">
        <span class="slideshow-caption">Caption One</span>
    </div>

    <div class="slideshow slideshow-none">
        <img src="https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg">
        <span class="slideshow-caption">Caption Two</span>
    </div>

    <div class="slideshow slideshow-none">
        <img src="https://wallpaperaccess.com/full/235804.jpg">
        <span class="slideshow-caption">Caption Three</span>
    </div>

    <a class="slideshow-prevBtn" onclick="btnSlide(-1)">&#10094;</a>
    <a class="slideshow-nextBtn" onclick="btnSlide(1)">&#10095;</a>
</div>
<br>

<div class="slideshow-info">
    <span class="slideshow-dot" onclick="currentSlide(1)"></span>
    <span class="slideshow-dot" onclick="currentSlide(2)"></span>
    <span class="slideshow-dot" onclick="currentSlide(3)"></span>
</div>

Note: Need to know that you should put slideshow-none class after the slideshow class EXCEPT the first image.