Horizontal swipeable boxes in mobile mode.

[born2run]

In mobile mode I want a few article boxes (image/title text) to run horizontally (swipes with finger) Is this hard to implement in responsive design? I've seen this in app design but not in responsive much (seen in android/ios apps)

Any pointers or web resource that has good ways to do this? Thanks!

[NickMNS]

In its most basic form you can simply style a div to:

 overflow-x: scroll 

If you want something a more polished just look for a slider or carousel widget. I like the AMP carousel widget, I use it on both AMP and non-AMP pages.

[born2run]

So I don't have amp on my site nickmns and you say it's working on the non-amp pages too. Can the images have a link (to news article) and scroll with a swipe with the finger on the mobile? Some details would be useful. Thanks!

[NickMNS]

I am somewhat reluctant to recommend the AMP widget as I'm not sure how kosher it is to use it on pages without any AMP one them. It works but it is not officially supported, so do it at your own risk. That said you can add whatever you want in the carousel. Simply replace to amp-img tags in the example with div's with what ever content you want. I imagine that this would be the case for any widget used.

<amp-carousel height="300"
 layout="fixed-height"
 type="carousel">
 <amp-img src="/img/image1.jpg"
  width="400"
  height="300"
  alt="a sample image"></amp-img>
 <amp-img src="/img/image2.jpg"
  width="400"
  height="300"
  alt="another sample image"></amp-img>
 <amp-img src="/img/image3.jpg"
  width="400"
  height="300"
  alt="and another sample image"></amp-img>
</amp-carousel>

[Steven29]

Try this one [kenwheeler.github.io...]

[born2run]

Anyone heard of code canyon?