CSS: How to Create a Horizontal Screenshot Slider Div

March 21, 2017/ King Rosales / Blog / 0 comments

I created a new landing page for a mobile app we were promoting. Since we wanted our page to come up in Google SERP and we had a version for iOS and Android, we wanted the landing page to be simple but also give visitors a sneak peek into the app just as you would find on the Apple iTunes Store or Google Play Store.

My solution uses css to transform a div into a horizontal scrolling window without the use of an iframe.

CSS

#screenshot-slider {overflow:auto;height:360px;background:#ccc;white-space:nowrap;padding:20px;}
#screenshot-slider img {display:inline-block;margin-right:15px;}

1 2	#screenshot-slider {overflow:auto;height:360px;background:#ccc;white-space:nowrap;padding:20px;} #screenshot-slider img {display:inline-block;margin-right:15px;}

HTML

<h2>Screenshots</h2>
<div id="screenshot-slider"><img height="300" alt="Mobile App Screenshot 1" src="app2017screenshot1.jpg" />&nbsp;<img height="300" alt="Mobile App Screenshot 2" src="app2017screenshot2.jpg" />&nbsp;<img height="300" alt="Mobile App Screenshot 3" src="app2017screenshot3.jpg" />&nbsp;<img height="300" alt="Mobile App Screenshot 4" src="app2017screenshot4.jpg" />&nbsp;<img height="300" alt="Mobile App Screenshot 5" src="app2017screenshot5.jpg" /></div>