Simple Slider For Your Web Page

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 here i will show you how to build slider in simple step -

Main Components -

  • 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

<div class="container"> <div>

CSS for the container div

.container{ 
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}
.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 -

<div class="navigation left-arrow">←</div>

Right Navigation Arrow -

<div class="navigation right-arrow">→</div>

Slider Wrapper -

<div class="wrapper"></div>

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 -

<ul class="slider"><li class="slider-item"></li><li class="slider-item"></li><li class="slider-item"></li></ul>

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

Engineer, Working on solving web application problems.

Engineer, Working on solving web application problems.