Logo carousel

An infinite, ticker tape style logo carousel to showcase the company/brand logos associated with your website.

Adapted from code by Adam Fenton.
Logo images by solodev. 🧡Made by @jasonleowsg

Tutorial: How to change images in the carousel

To change the images, follow these steps:1. Click on the Embed element containing the logo carousel code, and scroll down to find this code:<!-- Each image is a grid column with width 8rem and horiztonal margin 2rem = 10rem -->
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image1.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image2.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image3.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image4.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image5.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image6.png">



2. Replace all the 6 URLs of the images with your own URLs to your own images. Watch out to not accidentally delete the double quotes ". For example, for the first image, it should go from this:<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image1.png">To this, after you replace the URL with your own URL:<img class="tickerlogo" src="https://carrd.co/assets/docs/images/brand/png/logo-color-light.png">NOTE: Your URLs have to be direct URL to the image hosted somewhere online - it usually ends with .jpg or .png. Usually Google Drive URLs don’t work. Try using Dropbox, or an image hosting service like ImgBB.com. For images on Google Search or on the internet, you can right-click, Copy Image Address to get the direct image URL.


3. If you don’t need to show 6 images, you can delete the code <img class…> For example, if you just need 5 images, delete this code that says image6:<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image6.png">


4. Once you’ve done it for all the images in that part of the code, scroll down and find this code that says “2nd copy set of images”:<!-- 2nd copy set of images -->
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image1.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image2.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image3.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image4.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image5.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image6.png">Here you simply replace the img URLs with your own image URLs again, following the same instructions in steps #2 and #3. This is meant as a 2nd duplicate of your set of images, so that your carousel can keep scrolling without gaps.


5. Once you’ve done it for all the images in that part of the code, scroll down and find this code that says “3rd copy set of images”:<!-- 3rd copy set of images -->
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image1.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image2.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image3.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image4.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image5.png">
<img class="tickerlogo" src="https://raw.githubusercontent.com/solodev/infinite-logo-carousel/master/images/image6.png">Here you simply replace the img URLs with your own image URLs again, following the same instructions in steps #2 and #3. This is meant as a 3rd duplicate of your set of images, so that your carousel can keep scrolling without gaps.


6. Publish, and done!