On parents.com, we previously used the jquery plugin tiny carousel to display various lists of links mostly used to track pregnancy month/week:

For example:

The concept is easy. You have a list of items that you want to scroll horizontally by using nav buttons. In our case, all of the content are lists of links. Since parents.com is responsive, the style of the carousel adapts based on screen width. To make parents.com more mobile friendly, we wanted to make these carousels swipeable on touch devices and I was assigned this task.

My immediate thought here is to add a swipe event to the content area to move items left and right. So I tried out the jquery plugin touchSwipe.

So this pen is close to what I came up with. Load the pen with your touch device and swipe on weeks. If an alert is shown, that means the swipe event is detected.

I noticed the swipe event doesn’t get detected consistently especially when you swipe over the links. I do not understand enough about how the swipe event is captured to do anything about it. I do not believe this will be a good experience for the user.

Another issue is that tiny carousel doesn’t expose public methods for its navigation. I would have to do some ‘hacking’ to make it react to the swipe event.

When I showed this example to my coworker, she wondered whether the swipe plugin is really a good use here. If it’s implemented this way, it would mean no matter how much you swipe, you always get the same amount of scrolling back and forth leveraging tiny carousel.

Great thought! A light bulb popped in my head. Why am I trying so hard to fake the scrolling by using javascript? I should rely on the browser’s native scrolling. Why didn’t I think of overflow: auto?

My idea is to use the multiple layers and the overflow css property to show the horizontal scrolling. Javascript is added on the previous and next links to scroll a certain amount. In my example, the amount is the outerWidth of the content area.

A few things

• Originally I was ONLY going to do this on mobile and continue to use tiny carousel on desktop. The worry was about how ugly the horizontal scrollbar is with overflow: auto.
  
  But I resolved that issue with some CSS 🙂 To pull off this trick, you need three layers. We will call them container, viewport, content.
  • container layer must have overflow: hidden and position: relative
  • viewport layer must have overflow: auto and position: absolute
  • content is the list of links. it should have very long width. for me, I created a list with the style:

    .viewport {
      white-space: nowrap;
    }
    a {
      display: inline-block;
    }
    

    Then your list will be a horizontal no wrap line that will be as wide as necessary. Add a large bottom padding to this list e.g. padding-bottom: 50px. This will hide the scrollar.

  • This pen contains the full example
• A little javascript is leveraged to
  • continue the support on previous and next links as in the tiny carousel plugin
  • allow scrolling to an selected item in the html source on page load
  • I used jQuery in my code but you can easily do this without the help of jQuery.Obviously, this is not written in a modular format. It really should be done better and made into a plugin 🙂 And I might do that.

  What I like about my carousel

  • It is responsive by nature
  • It defers swiping back to the browser’s default scrolling ability
  • It works on any touch device as well as desktop. The scrolling is just hidden on the desktop
  • With tiny carousel, you have a moment of “style flash” when the carousel is generated by javascript. Mine just relies on the default css style of the layers so there is no “style flash”
  • It’s not a traditional image slider but it’s perfect for our unique usage. We just want to scroll some long text horizontally.
  • I got out of the javascript web and thought outside of the box for a simpler solution. YAY!
  • Made another version of tiny carousel without dependency on jQuery.

  Improvement I’d like to make

  Currently the javascript still uses the jQuery animation for the previous & next scrolling effect. I’d like to use CSS animation instead. But I’m not sure how to do that yet…. saw an example here but it’s not exactly applicable to my situation.