npm-carousel

For creating carousel functionality

Usage no npm install needed!

<script type="module">
  import npmCarousel from 'https://cdn.skypack.dev/npm-carousel';
</script>

README

For creating carousel functionality

Purpose

To practice npm creation and usage. There are four arguments. First argument is the class of div where the photos are placed. Second and third for are the classes of the left and right arrows of the carousel. Fourth for the dot class. This is only functionality - the HTML code needs to be created.

Installation

npm install npm-carousel

Usage example

createCarousel.start('mySlides', '.prev', '.next', 'dot');

<main>
  <div class="slideshow-container">
    <div class="mySlides fade">
      <div class="numbertext">1 / 4</div>
      <img src="images/Fall.jpg" style="width: 100%" />
      <div class="text">Fall</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">2 / 4</div>
      <img src="images/Mountain.jpg" style="width: 100%" />
      <div class="text">Mountain</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">3 / 4</div>
      <img src="images/Tree.jpg" style="width: 100%" />
      <div class="text">Tree</div>
    </div>
    <div class="mySlides fade">
      <div class="numbertext">4 / 4</div>
      <img src="images/railroad.jpg" style="width: 100%" />
      <div class="text">Railroad</div>
    </div>
    <a class="prev">&#10094;</a>
    <a class="next">&#10095;</a>
  </div>

  <br />

  <div style="text-align: center">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</main>