<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Automatic Image Slider</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #111;
font-family: Arial, sans-serif;
}
/* ================================
SLIDER CONTAINER
================================ */
.slider {
position: relative;
width: 100%;
max-width: 1080px;
margin: 0 auto;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #222;
touch-action: pan-y;
}
/* ================================
SLIDES
================================ */
.slides {
display: flex;
width: 600%;
height: 100%;
transition: transform 0.55s ease-in-out;
}
.slide {
width: 16.6666667%;
flex: 0 0 16.6666667%;
height: 100%;
position: relative;
background: #222;
}
/* IMAGE
Replace the blank src="" with your image URL */
.slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* ================================
PREVIOUS / NEXT BUTTONS
================================ */
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: white;
font-size: 28px;
line-height: 46px;
text-align: center;
cursor: pointer;
z-index: 10;
transition: 0.2s;
}
.slider-btn:hover {
background: rgba(0, 0, 0, 0.75);
}
.slider-btn:active {
transform: translateY(-50%) scale(0.92);
}
.prev {
left: 12px;
}
.next {
right: 12px;
}
/* ================================
PLAY / PAUSE BUTTON
================================ */
.play-pause {
position: absolute;
right: 12px;
bottom: 45px;
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 17px;
cursor: pointer;
z-index: 10;
}
/* ================================
DOTS
================================ */
.dots {
position: absolute;
left: 0;
right: 0;
bottom: 14px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
z-index: 10;
}
.dot {
width: 9px;
height: 9px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
transition: 0.25s;
}
.dot.active {
width: 25px;
border-radius: 10px;
background: white;
}
/* ================================
PROGRESS BAR
================================ */
.progress {
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 3px;
background: #d9b56d;
z-index: 20;
}
/* ================================
MOBILE
================================ */
@media (max-width: 600px) {
.slider {
width: 100%;
aspect-ratio: 4 / 5;
}
.slider-btn {
width: 38px;
height: 38px;
line-height: 38px;
font-size: 24px;
}
.prev {
left: 8px;
}
.next {
right: 8px;
}
.play-pause {
width: 36px;
height: 36px;
right: 8px;
bottom: 43px;
font-size: 15px;
}
.dots {
bottom: 11px;
}
.dot {
width: 8px;
height: 8px;
}
.dot.active {
width: 22px;
}
}
</style>
</head>
<body>
<!-- =====================================================
AUTOMATIC 6-IMAGE SLIDER
TO ADD YOUR IMAGES:
Replace each:
src=""
with your image URL.
Example:
src="https://example.com/image1.jpg"
Recommended image size:
1080 × 1350 pixels
Ratio: 4:5
===================================================== -->
<div class="slider" id="clinicSlider">
<div class="slides" id="slides">
<!-- IMAGE 1 -->
<div class="slide">
<img src="" alt="Slider Image 1">
</div>
<!-- IMAGE 2 -->
<div class="slide">
<img src="" alt="Slider Image 2">
</div>
<!-- IMAGE 3 -->
<div class="slide">
<img src="" alt="Slider Image 3">
</div>
<!-- IMAGE 4 -->
<div class="slide">
<img src="" alt="Slider Image 4">
</div>
<!-- IMAGE 5 -->
<div class="slide">
<img src="" alt="Slider Image 5">
</div>
<!-- IMAGE 6 -->
<div class="slide">
<img src="" alt="Slider Image 6">
</div>
</div>
<!-- PREVIOUS -->
<button
class="slider-btn prev"
id="prevBtn"
aria-label="Previous image">
❮
</button>
<!-- NEXT -->
<button
class="slider-btn next"
id="nextBtn"
aria-label="Next image">
❯
</button>
<!-- PLAY / PAUSE -->
<button
class="play-pause"
id="playPause"
aria-label="Pause slider">
❚❚
</button>
<!-- DOTS -->
<div class="dots" id="dots">
<button
class="dot active"
aria-label="Go to image 1">
</button>
<button
class="dot"
aria-label="Go to image 2">
</button>
<button
class="dot"
aria-label="Go to image 3">
</button>
<button
class="dot"
aria-label="Go to image 4">
</button>
<button
class="dot"
aria-label="Go to image 5">
</button>
<button
class="dot"
aria-label="Go to image 6">
</button>
</div>
<!-- PROGRESS BAR -->
<div class="progress" id="progress"></div>
</div>
<script>
(function () {
const slides = document.getElementById("slides");
const dots =
Array.from(document.querySelectorAll(".dot"));
const prev =
document.getElementById("prevBtn");
const next =
document.getElementById("nextBtn");
const playPause =
document.getElementById("playPause");
const progress =
document.getElementById("progress");
const slider =
document.getElementById("clinicSlider");
/* ================================
SETTINGS
================================ */
const totalSlides = 6;
const slideTime = 4500;
let currentSlide = 0;
let autoPlay = null;
let progressAnimation = null;
let touchStartX = 0;
let touching = false;
/* ================================
UPDATE SLIDER
================================ */
function updateSlider() {
slides.style.transform =
"translateX(-" +
(currentSlide * (100 / totalSlides)) +
"%)";
dots.forEach(function (dot, index) {
dot.classList.toggle(
"active",
index === currentSlide
);
});
startProgress();
}
/* ================================
GO TO SLIDE
================================ */
function goToSlide(index) {
currentSlide =
(index + totalSlides) %
totalSlides;
updateSlider();
}
/* ================================
NEXT
================================ */
function nextSlide() {
goToSlide(currentSlide + 1);
}
/* ================================
PREVIOUS
================================ */
function previousSlide() {
goToSlide(currentSlide - 1);
}
/* ================================
PROGRESS BAR
================================ */
function startProgress() {
cancelAnimationFrame(
progressAnimation
);
progress.style.width = "0%";
if (!autoPlay) {
return;
}
const startTime =
performance.now();
function animate(currentTime) {
const elapsed =
currentTime - startTime;
const percentage =
Math.min(
100,
(elapsed / slideTime) * 100
);
progress.style.width =
percentage + "%";
if (percentage < 100 && autoPlay) {
progressAnimation =
requestAnimationFrame(animate);
}
}
progressAnimation =
requestAnimationFrame(animate);
}
/* ================================
START AUTO PLAY
================================ */
function startAutoPlay() {
stopAutoPlay();
autoPlay =
setInterval(
nextSlide,
slideTime
);
playPause.textContent = "❚❚";
playPause.setAttribute(
"aria-label",
"Pause slider"
);
startProgress();
}
/* ================================
STOP AUTO PLAY
================================ */
function stopAutoPlay() {
clearInterval(autoPlay);
autoPlay = null;
cancelAnimationFrame(
progressAnimation
);
progress.style.width = "0%";
playPause.textContent = "▶";
playPause.setAttribute(
"aria-label",
"Play slider"
);
}
/* ================================
NEXT BUTTON
================================ */
next.addEventListener(
"click",
function () {
nextSlide();
startAutoPlay();
}
);
/* ================================
PREVIOUS BUTTON
================================ */
prev.addEventListener(
"click",
function () {
previousSlide();
startAutoPlay();
}
);
/* ================================
DOT BUTTONS
================================ */
dots.forEach(function (dot, index) {
dot.addEventListener(
"click",
function () {
goToSlide(index);
startAutoPlay();
}
);
});
/* ================================
PLAY / PAUSE
================================ */
playPause.addEventListener(
"click",
function () {
if (autoPlay) {
stopAutoPlay();
} else {
startAutoPlay();
}
}
);
/* ================================
MOBILE SWIPE
================================ */
slider.addEventListener(
"touchstart",
function (event) {
touchStartX =
event.changedTouches[0].screenX;
touching = true;
},
{ passive: true }
);
slider.addEventListener(
"touchend",
function (event) {
if (!touching) {
return;
}
const touchEndX =
event.changedTouches[0].screenX;
const distance =
touchEndX - touchStartX;
if (Math.abs(distance) > 45) {
if (distance < 0) {
nextSlide();
} else {
previousSlide();
}
startAutoPlay();
}
touching = false;
},
{ passive: true }
);
/* ================================
PAUSE WHEN MOUSE IS OVER SLIDER
================================ */
slider.addEventListener(
"mouseenter",
function () {
if (autoPlay) {
clearInterval(autoPlay);
autoPlay = null;
cancelAnimationFrame(
progressAnimation
);
}
}
);
slider.addEventListener(
"mouseleave",
function () {
startAutoPlay();
}
);
/* ================================
START SLIDER
================================ */
updateSlider();
startAutoPlay();
})();
</script>
</body>
</html>
Shri Hari Ayurvedic Clinic
Ayurvedic Care & Wellness
Welcome to Shri Hari Ayurvedic Clinic
Experience a calm and welcoming space focused on Ayurvedic care and wellness. You can use the button below to contact the clinic for an appointment.
Patient Reviews
0 Comments