Javascript image slider

Simple responsive image slider in pure javascript/vanilla javascript

You can use this simple image slider because it is built with pure javascript/vanilla javascript. It’s very lightweight and responsive and this coding structure won’t interrupt your site design. It’s easy to use and developer friendly coding structure.

HTML5 | CSS3 | JavaScript

Version: 1.0.0

Code

<section id="bn-hero-slider-id" class="bn-hero-slider">
    <div class="bn-hero-slider-wrapper">
        <div class="bn-main-slider-container">

            <div class="bn-slider-images">
                <img class="bn-slider-image" src="images/flower.jpg" alt="javascript slider flower image"/>
                <img class="bn-slider-image" src="images/red-leaf.jpg" alt="javascript slider leaf image"/>
                <img class="bn-slider-image" src="images/river.jpg" alt="javascript slider river image"/>
                <img class="bn-slider-image" src="images/road.jpg" alt="javascript slider road image"/>
                <img class="bn-slider-image" src="images/tree.jpg" alt="javascript slider tree image"/>
                <img class="bn-slider-image" src="images/red-chilli.jpg" alt="javascript slider red chilli image"/>
            </div>

            <div class="bn-slider-arrows">
                <div class="bn-slider-arrow bn-left-arrow bnInactive">
                    <svg viewBox="-19.04 0 75.803 75.803">
                        <g transform="translate(-624.082 -383.588)">
                          <path d="M660.313,383.588a1.5,1.5,0,0,1,1.06,2.561l-33.556,33.56a2.528,2.528,0,0,0,0,3.564l33.556,33.558a1.5,1.5,0,0,1-2.121,2.121L625.7,425.394a5.527,5.527,0,0,1,0-7.807l33.556-33.559A1.5,1.5,0,0,1,660.313,383.588Z"/>
                        </g>
                    </svg>
                </div>
                <div class="bn-slider-arrow bn-right-arrow">
                    <svg viewBox="-19.04 0 75.804 75.804">
                        <g transform="translate(-831.568 -384.448)">
                          <path d="M833.068,460.252a1.5,1.5,0,0,1-1.061-2.561l33.557-33.56a2.53,2.53,0,0,0,0-3.564l-33.557-33.558a1.5,1.5,0,0,1,2.122-2.121l33.556,33.558a5.53,5.53,0,0,1,0,7.807l-33.557,33.56A1.5,1.5,0,0,1,833.068,460.252Z"/>
                        </g>
                    </svg>
                </div>
            </div>

        </div>
    </div>
</section>

.bn-hero-slider {
    display: block;
    width: 100%;
}
.bn-hero-slider-wrapper {
    margin: 0;
    padding: 0;
}
.bn-main-slider-container {
    position: relative;
    width: 100%;
}
.bn-slider-images {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
    height: 800px;
    overflow: hidden;
}
.bn-slider-images img.bn-slider-image {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: .3s;
}
.bn-slider-arrows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.bn-slider-arrow {
    display: inline-block;
    background: #ffffff8f;
    padding: 10px 5px;
    width: 30px;
    line-height: 1;
    text-align: center;
    font-size: 18px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: none;
    transition: .3s;
}
.bn-slider-arrow:hover {
    background: #ffffff;
    transition: .3s;
    box-shadow: 0 0 8px 0px #0000001f;
}
.bn-slider-arrow.bn-left-arrow {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.bn-slider-arrow.bn-right-arrow {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.bn-slider-arrow svg {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
}
.bn-slider-arrow svg path {
    fill: #000000;
}
.bn-slider-arrow.bnInactive {
    opacity: .5;
    cursor: initial;
}
.bn-slider-arrow.bnInactive:hover {
    background: #ffffff8f;
    box-shadow: none;
}
@media (max-width: 1200px){
.bn-slider-images {
    height: 200px;
}
}

const bnSlides = document.querySelectorAll('.bn-slider-image');
var   bnSlideCounter = 0;
const bnButton = document.querySelectorAll('.bn-slider-arrow');
const bnPrevButton = document.querySelector('.bn-left-arrow');
const bnNextButton = document.querySelector('.bn-right-arrow');

bnSlides.forEach(
    (slide,index) => {
        slide.style.left = index * 100 + '%';
    }
);

const bnPrev = () => {
    if (bnSlideCounter > 0){
        bnSlideCounter--;
    };
    bnSlideImage();
}

const bnNext = () => {
    if (bnSlideCounter < bnSlides.length - 1){
        bnSlideCounter++;
    };
    bnSlideImage();
}

var bnSlideImage = () => {
    bnSlides.forEach(
        (slide) => {
            slide.style.transform = 'translateX' + '(' + '-' + bnSlideCounter * 100 + '%' + ')';
        }
    )
}

bnPrevButton.addEventListener('click', bnPrev);

bnNextButton.addEventListener('click', bnNext);

bnButton.forEach(function(bnButtonOnClick) {

bnButtonOnClick.addEventListener('click', function() {
    if(bnSlideCounter == 0){
        bnPrevButton.classList.add('bnInactive');
    }else if(bnSlideCounter == bnSlides.length - 1){
        bnNextButton.classList.add('bnInactive');
    }else{
        bnPrevButton.classList.remove('bnInactive');
        bnNextButton.classList.remove('bnInactive');
    }
});
});