Image Slider is a module that allows you to create an image carousel or slider on your website. It provides a user-friendly and interactive way to showcase a collection of images in a slideshow format.
You can install Image Slider using npm:
npm install @karprabha/image-sliderInclude the Image Slider script in your HTML file using a script tag:
<script src="{root dir}/node_modules/@karprabha/image-slider/dist/image-slider.js"></script>
<script>
imageSlider();
</script>Make sure to adjust the {root dir} placeholder with the appropriate path to your project's root directory.
Alternatively, you can import and use Image Slider in your JavaScript file:
import imageSlider from "@karprabha/image-slider";
imageSlider();To make the image-slider functional, apply the following CSS classes to your html structure:
<div class="slider">
<!-- Add your image slides here -->
<!-- Slide 1 -->
<div class="slide">
<img src="https://pn-sumedang.go.id/tidak_ada_gambar.jpg" alt="tmp" />
</div>
<!-- Slide 2 -->
<div class="slide">
<img src="https://pn-sumedang.go.id/tidak_ada_gambar.jpg" alt="tmp" />
</div>
<button type="button" class="btn-nav btn-prev"><</button>
<button type="button" class="btn-nav btn-next">></button>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent