SLIDER CON BOTONES LATERALES Y DE LOCALIZACION.
CODIGO HTML
<div class="slider-container">
<div class="slider-track">
<div class="slider-slide">
<img src="https://cdn-prod.puprod.indreams.me/eaaabeae0956b6e2c8ac77d4f973a2ef" alt="Resident Evil" class="slider-image">
<div class="slider-content">
<h2 class="slider-title">Shelly</h2>
<p class="slider-description">Conocida también como Biohazard, es una serie de videojuegos de terror y una franquicia de medios japonesa creada por Capcom.</p>
</div>
</div>
<div class="slider-slide">
<img src="https://wotpack.ru/wp-content/uploads/2024/12/kody-v-dandys-world-na-dekabr-2024.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 de terror y supervivencia creada por Keiichiro Toyama y 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>
<div id="navegacion">
<ul class="nav">
<li><a href=""><img src="https://images.icon-icons.com/585/PNG/256/HomeServer_icon-icons.com_55232.png" alt=""></a></li>
<li><a href=""><img src="https://images.icon-icons.com/585/PNG/96/HomeServer_icon-icons.com_55232.png" alt=""></a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a>
<ul>
<li><a href="">Sub-menu1</a></li>
<li><a href="">Sub-menu2</a></li>
<li><a href="">Sub-menu3</a>
<ul>
<li><a href="">Sub-menu1</a></li>
<li><a href="">Sub-menu2</a></li>
<li><a href="">Sub-menu3</a></li>
<li><a href="">Sub-menu4</a></li>
</ul>
</li>
<li><a href="">Sub-menu4</a></li>
</ul>
</li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu5</a>
<ul>
<li><a href="">Sub-menu1</a></li>
<li><a href="">Sub-menu2</a></li>
<li><a href="">Sub-menu3</a>
<ul>
<li><a href="">Sub-menu1</a></li>
<li><a href="">Sub-menu2</a></li>
<li><a href="">Sub-menu3</a></li>
<li><a href="">Sub-menu4</a>
<ul>
<li><a href="">Sub-menu1</a></li>
<li><a href="">Sub-menu2</a></li>
<li><a href="">Sub-menu3</a></li>
<li><a href="">Sub-menu4</a></li>
<li><a href="">Sub-menu5</a></li>
<li><a href="">Sub-menu6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Sub-menu4</a></li>
</ul>
</li>
</ul>
</li>
</li>
<li><a href=""><img src="https://images.icon-icons.com/585/PNG/96/HomeServer_icon-icons.com_55232.png" alt=""></a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a>
<ul>
<li><a href="">Sub-menu1</a></li>
<li><a href="">Sub-menu2</a>
<ul>
<li><a href="">Sub-menu1</a></li>
<li><a href="">Sub-menu2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
<li><a href=""><img src="https://images.icon-icons.com/585/PNG/96/HomeServer_icon-icons.com_55232.png" alt=""></a></li>
<li><a href=""><img src="https://images.icon-icons.com/585/PNG/96/HomeServer_icon-icons.com_55232.png" alt=""></a></li>
</ul>
</div>
CODIGO CSS
.slider-container {
width: 100%; /*** ancho de sitio ***/
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 sitio ***/
}
.slider-slide {
min-width: 100%;
position: relative;
}
.slider-image {
width: 100%;
height: 100%;
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%;
}
.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);
}
#navegacion{
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
ul, ol {
list-style:none;
}
.nav > li {
width: auto;
height: auto;
float: left;
border: 1px solid white;
}
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding: 10px 100px;
display:block;
}
.nav li a:hover {
background-color:#434343;
}
.nav li ul {
display:none;
position:absolute;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
border: 1px solid white;
}
.nav li ul li ul {
right:-274.7px; /* lejos o cercas el submenu*/
top:0px;
}
.nav img{
height: 50px;
object-fit: contain;
}
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();
});
No hay comentarios:
Publicar un comentario