SLIDER CON BOTONES LATERALES Y DE LOCALIZACION.
CODIGO HTML5
<div class="slider-container">
<div class="slider-track">
<div class="slider-slide">
<img src="https://cdn-prod.puprod.indreams.me/"
alt="Resident Evil" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">Shelly</h2>
<p class="slider-description">Conocida como
japonesa creada por Capcom.</p>
</div>
</div>
<div class="slider-slide">
<img src="https://wotpack.ru/wp-content/uploads.jpg"
alt="Silent Hill" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">Silent Hill</h2>
<p class="slider-description">Es una franquicia de videojuegos
publicada por Konami y su subsidiaria,
Konami Digital Entertainment. </p>
</div>
</div>
<div class="slider-slide">
<img src="https://i.ytimg.com/vi/JwbhEACR8Vg/maxresdefault.jpg" alt="Dandys World" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">Dandys World</h2>
<p class="slider-description">Es un juego multijugador de terror con mascotas creado por BlushCrunch Studio</p>
</div>
</div>
<div class="slider-slide">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/46cf2012-9552-434b-8a38-4b3bbc923fbe/diqzaqm-a8a1d40d-d3f0-48a6-8eb6-a0d378fcf6d0.jpg/v1/fill/w_1280,h_960,q_75,strp/dino_shelly_by_sweetzcherrys_diqzaqm-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTYwIiwicGF0aCI6IlwvZlwvNDZjZjIwMTItOTU1Mi00MzRiLThhMzgtNGIzYmJjOTIzZmJlXC9kaXF6YXFtLWE4YTFkNDBkLWQzZjAtNDhhNi04ZWI2LWEwZDM3OGZjZjZkMC5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.LDmrTRgdGZZEKARarcCDHoeakH61QQ2pF5ixbq4B93k" alt="Brawl Stars" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">Brawl Stars</h2>
<p class="slider-description">Es un videojuego multijugador para móviles disponible en Android y iOS, desarrollado por Supercell y lanzado globalmente en 2018.</p>
</div>
</div>
<div class="slider-slide">
<img src="https://media.sketchfab.com/models/53c1f63911ef4c53b0053ce13c23b4fe/thumbnails/53d0ce722e49492d9d09514e9d7f4bfd/31e87f035af1447ab11d7a5f7ad97c95.jpeg" alt="God of War Ragnarok" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">God of War Ragnarok</h2>
<p class="slider-description">Es un videojuego de acción y aventura hack and slash en tercera persona desarrollado por Santa Monica Studio y publicado por Sony Interactive Entertainment.</p>
</div>
</div>
</div>
<div class="slider-nav">
<button class="slider-btn prev">←</button>
<button class="slider-btn next">→</button>
</div>
<div class="slider-dots">
<div class="slider-dot"></div>
<div class="slider-dot"></div>
<div class="slider-dot"></div>
<div class="slider-dot"></div>
<!-- Al querer agregar o quitar una imagen nueva,
tendremos que modificar estos botones,
tienen que ir iguales 5==5 -->
<div class="slider-dot active"></div>
</div>
</div>
CÓDIGO CSS
.slider-container {
width: 100%; /*** ancho de donde esta la imagen, ajuste en px ***/
position: relative;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.slider-track {
display: flex;
transition: transform 0.5s ease-in-out;
height: 100vh; /*** alto de donde esta la imagen,
ajuste a la par de contaniner ***/
}
.slider-slide {
min-width: 100%; /*** no mover este min-width ***/
position: relative;
}
.slider-image {
width: 100%; /*** va a la par de .slider-track ***/
height: 100%; /*** va a la par de .slider-track ***/
object-fit: cover;
}
.slider-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: white;
padding: 30px;
padding-top: 80px;
}
.slider-title {
font-size: 2.2rem;
margin-bottom: 10px;
font-weight: 700;
}
.slider-description {
font-size: 1rem;
line-height: 1.6;
max-width: 70%; /*** ajustar cada que se mueva el ancho en porcentajes,
es para el texto ***/
}
.slider-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
}
.slider-btn {
background-color: rgba(255, 255, 255, 0.7);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.slider-btn:hover {
background-color: rgba(122, 19, 19, 0.9);
transform: scale(1.1);
color: white;
}
.slider-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.slider-dot.active {
background-color: rgb(187, 255, 0);
transform: scale(1.2);
}
CODIGO JS
document.addEventListener('DOMContentLoaded', function() {
const track = document.querySelector('.slider-track');
const slides = document.querySelectorAll('.slider-slide');
const dots = document.querySelectorAll('.slider-dot');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;
let slideWidth = slides[0].clientWidth;
let autoSlideInterval;
const slideCount = slides.length;
// Set up slider
function initSlider() {
slideWidth = slides[0].clientWidth;
track.style.width = `${slideWidth * slideCount}`;
// Set initial active dot
updateDots();
// Start auto slide
startAutoSlide();
// Handle window resize
window.addEventListener('resize', function() {
slideWidth = slides[0].clientWidth;
track.style.width = `${slideWidth * slideCount}`;
goToSlide(currentIndex);
});
}
// Go to specific slide
function goToSlide(index) {
if (index < 0) {
index = slideCount - 1;
} else if (index >= slideCount) {
index = 0;
}
currentIndex = index;
track.style.transform = `translateX(-${slideWidth * currentIndex}px)`;
updateDots();
// Reset auto slide timer
resetAutoSlide();
}
// Update navigation dots
function updateDots() {
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
// Auto sliding
function startAutoSlide() {
autoSlideInterval = setInterval(() => {
goToSlide(currentIndex + 1);
}, 5000);
}
function resetAutoSlide() {
clearInterval(autoSlideInterval);
startAutoSlide();
}
// Event listeners
prevBtn.addEventListener('click', () => {
goToSlide(currentIndex - 1);
});
nextBtn.addEventListener('click', () => {
goToSlide(currentIndex + 1);
});
// Dot navigation
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
goToSlide(index);
});
});
// Pause on hover
track.addEventListener('mouseenter', () => {
clearInterval(autoSlideInterval);
});
track.addEventListener('mouseleave', () => {
resetAutoSlide();
});
// Initialize slider
initSlider();
});
Termina código del slider
