Custom slider js
A custom slider is a JavaScript plugin that allows you to create and control a dynamic slideshow of images or content on a webpage. Unlike pre-built slider libraries, a custom slider gives you the flexibility to design and tailor the slider's behavior according to your specific needs and design preferences.
Creating a custom slider requires a combination of HTML, CSS, and JavaScript knowledge. Simply copy paste code to see the result in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
.slider-container {
position: relative;
overflow: hidden;
width: 400px; /* Adjust the width as needed */
height: 200px; /* Adjust the height as needed */
}
.slider {
display: flex;
width: 300%; /* Adjust the width to accommodate all slides */
transition: transform 0.3s ease-in-out;
}
.slide {
flex: 0 0 33.33%; /* Adjust this to distribute slides equally */
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev-btn,
.next-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 8px 12px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
.prev-btn {
left: 0;
}
.next-btn {
right: 0;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider">
<div class="slide">
<img src="https://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/splash.png" alt="Image 1">
</div>
<div class="slide">
<img src="https://commondatastorage.googleapis.com/codeskulptor-demos/riceracer_assets/img/start.png" alt="Image 2">
</div>
<div class="slide">
<img src="https://codeskulptor-demos.commondatastorage.googleapis.com/descent/background.png" alt="Image 3">
</div>
</div>
<button class="prev-btn">Previous</button>
<button class="next-btn">Next</button>
</div>
<script>
(function() {
const sliderContainer = document.querySelector('.slider-container');
const slider = document.querySelector('.slider');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
const totalSlides = slides.length;
const slideWidth = sliderContainer.clientWidth;
const autoSlideInterval = 3000; // Change auto slide interval (in milliseconds) as needed
const secondSlideDuration = 2000; // Duration of the second slide (in milliseconds)
let autoSlideTimer;
function showSlide(index) {
const position = `translateX(-${index * slideWidth}px)`;
slider.style.transform = position;
}
function showNextSlide() {
currentIndex = (currentIndex + 1) % totalSlides;
showSlide(currentIndex);
}
function showPrevSlide() {
currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
showSlide(currentIndex);
}
function autoSlide() {
autoSlideTimer = setInterval(() => {
if (currentIndex === 1) {
// For the second slide, wait for the secondSlideDuration
setTimeout(() => {
showNextSlide();
}, secondSlideDuration);
} else {
showNextSlide();
}
}, autoSlideInterval);
}
function stopAutoSlide() {
clearInterval(autoSlideTimer);
}
function initializeSlider() {
slider.style.width = `${totalSlides * slideWidth}px`;
showSlide(currentIndex);
autoSlide();
}
prevBtn.addEventListener('click', () => {
stopAutoSlide();
showPrevSlide();
autoSlide();
});
nextBtn.addEventListener('click', () => {
stopAutoSlide();
showNextSlide();
autoSlide();
});
initializeSlider();
})();
</script>
</body>
</html>
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
Don't forget to share this article! Help us spread the word by clicking the share button below.
We appreciate your support and are committed to providing you valuable and informative content.
We are thankful for your never ending support.
Random Code Snippet Queries: Javascript
- How to Set data to localstorage in javascript
- Generate 6 digit random number in javascript
- Execute function with condition in javascript
- ReferenceError: $ is not defined
- Multidimensional array example javascript
- Prism js horizontally overflowing its container
- Trim the leading and trailing comma from string in Javascript
- ReferenceError: Cannot access 'myFunction' before initialization
- How to make entire Div clickable in javascript
- Concat variable with string in javascript
- How to show and hide placeholder text
- How can I add a key/value pair to a JavaScript object
- Uncaught TypeError: Assignment to constant variable
- Javascript to print Fibonacci series upto 15 Observations
- Get multiplication in javascript using array input
- How to add a property to object with condition in javascript
- Javascript set timeout function with example code
- Uncaught TypeError: $(...).summernote is not a function
- Hide div on click outside of element in javascript/jQuery
- Animating numbers counting Javascript
- Javascript get only 10 characters from string
- How to get query string value in javascript
- Json stringify
- How to preview a word document in HTML using javascript
- On click enter redirect to another URL with parameters in javascript