Круглый ползунок справа налево ⇐ CSS

[Anonymous]

Я хочу круговой ползунок, который переходит от справа к левому рендерингу с изображениями в первую очередь 1, во -вторых, 2 и 3 наконец и обратно к 1 при переходе слева направо.
Это мой HTML -код: < /p>






Person Website

< /code>
И это мой css: < /p>
/* Base Styles */
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
transition: all 0.3s ease;
}

/* Dark Mode Styles */
body.dark-mode {
background-color: #121212;
color: #f0f0f0;
}

/* Navigation */
nav {
background-color: black;
width: 100%;
display: flex;
padding: 10px;
transition: background-color 0.3s ease;
}

.dark-mode nav {
background-color: #1e1e1e;
}

nav a {
display: inline-block;
padding: 12px 16px;
background-color: #dddddd;
color: #333;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
}

.dark-mode nav a {
background-color: #333;
color: #f0f0f0;
}

nav a:hover {
background-color: #bbb;
}

.dark-mode nav a:hover {
background-color: #555;
}

nav a:not(:last-child) {
margin-right: 10px;
}

nav a:last-child {
margin-left: auto;
}

/* Theme Toggle Button */
.theme-toggle {
background: none;
border: none;
cursor: pointer;
padding: 8px 12px;
color: #f0f0f0;
font-size: 1.2rem;
margin-left: 10px;
border-radius: 4px;
transition: all 0.3s ease;
}

.theme-toggle:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .theme-toggle {
color: #ffd700;
}

/* Slider Section */
.background-image-section {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
margin-bottom: 30px;
}

.slider {
display: flex;
animation: slide 15s infinite ease-in-out;
}

.slider img {
width: 100%;
height: 400px;
object-fit: cover;
flex-shrink: 0;
}

@keyframes slide {
0%, 25% {
transform: translateX(0%);
}
33.33%, 58.33% {
transform: translateX(-100%);
}
66.66%, 91.66% {
transform: translateX(-200%);
}
100% {
transform: translateX(0%);
}
}

/* Black Box Overlay */
.black-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(165, 42, 42, 0.85);
color: white;
padding: 24px 48px;
border-radius: 8px;
font-size: 3rem;
font-weight: bold;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
}

/* Content Sections */
#AboutUs {
text-align: center;
padding: 40px 20px;
max-width: 800px;
margin: 0 auto;
}

#progressBar {
text-align: center;
padding: 40px 20px;
max-width: 800px;
margin: 0 auto;
}

/* Progress Bars */
progress {
width: 80%;
height: 25px;
margin: 15px 0;
border-radius: 4px;
overflow: hidden;
}

progress::-webkit-progress-bar {
background-color: #f0f0f0;
border-radius: 4px;
}

progress::-webkit-progress-value {
background-color: #4CAF50;
border-radius: 4px;
}

.dark-mode progress::-webkit-progress-bar {
background-color: #333;
}

.dark-mode progress::-webkit-progress-value {
background-color: #2E7D32;
}

/* Theme Toggle Styles */
.theme-toggle {
background: none;
border: none;
cursor: pointer;
padding: 8px;
font-size: 1.2rem;
margin-left: 10px;
position: relative;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
/* Remove any color property here to inherit from nav */
}

.sun-icon, .moon-icon {
position: absolute;
transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Light mode styles */
body:not(.dark-mode) .sun-icon {
opacity: 1;
transform: rotate(0deg);
color: inherit; /* Inherits color from nav a */
}

body:not(.dark-mode) .moon-icon {
opacity: 0;
transform: rotate(-90deg);
}

/* Dark mode styles */
body.dark-mode .sun-icon {
opacity: 0;
transform: rotate(90deg);
}

body.dark-mode .moon-icon {
opacity: 1;
transform: rotate(0deg);
color: #ffd700; /* Gold color for moon */
}

/* Remove these conflicting rules if they exist */
.theme-toggle {
color: #f0f0f0; /* DELETE if present */
}

.dark-mode .theme-toggle {
color: #ffd700; /* DELETE if present */
}

/* Navigation */
nav a {
display: inline-block;
padding: 12px 16px;
background-color: #dddddd;
color: #333; /* This color will be inherited by sun icon */
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
}

.dark-mode nav a {
background-color: #333;
color: #f0f0f0; /* Color for dark mode */
}

/* Slider Section */
.background-image-section {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 30px;
}

.slider {
display: flex;
animation: slide 15s infinite ease-in-out;
align-items: center; /* vertical center */
}

.slider img {
width: 100%;
height: 826px; /* fixed height for all */
object-fit: cover; /* fill space without distortion */
}
< /code>
Это мой файл .js: < /p>
// index.js
function toggleDarkMode() {
const body = document.body;
body.classList.toggle("dark-mode");

// Save preference to localStorage
const isDarkMode = body.classList.contains("dark-mode");
localStorage.setItem("theme", isDarkMode ? "dark" : "light");
}

// Check for saved preference on load
document.addEventListener("DOMContentLoaded", function() {
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("dark-mode");
}
});

document.addEventListener('DOMContentLoaded', function() {
// Target the third image (rc.jpg)
const targetImage = document.querySelector('.slider img[alt="Slide 3"]');

function setSliderHeight() {
if (targetImage && targetImage.naturalHeight) {
const targetHeight = targetImage.naturalHeight;

// Set CSS variable for all images
document.documentElement.style.setProperty(
'--slider-height',
`${targetHeight}px`
);

// Set container height to match
document.querySelector('.background-image-section').style.height =
`${targetHeight}px`;
}
}

// If image is already loaded
if (targetImage.complete) {
setSliderHeight();
}

// Wait for image to load if not cached
targetImage.addEventListener('load', setSliderHeight);

// Optional: Handle window resize
window.addEventListener('resize', function() {
if (targetImage.complete) {
setSliderHeight();
}
});
});
< /code>
Вот короткая запись проблемы:
slider dropbox < /p>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ht-to-left