own-carousel.js
Introduction
This is a dependency-free Vanilla JavaScript slider for vanillaJS's lover. It's lightweight (~7kb) and easy to use.
Its core workings are similar to Owl Carousel, but it doesn't require jquery. Currently it only provides some essential features of a slider and just support horizontal slider.
Features
Loop
Drag/Swipe
Responsive
Autoplay
Wheel
Demos
Installation
Include CSS file in your <head>
<link href="own-carousel.min.css" rel="stylesheet">
Include JS file in your <head>
<script src="own-carousel.min.js"></script>
HTML structure
<div class="own-carousel__container">
<div class="own-carousel__outer">
<div class="own-carousel">
<div class="own-carousel__item">Your content</div>
<div class="own-carousel__item">Your content</div>
<div class="own-carousel__item">Your content</div>
<div class="own-carousel__item">Your content</div>
<div class="own-carousel__item">Your content</div>
<div class="own-carousel__item">Your content</div>
<div class="own-carousel__item">Your content</div>
<div class="own-carousel__item">Your content</div>
</div>
</div>
<div class="own-carousel__control">
<button class="control__prev">«</button>
<button class="control__next">»</button>
</div>
</div>
<!-- You have to follow this HTML structure and class name -->
<!-- own-carousel__control is optional, but if you want to have a navigation for your carousel, follow this structure, add another class and custom if you want -->
<!-- You can add another class name in "own-carousel__container" to add margin, padding, width,... for your slider -->
<!-- You can also add another class name in "own-carousel__item" to custom your carousel items -->
And call the function in your main.js (or another name 😆) after your <body> tag
document.addEventListener("DOMContentLoaded", () => {
document.querySelector(".own-carousel__container").ownCarousel({
itemPerRow:5,
itemWidth:19,
responsive: {
1000: [4, 24],
800: [3, 33],
600: [2, 49],
400: [1, 100]
},
});
responsive();
});
//If you have more than 2 carousel in your page, just add another class in your "own-carousel__container" div,
//like "own-1", "own-2",... for example, and change "own-carousel__container" to "own-1", "own-2",... in querySelector.
//Don't forget to add responsive() after ownCarousel(), it's necessary for determine which responsive option is suitable after loading the page,
//if you don't need responsive and responsive property is an empty object, then you don't need to add responsive(). You only need to call this
//function once whether you have more than 1 carousel in your page.