<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="custom-cursor"></div>
<div class="slider-container">
<div class="slider">
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f2f5;
cursor: none;
}
.slider-container {
width: 1200px;
position: relative;
overflow: hidden;
}
.slider {
display: flex;
position: relative;
}
.slide {
min-width: 400px;
height: 400px;
margin: 0 10px;
position: relative;
transform: scale(0.8);
opacity: 0.6;
transition: all 0.3s ease-in-out;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
}
.slide.active {
transform: scale(1);
opacity: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.custom-cursor {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid white;
border-radius: 50%;
position: fixed;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
opacity: 0;
transition: transform 0.1s ease;
backdrop-filter: blur(4px);
z-index: 1000;
}
.custom-cursor.left::before {
content: "←";
}
.custom-cursor.right::before {
content: "→";
}
.custom-cursor.active {
transform: scale(1.5);
}
class Slider {
constructor() {
this.container = document.querySelector('.slider-container');
this.slider = document.querySelector('.slider');
this.cursor = document.querySelector('.custom-cursor');
this.slideWidth = 420; // 400px + 20px margin
// Configuration des images
this.images = [
"https://www.santarosaforward.com/img/managed/Image/111/file.jpg",
"https://www.santarosaforward.com/img/managed/Image/111/file.jpg",
"https://www.santarosaforward.com/img/managed/Image/111/file.jpg",
"https://www.santarosaforward.com/img/managed/Image/111/file.jpg",
"https://www.santarosaforward.com/img/managed/Image/111/file.jpg"
];
this.currentIndex = 0;
this.isAnimating = false;
this.init();
}
init() {
this.createSlides();
this.setupEventListeners();
this.positionSlides();
this.startAutoplay();
}
createSlides() {
// Créer trois fois le nombre d'images pour un défilement infini fluide
const totalSlides = this.images.length * 3;
for (let i = 0; i < totalSlides; i++) {
const index = i % this.images.length;
const slide = document.createElement('div');
slide.className = 'slide';
slide.innerHTML = `<img src="${this.images[index]}" alt="Slide ${index + 1}">`;
this.slider.appendChild(slide);
}
}
positionSlides() {
const slides = this.slider.querySelectorAll('.slide');
const offset = (this.container.offsetWidth - this.slideWidth) / 2;
const baseTransform = -this.currentIndex * this.slideWidth + offset;
this.slider.style.transform = `translateX(${baseTransform}px)`;
// Mettre à jour la slide active
slides.forEach((slide, index) => {
const normalizedIndex = this.normalizeIndex(index);
slide.classList.toggle('active', normalizedIndex === this.currentIndex % this.images.length);
});
}
normalizeIndex(index) {
return index % this.images.length;
}
moveSlides(direction) {
if (this.isAnimating) return;
this.isAnimating = true;
const slides = this.slider.querySelectorAll('.slide');
this.currentIndex += direction;
// Animer le mouvement
this.slider.style.transition = 'transform 0.3s ease-out';
this.positionSlides();
// Réinitialiser la position si nécessaire
if (this.currentIndex >= this.images.length * 2 || this.currentIndex <= this.images.length - 1) {
setTimeout(() => {
this.slider.style.transition = 'none';
this.currentIndex = this.currentIndex >= this.images.length * 2
? this.currentIndex - this.images.length
: this.currentIndex + this.images.length;
this.positionSlides();
}, 300);
}
setTimeout(() => {
this.isAnimating = false;
}, 300);
}
setupEventListeners() {
// Mouvement du curseur
document.addEventListener('mousemove', (e) => {
this.cursor.style.left = `${e.clientX - 25}px`;
this.cursor.style.top = `${e.clientY - 25}px`;
const rect = this.container.getBoundingClientRect();
const isLeft = e.clientX < rect.left + rect.width / 2;
this.cursor.classList.toggle('left', isLeft);
this.cursor.classList.toggle('right', !isLeft);
});
// Interaction avec le slider
this.container.addEventListener('mouseenter', () => {
this.cursor.style.opacity = '1';
this.stopAutoplay();
});
this.container.addEventListener('mouseleave', () => {
this.cursor.style.opacity = '0';
this.startAutoplay();
});
this.container.addEventListener('click', (e) => {
const rect = this.container.getBoundingClientRect();
const isLeft = e.clientX < rect.left + rect.width / 2;
this.moveSlides(isLeft ? -1 : 1);
// Animation du curseur
this.cursor.classList.add('active');
setTimeout(() => this.cursor.classList.remove('active'), 300);
});
// Ajuster au redimensionnement
window.addEventListener('resize', () => this.positionSlides());
}
startAutoplay() {
this.stopAutoplay();
this.autoplayInterval = setInterval(() => {
this.moveSlides(1);
}, 3000);
}
stopAutoplay() {
if (this.autoplayInterval) {
clearInterval(this.autoplayInterval);
}
}
}
// Initialiser le slider quand le DOM est chargé
document.addEventListener('DOMContentLoaded', () => {
new Slider();
});
