@appstractdk/as-slideshow

The as-basic-slider is a basic 'stupid' slideshow, without animations or any responsiveness. Other front-end module slideshows will inherit this Class and extend the functionalities. But it can also be included, as is and customized, in your current project.

Usage no npm install needed!

<script type="module">
  import appstractdkAsSlideshow from 'https://cdn.skypack.dev/@appstractdk/as-slideshow';
</script>

README

as-basic-slideshow

The as-basic-slider is a basic 'stupid' slideshow, without animations or any responsiveness. Other front-end module slideshows will inherit this Class and extend the functionalities. But it can also be included, as is and customized, in your current project.

Javascript and CSS is included in the package, and the basic markup is presented below.

<section class="slideshow" data-section-name="cases">
    <div class="slideshow-item">
            <img class="slideshow-item-image" src="../../dist/static/images/europa.png" alt="europa">
    </div>
    <div class="slideshow-item">
            <img class="slideshow-item-image" src="../../dist/static/images/jupiter.jpg" alt="jupiter">
    </div>
    <div class="slideshow-item">
            <img class="slideshow-item-image" src="../../dist/static/images/mars.jpg" alt="mars">
    </div>
    <div class="slideshow-item">
            <img class="slideshow-item-image" src="../../dist/static/images/moon.jpg" alt="moon">
    </div>
    <div class="slideshow-item">
            <img class="slideshow-item-image" src="../../dist/static/images/saturn.jpg" alt="saturn">
    </div>
    <div class="slideshow-item">
            <img class="slideshow-item-image" src="../../dist/static/images/solar-system.jpg" alt="solar-system">
    </div>
    <div class="slideshow-item">
            <img class="slideshow-item-image" src="../../dist/static/images/venus.jpg" alt="venus">
    </div>
    <div class="slideshow-arrows-container">
            <div class="slideshow-arrow left">
                <svg class="svg-icon slideshow-arrow-icon"><use xlink:href="#arrow-left" /></svg>
            </div>
            <div class="slideshow-arrow right">
                <svg class="svg-icon slideshow-arrow-icon"><use xlink:href="#arrow-right" /></svg>
            </div>
    </div>
</section>