WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un codice di kevekıbhack
1327
kevekıbhack
Apri nell'Editor
Video
Pubblica il Tuo Codice
0
Consigliato
7 October 2024
numeri cardinali
12 June 2025
Un codice di diomankeita001
27 May 2025
Un codice di alejandrokundrah
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]); })