CSS: How to Create a Horizontal Screenshot Slider Div
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
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
1 2 |
<h2>Screenshots</h2> <div id="screenshot-slider"><img height="300" alt="Mobile App Screenshot 1" src="app2017screenshot1.jpg" /> <img height="300" alt="Mobile App Screenshot 2" src="app2017screenshot2.jpg" /> <img height="300" alt="Mobile App Screenshot 3" src="app2017screenshot3.jpg" /> <img height="300" alt="Mobile App Screenshot 4" src="app2017screenshot4.jpg" /> <img height="300" alt="Mobile App Screenshot 5" src="app2017screenshot5.jpg" /></div> |
Results