Simple Slider For Your Web Page

</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