Get started with tiny-slider CDN
MIT licensed
Tiny Slider is a lightweight and customizable library for creating responsive image carousels.
Tags:- vanilla javascript
- tiny slider
- slider
Stable version
Copied!
How to start using tiny-slider CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/your/styles.css">
<script src="https://cdn.cdnhub.io/tiny-slider/2.9.4/tiny-slider.js"></script>
<style>
#slider {
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
.slider__slide {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div id="slider">
<div class="slider">
<div class="slider__container">
<div class="slider__slide" style="background-image: url('path/to/image1.jpg')"></div>
<div class="slider__slide" style="background-image: url('path/to/image2.jpg')"></div>
<div class="slider__slide" style="background-image: url('path/to/image3.jpg')"></div>
</div>
</div>
</div>
<script>
const slider = new TinySlider('#slider', {
items: 1,
slideBy: 1,
autoplay: false,
controls: false,
loop: true,
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
All versions
0.0.0
0.0.1
0.0.2
0.0.3
0.1.0
0.2.0
0.2.1
0.2.2
0.3.0
0.3.1
0.3.2
0.3.3
0.3.4
0.3.5
0.4.0
0.4.1
0.4.2
0.5.0
0.6.0
0.6.1
0.6.2
0.6.3
0.6.4
0.6.5
0.6.6
0.7.0
1.0.0
1.0.1
1.0.2
1.0.3
1.0.4
1.1.0
1.1.1
1.2.0
1.2.1
1.2.2
1.3.0
1.3.1
1.4.0
1.4.1
1.5.0
1.5.1
1.5.2
1.5.3
1.5.4
1.5.5
1.5.6
1.6.0
1.6.1
2.0.0
2.0.1
2.0.2
2.0.3
2.1.0
2.1.1
2.1.2
2.1.3
2.1.4
2.1.5
2.1.6
2.1.7
2.1.8
2.2.0
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
2.2.6
2.3.0
2.3.1
2.3.10
2.3.11
2.3.2
2.3.3
2.3.4
2.3.5
2.3.6
2.3.7
2.3.8
2.3.9
2.4.0
2.4.1
2.5.0
2.5.1
2.5.2
2.6.0
2.7.0
2.7.1
2.7.2
2.7.3
2.7.4
2.8.0
2.8.1
2.8.2
2.8.3
2.8.4
2.8.5
2.8.6
2.8.7
2.8.8
2.9.0
2.9.1
2.9.2
2.9.3
*** 2.9.4