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:
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.
