This simple code uses HTML and CSS, with no JavaScript, to generate an image ad bar that will scroll horizontally on desktop and be swipeable on mobile browsers.

The CSS:


    #scrollbox {
        margin: 10px auto 20px auto;
        width: 100%;
        height: auto;
        display: inline-flex;
        overflow: auto;
        background: #FFF;
    }

    #scrollbox img { padding: 0 5px 0 5px }

 

The HTML:


    <div id="scrollbox">
        <a href="#" target="_blank" rel="sponsored"><img src="Images/scrollbox/1.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank" rel="sponsored"><img src="Images/scrollbox/2.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank" rel="sponsored"><img src="Images/scrollbox/3.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank" rel="sponsored"><img src="Images/scrollbox/4.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank" rel="sponsored"><img src="Images/scrollbox/5.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank" rel="sponsored"><img src="Images/scrollbox/6.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
        <a href="#" target="_blank" rel="sponsored"><img src="Images/scrollbox/7.webp" width="250" height="209" style="border: 0" alt="demo image"></a>
    </div>

The Effect:

demo image demo image demo image demo image demo image demo image demo image

Each colored box represents an image ad that you need to create. Each image anchors a text link made with the Site Stripe. This is perfectly allowable as long as the guidelines for creatives are followed.

The code I posted above is the bare basics and most webmasters will probably want to improve upon it. As it is, it's a simple, pure HTML and CSS solution that contains no JS for ad blockers to block or to slow down the page load times.

 

The gray-bearded author outdoors with a small wild bird on his shoulder and a Buy Me a Coffee tip link
buymeacoffee.com/rjmweb