Galería de controles deslizantes de League of Legends

2,327 0 Andev.web Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Galería de controles deslizantes de League of Legends

Recomendado

25 September 2026

juego de jinete de nieve 3D

23 September 2025

Fragmento de animación de carga descendente CSS

11 March 2026

Apoderado

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        
    <header>
        <div class="logo">Andev.Web</div>
        <ul class="menu">
            <li>Home</li>
            <li>Blog</li>
            <li>Info</li>
        </ul>
        <div class="search">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
            </svg>
        </div>
    </header>

<div class="slider">
        
        <div class="list">
            <div class="item active">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ashe_0.jpg">
                <div class="content">
                    <p>The Frost Archer</p>
                    <h2>Ashe</h2>

</div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_0.jpg">
                <div class="content">
                    <p>The Nine-Tailed Fox</p>
                    <h2>Ahri</h2>

</div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Garen_0.jpg">
                <div class="content">
                    <p>The Might of Demacia</p>
                    <h2>Garen</h2>

</div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Janna_0.jpg">
                <div class="content">
                    <p>The Storm's Fury</p>
                    <h2>Janna</h2>

</div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_0.jpg">
                <div class="content">
                    <p>The Sinister Blade</p>
                    <h2>Katarina</h2>

</div>
            </div>
        </div>
        
        <div class="arrows">
            <button id="prev"><</button>
            <button id="next">></button>
        </div>
        
        <div class="thumbnail">
            <div class="item active">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ashe_0.jpg">
                <div class="content">
                    Ashe
                </div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ahri_0.jpg">
                <div class="content">
                    Ahri
                </div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Garen_0.jpg">
                <div class="content">
                    Garen
                </div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Janna_0.jpg">
                <div class="content">
                    Janna
                </div>
            </div>
            <div class="item">
                <img src="https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Katarina_0.jpg">
                <div class="content">
                    Katarina
                </div>
            </div>
        </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{
    font-family: Poppins;
    margin: 0;
    background-color: #010101;
    color: #eee;
}
svg{
    width: 25px;
}
header{
    width: 1200px;
    max-width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: 50px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 100;
}
header .logo{
    font-weight: bold;
}
header .menu{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-weight: 500;
}
/* css slider */
.slider{
    height: 100vh;
    margin-top: -50px;
    position: relative;
}
.slider .list .item{
    position: absolute;
    inset: 0 0 0 0;
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}
.slider .list .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slider .list .item::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(
        to top, #000 40%, transparent
    );
}
.slider .list .item .content{
    position: absolute;
    left: 10%;
    top: 20%;
    width: 500px;
    max-width: 80%;
    z-index: 1;
}
.slider .list .item .content p:nth-child(1){
    text-transform: uppercase;
    letter-spacing: 10px;
}
.slider .list .item .content h2{
    font-size: 100px;
    margin: 0;
}
.slider .list .item.active{
    opacity: 1;
    z-index: 10;
}
@keyframes showContent {
    to{
        transform: translateY(0);
        filter: blur(0);
        opacity: 1;
    }
}
.slider .list .item.active p:nth-child(1),
.slider .list .item.active h2,
.slider .list .item.active p:nth-child(3){
    transform: translateY(30px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s .7s ease-in-out 1 forwards;
}
.slider .list .item.active h2{
    animation-delay: 1s;
}
.slider .list .item.active p:nth-child(3){
    animation-duration: 1.3s;
}
.arrows{
    position: absolute;
    top: 30%;
    right: 50px;
    z-index: 100;
}
.arrows button{
    background-color: #eee5;
    border: none;
    font-family: monospace;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    font-size: x-large;
    color: #eee;
    transition: .5s;
}
.arrows button:hover{
    background-color: #eee;
    color: black;
}
.thumbnail{
    position: absolute;
    bottom: 50px;
    z-index: 11;
    display: flex;
    gap: 10px;
    width: 100%;
    height: 250px;
    padding: 0 50px;
    box-sizing: border-box;
    overflow: auto;
    justify-content: center;
}
.thumbnail::-webkit-scrollbar{
    width: 0;
}
.thumbnail .item{
    width: 150px;
    height: 220px;
    filter: brightness(.5);
    transition: .5s;
    flex-shrink: 0;
}
.thumbnail .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.thumbnail .item.active{
    filter: brightness(1.5);
}
.thumbnail .item .content{
    position: absolute;
    inset: auto 10px 10px 10px;
}
@media screen and (max-width: 678px) {
    .thumbnail{
        justify-content: start;
    }
    .slider .list .item .content h2{
        font-size: 60px;
    }
    .arrows{
        top: 10%;
    }
}

let items = document.querySelectorAll('.slider .list .item');
let next = document.getElementById('next');
let prev = document.getElementById('prev');
let thumbnails = document.querySelectorAll('.thumbnail .item');

// config param
let countItem = items.length;
let itemActive = 0;
// event next click
next.onclick = function(){
    itemActive = itemActive + 1;
    if(itemActive >= countItem){
        itemActive = 0;
    }
    showSlider();
}
//event prev click
prev.onclick = function(){
    itemActive = itemActive - 1;
    if(itemActive < 0){
        itemActive = countItem - 1;
    }
    showSlider();
}
// auto run slider
let refreshInterval = setInterval(() => {
    next.click();
}, 5000)
function showSlider(){
    // remove item active old
    let itemActiveOld = document.querySelector('.slider .list .item.active');
    let thumbnailActiveOld = document.querySelector('.thumbnail .item.active');
    itemActiveOld.classList.remove('active');
    thumbnailActiveOld.classList.remove('active');

// active new item
    items[itemActive].classList.add('active');
    thumbnails[itemActive].classList.add('active');

// clear auto time run slider
    clearInterval(refreshInterval);
    refreshInterval = setInterval(() => {
        next.click();
    }, 5000)
}

// click thumbnail
thumbnails.forEach((thumbnail, index) => {
    thumbnail.addEventListener('click', () => {
        itemActive = index;
        showSlider();
    })
})

Comments 0

…