How to add an Autoscroll Logo Carousel in Ghost Page

[tuanphan]

To add an Autoscroll Logo Carousel in Ghost Page, you can use 2 options.

#Option 1. Use HTML/CSS/JavaScript code

#1. First, edit page where you want to add Autoscroll Logo Carousel > Click Plus > Choose HTML

#2. Paste this code. Replace Pixabay with your logo image url.

<div class="scrolling-text-container">
        <div class="scrolling-text">
            <img src="https://cdn.pixabay.com/photo/2024/05/26/15/27/kid-8788962_1280.jpg"/>
            <img src="https://cdn.pixabay.com/photo/2019/01/18/20/08/heart-3940561_1280.jpg"/>
          <img src="https://cdn.pixabay.com/photo/2022/01/15/14/01/ice-crystals-6939641_1280.jpg"/>
        </div>
    </div>
    <style>
      /* Scrolling text CSS */
.scrolling-text-container {
            position: relative;
            width: 100%;
            overflow: hidden;
  height: 50px;
        }
        .scrolling-text {
            position: absolute;
            display: flex;
            animation: scroll-left 10s linear infinite;
        }
        .scrolling-text img {
            white-space: nowrap;
          width: 50px;
          margin-left: 20px;
        }
        @keyframes scroll-left {
            from {
                transform: translateX(0%);
            }
            to {
                transform: translateX(-50%);
            }
        }
    </style>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const scrollingText = document.querySelector('.scrolling-text');
        let originalContent = scrollingText.innerHTML;
        for (let i = 0; i < 9; i++) { 
            scrollingText.innerHTML += originalContent;
        }
    });
</script>

#3. Result

#4. To adjust Logo size, you can adjust this line.

To change space between logos, change this line.

#Option 2. Use tool

If you are not familiar with code or don’t want to use code, you can use this free tool to add an autoscroll logo carousel to Ghost.

#1. First, access this free tool. Choose Infinite Logo Carousel and click Continue with this template.

#2. Upload all logos and click Add to website for free

#3. Click Publish on top right

#4. Choose Free Plan & Copy Embed code

#5. Use HTML feature in Ghost Blog

and paste your embed code

#6. Result

#7. To adjust logo size, you can adjust these option

Drag this slider.