WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Home Image Slider Effect Website
2350
kevekıbhack
Open In Editor
Video
Publish Your Code
4
Recommended
8 February 2025
Sliding Text
2 August 2025
tutorial trap
17 May 2024
Weather app
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]); })