An easy to integrate image slider for your website.
If you first want to see if the image slider is what you are looking for, you can see it here.
- Clone or download the repo
- Implement the
image-slider.jsfile in your project - Implement the
<image-slider></image-slider>HTML tag in your site - Pass the image slider the image data in your JS file (see the
settings-image-slider.jsfile in this repo) - For the design use the attributes in the
<image-slider></image-slider>HTML tag
This repo shows some examples.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Title</title>
<!-- 1. Implement the "image-slider.js" file -->
<script src="./assets/js/image-slider.js"></script>
<!-- 2. Implement your "*.js" settings file -->
<script src="./assets/js/settings-image-slider.js" defer></script>
</head>
<body>
<!-- Some Content -->
<!-- 3. Implementation of the "<image-slider></image-slider>" HTML tag -->
<image-slider></image-slider>
<!-- Some Content -->
</body>
</html>See the examples and comments in the files for more information.
The following attributes are available:
slider-art=> There are:default,image,link,click.
thumbnail-height=> height of the image slidercolor-bg=> background color of the image slidercolor-icon=> color of the next and preview buttonradius-slider=> radius of the image sliderslider-border=> border of the image sliderimage-margin=> spacing between the images. Important: no dimensions such as "px" or "rem", only a number