Keen-Slider the free library agnostic touch slider
What is Keen Slider?
A Image slider or image carousel, or actually content slider that works without the dependency of JQuery or anyother base library, so it can run standalone. It also works well with touch screens and can be swiped to move to the next part of the content.
For the demo below i selected the most common usage for this slider, the only thing i can see that it is missing is auto switch to the next slider, which i could not see a working demo for, you could probably just add a set interval to this to automatically switch to the next slide in the set.
Preview of Keen Slider
A preview of Keen Slider in action
What can i use this for?
If you have a collection of images, products or content that you want in a slider carousel format this could be great for that kind of application.
Original Source
Thanks to the author rcbyr on github
Further Documentation
Documentation on Keen Slider can be found here.
Keen-Slider the free library agnostic touch slider Demo
View Demo Full Screen View Demo New Tab
Keen-Slider the free library agnostic touch slider Code
HTML
<div id="my-keen-slider" class="keen-slider">
<div class="keen-slider__slide number-slide1">1</div>
<div class="keen-slider__slide number-slide2">2</div>
<div class="keen-slider__slide number-slide3">3</div>
<div class="keen-slider__slide number-slide4">4</div>
<div class="keen-slider__slide number-slide5">5</div>
<div class="keen-slider__slide number-slide6">6</div>
</div>
CSS
[class^="number-slide"],
[class*=" number-slide"] {
background: grey;
display: flex;
align-items: center;
justify-content: center;
font-size: 50px;
color: #fff;
font-weight: 500;
height: 300px;
max-height: 100vh;
}
.number-slide1 {
background: rgb(64, 175, 255);
background: linear-gradient(
128deg,
rgba(64, 175, 255, 1) 0%,
rgba(63, 97, 255, 1) 100%
);
}
.number-slide2 {
background: rgb(255, 75, 64);
background: linear-gradient(
128deg,
rgba(255, 154, 63, 1) 0%,
rgba(255, 75, 64, 1) 100%
);
}
.number-slide3 {
background: rgb(182, 255, 64);
background: linear-gradient(
128deg,
rgba(182, 255, 64, 1) 0%,
rgba(63, 255, 71, 1) 100%
);
background: linear-gradient(
128deg,
rgba(189, 255, 83, 1) 0%,
rgba(43, 250, 82, 1) 100%
);
}
.number-slide4 {
background: rgb(64, 255, 242);
background: linear-gradient(
128deg,
rgba(64, 255, 242, 1) 0%,
rgba(63, 188, 255, 1) 100%
);
}
.number-slide5 {
background: rgb(255, 64, 156);
background: linear-gradient(
128deg,
rgba(255, 64, 156, 1) 0%,
rgba(255, 63, 63, 1) 100%
);
}
.number-slide6 {
background: rgb(64, 76, 255);
background: linear-gradient(
128deg,
rgba(64, 76, 255, 1) 0%,
rgba(174, 63, 255, 1) 100%
);
}
Scripts
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/keen-slider@6.3.5/keen-slider.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/keen-slider@6.3.5/keen-slider.min.js"></script>
Javascript
var slider = new KeenSlider("#my-keen-slider", {
loop: true,
})