WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
A Code by programmationant
1510
programmationant
Open In Editor
Video
Publish Your Code
3
Recommended
5 February 2026
Stop copying my codes SGA.
29 November 2025
Error Message: Content Generation Failed
1 August 2025
Office CSS Art
HTML
Copy
Image Slider Effect Website
Switzerland
Renowned for its breathtaking Alpine scenery and precision in craftsmanship
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]); })