Image slider in Mobile Web Page

Question

I am developing a responsive web page for a Fashion Brand and in my mock up I put a image slider to go through images of the products.

Should I keep it in the mobile version or switch to a different method? Any recommendations on putting a image slider on a Mobile Web Page? This image slider will change the picture automatically (Maybe it can be considered as image carousel as well).

Answer 1

First of all, take a look at this page, and continue with all links at the bottom of that page. If after that you still want to use sliders or carousels, here you have some advise

1. do NOT autorotate them. Instead, give the user control over the content
2. use big arrows for navigational purposes (previous / next) and if possible, some other navigational option like bullets, thumbs, text or combinations of these. And when I say big, I mean big. How big? Well at least enough for big fat fingers (just in case you're wondering, at least 36px with 48px as standard)
3. The slider should NOT be full screen. Instead, the main area of the page should "invade" the screen. For this purpose, you can use viewport-height of around 80%. This is important because most apps use full screen approaches so if you don't do that, many users will think your site has a horizontal scrolling layout
4. Do NOT include more than 2 links in an item. If possible, try to have only one link, and avoid overlapping with navigational items (arrows, bullets and such) . Very important: don't fall in the temptation of making the whole item clickable, remember that if the whole screen (or most of it) is clickable, then you're effectively negating control to the user since anything they click will lead to an unwanted result

Well, hope this helps!

Answer 2

Your web page is about Fashion so

"NO" you should not remove the image slider as Fashion industry websites rely more on images than text....

I will add few suggestions to Devin's great answer above

Use full page single image slider on Desktops and on mobiles convert it to 3 image carousal where right and left slider images fall out of the screen like the image below

For that use this responsive touch based Owl Carousel (I have used it several times) What i actually mean here is that your user should have some clue that this image can move on touch