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');
}
});
});