Forum Moderators: open

Message Too Old, No Replies

Horizontal swipeable boxes in mobile mode.

         

born2run

7:37 pm on May 4, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

7:58 pm on May 4, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

2:41 am on May 5, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

2:28 pm on May 5, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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

2:43 pm on May 5, 2018 (gmt 0)



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

born2run

3:16 pm on May 5, 2018 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Anyone heard of code canyon?