DevPlatform
Home
Components
Search
Submit
Earn
Login
Sign Up Free
Logo Slider - Preview | DevPlatform
DevPlatform
Categories
Accordion
Animation
Box Shadow
Button
Card
Footer
Form
Gallery
Hero Section
Inputs
Loader
Marquee
Modal
Modules
Navbar
Progress Bar
Radio Buttons
Search-Bar
Sections
Slider
Tab
Timeline
Toggle
Logo Slider
rohit
Feb 13, 2026
2
0
Share
Live Preview
Refresh
Live Editor
HTML
CSS
JS
HTML
CSS
JavaScript
1
<section class="partners"> <h3>Our Partners</h3> <div class="logo-wrapper"> <div class="logo-track"> <!-- First Set --> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Adobe_Corporate_Logo.png"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTIttMhzG-HuMVhAQzMrCFQxBz6m06xKaI1oA&s"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvgA9cp8jr9Oh5HcprgKTFm-6fMQHvboCIgw&s"> <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg"> <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Dropbox_Icon.svg"> <!-- Duplicate for infinite loop --> <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Adobe_Corporate_Logo.png"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTIttMhzG-HuMVhAQzMrCFQxBz6m06xKaI1oA&s"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvgA9cp8jr9Oh5HcprgKTFm-6fMQHvboCIgw&s"> <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg"> <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Dropbox_Icon.svg"> </div> </div> </section>
1
body { margin: 0; background: #f8f9fb; font-family: Arial, sans-serif; } .partners { padding: 60px 0; text-align: center; overflow: hidden; } .partners h3 { font-weight: 500; color: #777; margin-bottom: 40px; position: relative; display: inline-block; } /* Line above text */ .partners h3::before { content: ""; position: absolute; width: 40px; height: 2px; background: #ddd; top: -10px; left: 50%; transform: translateX(-50%); } .logo-wrapper { overflow: hidden; white-space: nowrap; } .logo-track { display: inline-flex; gap: 80px; animation: scroll 20s linear infinite; } .logo-track img { height: 40px; opacity: 0.7; transition: opacity 0.3s ease; } .logo-track img:hover { opacity: 1; } /* Left → Right Animation */ @keyframes scroll { from { transform: translateX(-50%); } to { transform: translateX(0%); } }
1
Comments
0
Want to comment?
Please
login
or
sign up
to post comments.
No comments yet
Be the first to comment on this component!
Comments 0
Want to comment?
Please login or sign up to post comments.
No comments yet
Be the first to comment on this component!