Initial Carousel Swipe Support

[ctalkington]

I have made the needed changes to enable basic swiping on mobile devices. This should be a start for the feature requested in #2468. Hopefully with a little testing this can become a staple feature.

Functionality:

• Basic Back / Forward Swiping of Slides
• Cycle Stops on Swipe
• Ability to hide controls when touch is detected and enabled

Tested on:

• Android 2.3.7 (webkit)
• iPhone 4S and iPad 2 (mobile safari)
• Would love to hear from some iOS users.

I am hosting a demo site to make it easier to test: bootstrap.simplydev.com

Code inspired and adapted from:
http://wowmotty.blogspot.com/2011/10/adding-swipe-support.html

[ibrent]

Very cool thanks. I looked at your demo URL and think that you have the swipe events backwards. When swiping left to right for instance, I expect it to reveal the next LEFT slide, like sliding cards. Look at how swipejs reacts on your touch phone: www.swipejs.com

Apart from that, it would also be cool to show/hide buttons depending on touch availability or not. AHhhhh wait, wow yeah ok. I see your functions that you added. Very nice. Exactly what I was thinking.

Feedback: iOS works fine. Latest Mobile Safari on iPhone 4s and iPad2.

[ctalkington]

ah i see what you mean about events. patch coming soon ;)

[ibrent]

Awesome. Works perfectly now. Thank you Chris!!

On Mar 17, 2012, at 4:12 PM, Chris Talkington [email protected] wrote:

ah i see what you mean about events. patch coming soon ;)

---

Reply to this email directly or view it on GitHub:
#2640 (comment)

[ctalkington]

no problem. i am looking into the ability to allow vertical page scrolling on the carousel now. think ive almost got it once I can prevent it from scrolling left and right when trying to swipe.

[ibrent]

Very cool Chris. It works great. As a matter of fact, it works better than the recent v2.0.2 release. There is now a bug where the images don't resize - they stay the same and overflow. Yours resize - I assume you are using the 2.01 release?

#2639

I'm gonna revert back to that older version and use your new touch carousel tomorrow.

[ctalkington]

hum i started from commit 8e0afbe so really not sure what would be different, to my knowledge its 2.0.2. basically just branched from that and then edited js and updated the docs js file and uploaded the docs folder.

[ibrent]

Hmmm ok. Yeah I am just seeing the same issues other are seeing with images not resizing. Something is out of sync. Could be my brain. It's getting late. :D

---

From: Chris Talkington [email protected]
To: Brent [email protected]
Sent: Saturday, March 17, 2012 10:49 PM
Subject: Re: [bootstrap] Initial Carousel Swipe Support (#2640)

hum i started from commit 8e0afbe so really not sure what would be different, to my knowledge its 2.0.2. basically just branched from that and then edited js and updated the docs js file and uploaded the docs folder.

---

Reply to this email directly or view it on GitHub:
#2640 (comment)

[ibrent]

Wow great. Vertical scroll works great using your simplydev demo page on iOS. Nice job and fast !

I have two questions for ya:

1. Are the only changes you made to the bootstrap-carousel.js file? Or was there more? I want to download your changes locally and test it there too.
2. Is there a position that the carousel returns so that you know you are currently at slide 3 for instance. Like $('#myCarousel').position or something? I don't see anything in the docs about it but hope that there is something. I know there is a way to slide directly to a certain slide, but I'm looking for current slide shown.

Thanks Chris. You are a rockstar. This is fast work. And it works well !! :D

[ctalkington]

1. Besides docs, yes. no css changes
2. I know there's logic to find next slide but don't believe there is a public method to access it.

[ibrent]

Hmmmm ok cool. Thanks for the reply. I was hoping that they had events that I could look at like the tabs do.

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

[ctalkington]

hum, there is a slid event, really haven't worked with it though.

[ibrent]

Yeah I have used that, but can't get it to tell me what slide I am on. I was thinking of hackish ways to upon slid, look for the DIV with classname=active , but that feels like hack-city to me. Do you recommend I go down that road? Your kungfu is better than mine. :D

[ctalkington]

@ibrent bit busy on some paid projects but I will see about tweaking up the js a bit to support feeding back current slides since it should know them at that point but not giving them back. would you make an issue about slid not passing current slide id that I can refer to?

[fat]

while this is super cool, not something we're going to move into core just yet. Might make sense to get a bootstrap-touch repo going at some point - something similar to http://www.jqtouch.com/

[ctalkington]

bit disappointed as this change could help a lot of people from having to use other bloated carousels just for basic swipe support when carousel is lightweight and works well minus swipe support. I mean the code was pretty self contained and I don't see any harm in having it in core.

that said would you be open to having the logic as say bootstrap-touch.js and as we add touch related things have all touch logic isolated to a single javascript plugin?

[benrhere]

I'm wondering if anyone has tried this with bootstrap 2.1.1?

[memibeltrame]

Hi Chris - Thanks for the work, just awesome!
It seems to have a problem with the interval option if it is set to false.
I changed the Cycle function to this to make it work again:

cycle: function () {
        if(this.options.interval != false) {
            this.interval = setInterval($.proxy(this.next, this), this.options.interval);
        }
        return this
    }

[ixisio]

drop in replacement for twbs carousel to enable gestures on touch devices:
https://github.com/ixisio/bootstrap-touch-carousel

have fun,
Cheers

[ixisio]

@fat

Might make sense to get a bootstrap-touch repo going at some point - something similar to http://www.jqtouch.com/

Think I will start something like this, and Carousel is the first component (https://github.com/ixisio/bootstrap-touch-carousel). Cool idea!