WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código de kevekıbhack
759
kevekıbhack
Abrir no Editor
Publique Seu Código
Recomendado
14 March 2025
Formulário de inscrição / login
10 February 2025
Um código por bachir123
2 February 2025
Um código por yefersonsotohenao
HTML
Copy
Image Slider Effect Website
Switzerland
Renowned for its breathtaking Alpine scenery and precision in craftsmanship
See More
Finland
Known for its saunas, lakes, and a deep connection to nature
See More
Iceland
Famous for its stunning geothermal landscapes, waterfalls, and glaciers
See More
Australia
Distinguished by its diverse ecosystems, ranging from beaches to bushland
See More
Netherland
Characterized by its iconic canals, tulip fields, and windmills
See More
Ireland
Known for its lush green landscapes and rich cultural heritage
See More
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { background: #eaeaea; overflow: hidden; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1000px; height: 600px; background: #f5f5f5; box-shadow: 0 30px 50px #dbdbdb; } .container .slide .item { width: 200px; height: 300px; position: absolute; top: 50%; transform: translate(0, -50%); border-radius: 20px; box-shadow: 0 30px 50px #505050; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; display: inline-block; transition: .5s; } .slide .item:nth-child(1), .slide .item:nth-child(2) { top: 0; left: 0; transform: translate(0, 0); border-radius: 0; width: 100%; height: 100%; } .slide .item:nth-child(2) .content { display: block; } .slide .item:nth-child(3) { left: 50%; } .slide .item:nth-child(4) { left: calc(50% + 220px); } .slide .item:nth-child(5) { left: calc(50% + 440px); } .slide .item:nth-child(n + 6) { left: calc(50% + 440px); overflow: hidden; } .item .content { position: absolute; top: 50%; left: 100px; width: 300px; text-align: left; color: #eee; transform: translate(0, -50%); font-family: system-ui; display: none; } .content .name { font-size: 40px; text-transform: uppercase; font-weight: bold; opacity: 0; animation: animate 1s ease-in-out 1 forwards; } .content .description { margin-top: 10px; margin-bottom: 20px; opacity: 0; animation: animate 1s ease-in-out .3s 1 forwards; } .content button { padding: 10px 20px; border: none; cursor: pointer; opacity: 0; animation: animate 1s ease-in-out .6s 1 forwards; } @keyframes animate{ from { opacity: 0; transform: translate(0, 100px); filter: blur(33px); } to { opacity: 1; transform: translate(0); filter: blur(0); } } .button { width: 100%; text-align: center; position: absolute; bottom: 20px; } .button button { width: 40px; height: 35px; border-radius: 8px; border: none; cursor: pointer; margin: 0 5px; border: 1px solid #000; transition: .3s; } .button button:hover { background: #ababab; color: #fff; }
JS
Copy
let next = document.querySelector('.next'); let prev = document.querySelector('.prev'); next.addEventListener('click', function() { let items = document.querySelectorAll('.item'); document.querySelector('.slide').appendChild(items[0]); }) prev.addEventListener('click', function() { let items = document.querySelectorAll('.item'); document.querySelector('.slide').prepend(items[items.length - 1]); })