Is it possible to have three events/images in bottom carousel?

[heymarkreeves]

Capturing a few thoughts on this one:

• At narrow widths, 3 slider images would preclude navigation arrows on narrow window desktop screens. (An edge case, but there are instances where this may occur and which would thwart navigation)
• At phone widths, images would be reduced to 100px by 50px or so, which was attempted at an earlier stage, but felt disproportionately small.

My reservation with this one is that we had tried 3 images during the design phase and found that to be less than optimal. And there's a potential navigation/usability issue here.

[desigonz]

After discussing with Kurt, we still feel that it is important to have more than 2 images in the bottom nav, in order to suggest that the carousel continues. One solution could be that the carousel shows a sliver of the third image (like with the Discover navigation), if that is possible.

Could you mock up a version with 3 images in the bottom carousel so that we can compare the two?

[heymarkreeves]

Hi, @desigonz! To confirm: The concern is that if I have >2 Favorites, there's no way of knowing that I can swipe through the footer carousel to see all my favorites. Is that correct?

If you can confirm, I'd like to have us discuss ways of solving for that in addition to fitting three full slides into view.

Thanks!

Mark

[desigonz]

Hi Mark—yes, the concern is that with two or fewer favorites, it's not obvious/intuitive that you can swipe through the carousel. We'd be happy to discuss possible solutions.

[heymarkreeves]

Thanks! I need to ponder these a bit and come up with some options. I see the issue but we need to stay compatible with bxSlider, too. I'll update this when we've bounced around some ideas.

[heymarkreeves]

I think the best option within reach is to add some margin (slideMargin:x) around the slides, so that it's clearer they're distinct thumbnails, and enable narrow prev/next arrows (controls:true). Swiping will still be supported on touch devices, but it will be clearer to the user that they can navigate through their favorites (or related events, etc) here. If the user has 2 favorites, it will be clear that they're distinct thumbnails. If the user has 3 favorites, the next arrow will appear, indicating that they can move forward into the list. Setting infiniteLoop to false (to ensure users don't keep swiping through the same 1 or 2 slides) will also achieve the effect of only showing the next arrow when there are 3+ items until you move forward, at which point the previous arrow will appear.

There is no way to switch to left alignment when less than 2 items are in the corresponding list because positioning is calculated dynamically in bxSlider's JavaScript. This should hopefully be a limited case when a user is just starting to interact with the app. I see the left alignment goal as demonstrating your single favorite is the 1st of n favorites, and showing a space to add more, but this isn't something we can support without new work. We do refresh the UI when you add your first favorite on the Discover screen, and that should cover a good percentage of instances to illustrate to the user that they are able to add to that list and see it grow.

You can see what's supported at http://bxslider.com/examples/carousel-demystified

We turned to bxSlider in the design phase based on the following (from the site). It covers a lot of bases in cross-browser, cross-device, touch device-based development.

• Fully responsive - will adapt to any device
• Horizontal, vertical, and fade modes
• Slides can contain images, video, or HTML content
• Advanced touch / swipe support built-in
• Uses CSS transitions for slide animation (native hardware acceleration!)
• Full callback API and public methods
• Small file size, fully themed, simple to implement
• Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
• Tons of configuration options

Let me know how the margins + arrows solution sounds and we can get that running to look at.

Thanks!

Mark

[SherriAlexander]

Hey there! I've gone ahead and changed the carousel so that it is using square images, so we can fit three thumbnails on mobile (and a bit peeking out on the right). I've added a little bit of space between the items as well. As the width of the browser or device gets wider, it will simply reveal more and more thumbnails as needed. Let me know what you think -- thanks!

[heymarkreeves]

(If you're in the homescreen app, you may need to delete and recreate it to see these updates. It would help to clear your Safari history, cookies and data, via Settings -> Safari, first.)

[desigonz]

Thanks for all of the carousel fixes! It looks really great; we like the left alignment and the non-infinite (finite?) swipe. The thumbnail peeking out on the right also looks really great, but I think it would make more sense if we had two thumbnails with a third peeking out—would you mind mocking that up?

[heymarkreeves]

Hi, @desigonz!

With the thumbnails square, that's going to increase the height of the footer and take away from the content area.

If the request is to go back to the wider thumbnails, so that the heights are shorter, I'll need to check with Sherri on whether the solution we've hit on here can accommodate that.

Can you confirm how you'd see two working? (Taller squares or wider images)

Thanks!

Mark

[SherriAlexander]

Hey there, all!

Here are the options I'm seeing (let me know if I miss any):

1. Keep the thumbnails as squares, keep the same distance between them, but scale them up so that only two squares + part of the third are showing at mobile widths. As Mark mentioned, this would make the footer a bit taller than it is currently, which would cut down on available content space.
2. Keep the thumbnails as squares, keep them the same size, but increase the distance between them so that the third is only partially showing on the right hand side at mobile widths. This keeps the footer height the same as it is currently, though I'm not sure how it will look with that much space between the thumbnails.
3. Keep the height of the images the same, keep the distance between them the same, but change the aspect ratio so that they are horizontal rectangles again instead of squares. Then we would pick a width that allows for 2 thumbnails and a bit of the third showing at mobile. There may be slight differences in the width/height ratio between our thumbnails and the source images (I'd have to test it out to see if it introduces any problems).

[desigonz]

Hi—the third option seems best. We're not wedded to the squares; we'd just like to hint that there are more events when you continue swiping. Thanks!

[SherriAlexander]

I've made the changes for option 3, to have the images be rectangular (I actually reduced the height slightly, in order to make the math for the cropping easier), and I think it's all looking pretty good! Let me know what you think when you get a chance. Thanks!

[desigonz]

We reviewed this and think it looks great! Thanks a million.