By :
gitmhd
Email :
git.mhd@gmail.com
Thank you for using my slider, if you have any questions that aren’t covered in this article, please mail me at git.mhd@gmail.com.
Hub-Slider is free vanilla JavaScript slider fast, lightweight, and multi-purpose. it designed without any icons or Gifs to be faster and more efficient.
Hub-Slider is lightweight slider multi-purpose convenient for all uses such as (presentation, content-viewer, slideshow, etc) or even like website template like what I did in this Documentation 👍😉, final result depends in your creativity, you can use it to apply your own idea 👌.
Some sliders size up to (120KB), undoubtedly such sizes low your website performance and user experience, so what is the solution? It is Hub-Slider.
There are two ways to install Hub-Slider in your project.
First, install it in your project by running the following
command:
npm install hub-slider --save
Then, include it in your view file (e.g index.html).
<!DOCTYPE>
<html lang="en">
<head>
// Your HTML codes
<link
rel="stylesheet"
href="node_modules/hub-slider/dist/css/hub-slider.css">
</head>
<body>
// Your HTML codes
<script src="node_modules/hub-slider/dist/js/hub-slider.min.js">
</script>
</body>
<html>
Then, write the following code in your view file.
<div class="hub-slider" id="whatever">
<div>Slide number #01</div>
<div>Slide number #02</div>
<div>Slide number #03</div>
</div
Finally, run the slider using following JS code.
let myslider = new HUBSlider();
myslider.init("whatever"); // pass the element id
First, clone it from here .
Then, include its files in your project using whatever
method you want, the important thing is you must include
them in your project.
<!DOCTYPE>
<html lang="en">
<head>
// Your HTML codes
<link
rel="stylesheet"
href="css/hub-slider.css">
</head>
<body>
// Your HTML codes
<script src="js/hub-slider.min.js">
</script>
</body>
<html>
Then, write the following code in your HTML file.
<div class="hub-slider" id="whatever">
<div>Slide number #01</div>
<div>Slide number #02</div>
<div>Slide number #03</div>
</div
Finally, run the slider using following JS code.
let myslider = new HUBSlider();
myslider.init("whatever"); // pass the element id
You can customize Hub-Slider by adding predefined classes to the slide elements or by adding special properties to the options method.
You can change the way that your slides show and hide.
All values are listed in the Options section.
let myslider = new HUBSlider();
myslider.init("whatever");
myslider.options({
slidingPrev: "hub-bottom",
slidingNext: "hub-top"
});
You can change your arrows color.
let myslider = new HUBSlider();
myslider.init("whatever");
myslider.options({
arrowsColor: "red",
});
You can remove arrows default style, if you want to add
your own style.
All values are listed in the Options section.
let myslider = new HUBSlider();
myslider.init("whatever");
myslider.options({
arrowsRemoveStyle: "both",
});
You can change the time of the sliding from element to
another.
All values are listed in the Options section.
let myslider = new HUBSlider();
myslider.init("whatever");
myslider.options({
interval: 3000,
});
You can stop the animation.
All values are listed in the Options section.
let myslider = new HUBSlider();
myslider.init("whatever");
myslider.options({
animateSlide: false,
});
You can stop your slider from auto sliding.
All values are listed in the Options section.
let myslider = new HUBSlider();
myslider.init("whatever");
myslider.options({
autoSlide: false,
});
You can animate your elements by adding predefined classes
to your slide elements or to them children.
All classes are listed in the Options section.
<div class="hub-slider" id="whatever">
<div class="hub-fade">Slide
#01</div>
<div class="hub-left">Slide
#02</div>
<div class="hub-top">
<div
class="hub-bottom">Child element</div>
</div>
</div>
You can delay your animation using predefined classes.
All classes are listed in the Options section.
<div class="hub-slider" id="whatever">
<div class="hub-fade delay-1">Slide
#01</div>
<div class="hub-left delay-2">Slide
#02</div>
<div class="hub-right delay-3">Slide
#03</div>
</div>
You can set your animation duration using predefined
classes.
All classes are listed in the Options section.
<div class="hub-slider" id="whatever">
<div class="hub-fade delay-1
slow">Slide #01</div>
<div class="hub-left delay-2
fast">Slide #02</div>
<div class="hub-right delay-3
medium">Slide #03</div>
</div>
In addition, you can use custom CSS to change the slider layout and to style it.
All Options are listed here.
If you experienced any issue, feel free to describe your issue at Github!
If something not clear in the Documentation, feel free to mail me at git.mhd@gmail.com.