A beautiful, responsive, infinite auto-scrolling college logo slider with drag support. Perfect for showcasing university partnerships, clients, or sponsors on your Wix website.
- Infinite Scrolling: Seamless, continuous auto-scroll animation
- Drag Support: Users can drag/slide to control the animation
- Responsive Design: Works perfectly on desktop, tablet, and mobile devices
- 2 Rows with Different Speeds: Creates visual interest with alternating scroll directions
- Hover Effects: Interactive hover states for better user engagement
- Zero Dependencies: Pure HTML, CSS, and JavaScript - no frameworks required
- Customizable: Easy to modify colors, sizes, and add your own logos
- SEO Optimized: Includes proper meta tags and semantic HTML
- University of Wisconsin-Eau Claire
- University of Wisconsin-Green Bay
- University of Wisconsin-Madison
- University of Wisconsin-Milwaukee
- University of Minnesota-Duluth
- University of St. Thomas
- Normandale Community College
- University of Minnesota
- Michigan State University
- University of Michigan
- Marquette University
-
Upload Your Files to Wix
- Go to your Wix site editor
- Click on "Add" → "More" → "HTML Code"
- Before embedding, you need to upload the HTML file and logos folder
-
Upload HTML File
- In Wix, go to "Settings" → "Files"
- Upload
wix-embed.html(you may need to upload to a hosting service first) - Or directly copy the HTML code below
-
Upload Logos
- Upload the entire
logos/folder to your Wix Media Manager - Note the URLs/paths of the uploaded logos
- Update the image paths in the HTML code if needed
- Upload the entire
-
Embed the Slider
- Add an "HTML Code" element to your page
- Open
wix-embed.htmland copy the entire content - Paste it into the HTML Code element
- Adjust the width settings if needed
- Click "Update" to save
-
Host the Files
- Upload all files to a web hosting service (GitHub Pages, Netlify, etc.)
- Get the public URL of your
wix-embed.htmlfile
-
Embed in Wix
- Add an "HTML Code" element to your Wix page
- Use this code (replace with your URL):
<iframe
src="YOUR_HOSTED_URL/wix-embed.html"
width="100%"
height="350"
frameborder="0"
scrolling="no"
style="border: none;">
</iframe>-
Copy the Code
- Open
wix-embed.html - Copy everything from
<style>to</script>(lines 30-441) - Also copy the content inside
<body>(lines 280-369)
- Open
-
Add to Wix
- Add an "HTML Code" element
- Paste the CSS and JavaScript in the HTML Code box
- Make sure the logos folder is uploaded to Wix Media Manager
- Update image paths to point to your Wix media URLs
newslider/
├── wix-embed.html # Main HTML file with embedded CSS and JS
├── logos/ # Logo images folder
│ ├── uwec-logo.png # University of Wisconsin-Eau Claire
│ ├── uwgb-logo.png # University of Wisconsin-Green Bay
│ ├── uw-logo.png # University of Wisconsin-Madison
│ ├── uwm-logo.png # University of Wisconsin-Milwaukee
│ ├── umd-logo.png # University of Minnesota-Duluth
│ ├── ust-logo.png # University of St. Thomas
│ ├── nc-logo.png # Normandale Community College
│ ├── umn-logo.png # University of Minnesota
│ ├── msu-logo.png # Michigan State University
│ ├── um-logo.png # University of Michigan
│ └── marquette-logo.png # Marquette University
└── README.md # This file
Edit the CSS in wix-embed.html (lines 103-206):
.college-school-box.your-school-box {
background: #YOUR_COLOR !important;
color: white !important; /* Adjust text color if needed */
}- Add your logo image to the
logos/folder - Add a new school box in the HTML:
<div class="college-school-box your-school-box">
<img src="logos/your-logo.png" alt="Your School Name" class="college-school-logo">
</div>- Add CSS styling for your school (see above)
- Update both the original and duplicate tracks
Modify the animation duration in CSS (lines 38-43):
.college-slider-row {
animation: scroll-left 31.25s linear infinite; /* Change 31.25s to desired duration */
}Modify the .college-school-box properties (lines 71-82):
.college-school-box {
min-width: 320px; /* Adjust width */
height: 140px; /* Adjust height */
padding: 20px 28px; /* Adjust padding */
}The slider automatically adapts to different screen sizes:
- Desktop: Full-size boxes (320px width)
- Tablet (<768px): Medium boxes (200px width)
- Mobile (<480px): Compact boxes (160px width)
- ✅ Chrome/Edge (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Opera (latest)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
This slider includes:
- Semantic HTML5 structure
- Proper alt text for all images
- Meta tags for search engines
- Schema-ready markup
- Fast loading times
- Mobile-first responsive design
This project is free to use and modify. Attribution is appreciated but not required.
Created by Qubetex - Your partner for web development and design solutions.
- Website: qubetex.com
- Fiverr: View Our Services
- Services: Web Development, UI/UX Design, Medical Billing, SEO/Digital Marketing
- 🎨 Custom Website Development
- 📱 Mobile App Development
- 💼 Medical Billing Solutions
- 📊 SEO & Digital Marketing
- 🖥️ UI/UX Design Services
- 🚀 Software Development
- 🤖 AI Solutions
Contributions are welcome! If you have suggestions or improvements:
- Fork this repository
- Create your feature branch
- Commit your changes
- Push to the branch
- Open a Pull Request
For questions or support:
- Email: contact@qubetex.com
- Website: qubetex.com
- Fiverr: Get Professional Help
If this project helped you, please consider:
- Giving it a ⭐ on GitHub
- Sharing it with others
- Hiring us for your next project: Qubetex Fiverr
Made with ❤️ by Qubetex | Get Professional Web Services