Building slider made easy, there are tons of plugin available to add a slider on your web app, but each one comes with lots of extra code sometimes we don’t need that all, so I here I will show you how to build slider in simple step –
Main Components –
- Container
- Navigation
- Slider Item Wrapper
- Slider Item List
Now let’s put one by one on the page.
Create the main container which holds all the elements
</pre>
<div class="container">
<div>
CSS for the container div
.container{
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}
If you have notices CSS of the container div, it’s using flex, flex has made web designers life a lot easier, Understand flex in little more detail – A Guide to Flexbox
Next is to add a child to the main container – navigation and slider item wrapper
Left Navigation Arrow –
</pre>
<div class="navigation left-arrow">←</div>
<pre>
Right Navigation Arrow –
</pre>
<div class="navigation right-arrow">→</div>
<pre>
Slider Wrapper –
</pre>
<div class="wrapper"></div>
<pre>
Now if you have noticed we already have added some class and event on the left and right arrow, now it’s time to add CSS and events.
.navigation{
flex: 1 1 5%;
display: flex;
align-items: center;
cursor: pointer;
}
.left-arrow{
justify-content: flex-end
}
.right-arrow{
justify-content: flex-start
}
.wrapper {
flex: 1 1 90%;
overflow: hidden;
}
Javascript function to handle on click for left and right arrow
function prevClick() {
}
function nextClick() {
}
We will keep code block empty for now we will add code this after we will add slider items.
Add slider items –
Note: Add image URL of your choice –
</pre>
<ul class="slider">
<li class="slider-item"></li>
<li class="slider-item"></li>
<li class="slider-item"></li>
</ul>
<pre>
CSS for the slider items –
.slider{
transition: transform 1s ease-in-out;
list-style-type: none;
white-space: nowrap;
margin: 0;
padding:0;
}
.slider-item{
display: inline-block;
width: 100%;
height: 250px;
background-size: cover;
background-position: 50% 50%;
}
Yo! Slider design is ready, But it will not slide, let’s add some javascript to slide it
const getElement = (selector) => {
return document.querySelector(selector);
}
const getElements = (selector) => {
return document.querySelectorAll(selector);
}
let position = 0;
const slider = getElement(".slider");
const sliderWrapper = getElement(".wrapper");
const totalItems = getElements(".slider-item").length
const setTransform = () => {
slider.style["transform"] = 'translate3d(' + (-position * slider.offsetWidth - position*3) + 'px,0,0)';
}
function prevClick() {
position = Math.max( position - 1, 0);
setTransform()
}
function nextClick() {
position = Math.min( position + 1, totalItems - 1);
setTransform();
}
window.addEventListener('resize', setTransform);
Wow, an image is sliding now, you see how easy to build a slider, post comment for any question.
See the Demo at Simple Slider by Mahipatsinh Jadav (@mhjadav) on CodePen.
Feel free to reach out to me on twitter @mhjadav
Thanks for reading
Full stack developer based in India