ixisio / bootstrap-touch-carousel Goto Github PK

write more important unit test..

I want to offer touch device users the possibility to tap to advance the carousel alongside of the swiping and dragging possibilities.
So when I show the hidden carousel-controls it works, but they make the carousel advance or go back two slides i.s.o. one.

Important info in order for evaluation and preventing conflicts / duplication of libraries. Also important for devs who do their own builds, like me.

Hi!

Please, need:
Touch Swipe in Carousel Bootstrap 4 (for Desktop and Mobile).

Example 1: http://www.masterslider.com/wordpress/pro/templates/creative-agency-slider/
Example 2: http://www.masterslider.com/features/templates/staff-carousel-version-2/
Example 3: http://www.masterslider.com/wordpress/pro/templates/fashion-slider/

I also wrote here: twbs/bootstrap#23536

Hi,

Really like this add-on to the carousel! Works perfect.
Would it not be "easy" to support d&d on desktop browsers?

Cause jquery is definitely there, it is maybe possible to wrap your touchevents in $carousel.on('mousedown', touchstart); $carousel.on('mousemove', touchmove); $carousel.on('mouseup', touchend);

I did not look at your code right now and surely the events you get back are slightly different, but it would also be really nice feature :)

Thanks in advance for an reply
Chris

Hammer.js has been

completely rewritten, with reusable gesture recognizers, and better support for the recent mobile browsers by making use of the touch-action css property when possible

Why hammer.js has a new dress?
https://github.com/hammerjs/hammer.js/wiki/Why-the-rewrite

The API has also been changed, so the plugin needs to adapt to this new API, test functionality and update unit-tests.

moved issue from @playaz to right repo

Great tool but when I add this, for some reason our original indicators dissapear. I have tried copying over our css for indicators position to your css but indicator is only on correct position until first slide moves, then it dissapears

Any suggestions or is this not working?

Great solution on the touch carousel, it works quite brilliantly. However, if you include a video in the carousel, once you swipe to it, you can't swipe away.

It's in the carousel as a bootstrap responsive embed iframe.

I haven't been able to get a solution to where you can still swipe away, but also play the video.

Any suggestions/ideas, or do you have something coming down the pipeline?

Hi, awesome drop-in plugin! I think you can resolve some of the issues in an easy way by using media queries to add "touch-carousel" class only on mobile devices, or by trying to detect whether the device has touch events.

This way, the desktop carousel will continue to wrap and display the next/previous arrows (where they make sense), and on the mobile device you can hide all unnecessary controls and enable swiping for elements with the "touch-carousel" class.

I would like to import Bootstrap followed by Bootstrap Touch Carousel into my SASS file and then override some styles. With SASS being so popular, is there any chance of a .scss file. Even just a copy of the .css file renamed to .scss would work fine.

I tried using this sample on Microsoft Edge and the touch functionality does not work.
http://ixisio.github.io/bootstrap-touch-carousel/

I'm using rails 4 with turbo links and bootstrap 3.

I've got the touch carousel to work great, problem is that when using turbolinks it just uses a js to replace the body so you're not constantly reloading css and js for everypage.

The issue it creates is that in order for it to work on the next page after clicking the link to open the page, it uses the default bootstrap carousel buttons, until you press the 'next' button then touch carousel kicks in. I'd rather have a method to reload the script. Here's an example of how I can load other scripts with tubrolinks.

var ready;

ready = function() {
return $(document).on('click', '.edit_task input[type=checkbox]', function() {
return $(this).parent('form').submit();
});
};

$(document).ready(ready);

$(document).on('page:load', ready);

It won't grab the v0.8.0 version. Can this be resolved?
Also a small issue, can you post full and min version, as well. The current one is min only.

Awesome coding, thank you.

IIFE: http://benalman.com/news/2010/11/immediately-invoked-function-expression/
Currently when concatenating and minifying can result in JS errors. It does in my case

TWBS uses the following pattern to prevent this:

+function ($) {
    // library code, e.g carousel, transitions
}(jQuery);

This also makes sure that $ is defined inside the IFEE and is what we expect it to be.

why? unusual...

Is it just me or is it really difficult to change slides? It seems you have to very particular in your swiping motion and timing. Immediately after completing a swipe you have to wait a second or so before going again, and you need to make sure you slide about 80% of the screen. I'm on a Nexus 5, anyone else experiencing this?

Uncaught TypeError: undefined is not a function bootstrap-touch-carousel.js:11
g._regTouchGestures bootstrap-touch-carousel.js:11
g bootstrap-touch-carousel.js:11
(anonymous function) bootstrap-touch-carousel.js:11
m.extend.each jquery.1.11.1.js:2
m.fn.m.each jquery.1.11.1.js:2
a.fn.carousel bootstrap-touch-carousel.js:11

I'm using requirejs and it looks like hammer is not injected

• flexible vs static
• autocycling
• captions on/off
• ...

Hello, I tried the library and just discover the wrap property doesn't work, not even in the example here: http://www.andreasklein.org/articles/bootstrap-touch
When goes in mobile version the carousel stops in the last slider.
I think is related with: transform: translate3d(X%, 0px, 0px)
Any idea?
Thx,

Hello, please implement a "pause on hover" feature like on the standard Bootstrap carousel.

Once you get down to the carousel on the page, left and right scrolls through the items, but vertical swipes do nothing, where they should be able to continue to allow the user to scroll. Elastislide (although completely different), had this same issue. Is this something coming from hammer or bootstrap itself?

I have tried this on a smartphone and a touchscreen laptop.

For example, the JS script (I tried it without the touchcarousel script and it worked fine) is setting styles on carousel item divs (example: style="width: 1140px;") which I didn't have before. That results in the items arranging oddly when I change phone orientation or resize the browser.

If I try to remove the inline styles all the items come up right next to each other without scrolling.

Is this a problem with the touch script, js, or just might be a bug in my code?

P.S. my carousel constantly adapts it's width to a bootstrap container.

Hello, i'm use touch-carousel and in script use string
$('.carousel').carousel('cycle') for endless loop work. if i click on arrows it's work. but touch not work. try it on white banner http://stroyresurs.b23.netex.pro/ (this is preview development)

In my case, in the circumstances it is possible that BS carousel is used but only the 1 slide provided.

It seems like "bootstrap-touch-carousel" will still allow some dragging movement when there is only the 1 slide.

Is it possible that "bootstrap-touch-carousel" does not run in this situation?

Is it possible to achieve this responsive behavior, described in the attached image. Basically there is an image and a text. Image never gets resized, but the text area gets smaller eventually the text wraps around the image, and then it is completely underneath the image.

Thank you.

Right now you cannot swipe over the indicators and next/previous arrows (for those who choose to display the arrows on mobile). At first I thought swipe wasn't working, but I realized I was swiping on top of the carousel-indicators div. Please enable swipe across the carousel-indicators and carousel-control divs as well to make swiping more reliable.

I have create a carousel inside modal popup which will display when I click on a button.

First time that I click on a button to show the modal, the carousal inside modal is very small.

Then I need to rotate my device to landscape then portrait to make it works like it should.

I have tried it on Bootstrap 3 with my mobile phone Nexus5. The plugin can't determine the size of modal because it hidden?? Could you please guide or fix?

Thanks in advanced

I couldn't get this to work until I added the 'touch-carousel' class to my carousel. This is not found in the documentation. Am I missing something?

I need to click first the next or previous button in order the touch event to work,

On the demo page slider buttons disappear after a short moment. But that's not happening for me. Although it starts after clicking once on next or prev buttons.
Is there a function to call to force-start touch UI (with no next/prev buttons)? If not, please add it.

I did try with $('.left').click(); with no luck.

I have links inside the bootstrap carousel panels and these can be clicked through on all devices I've tried except for Kindle when using bootstrap-touch-carousel.

I can confirm this by removing the script and the links will then work.

The links show that they have been pressed but nothing happens. However, if you hold the link button then the pop up will show the link navigation options, eg. open in new tab etc.

Otherwise a fine script!

Nexus 4;

The links for carousel images do not work- tags enclosed in - tapping to activate the link does nothing.

Scenario:
I have added bootstrap-touch-carousel library on page. page is having multiple bootstrap carousel. So its applying touch implementation on both. I would like to apply touch carousel only on one carousel. Please guide how do I remove touch carousel implementation from other carousel.

See twbs wrap option http://getbootstrap.com/javascript/#carousel-usage

Captions appear to be hidden by default when using this plug-in? Captions work fine in desktop, but not on mobile.

Indicator pills are to small/tiny for (fat) fingers.
Increase the size and give them some more margins..

refers to #27 (Update to Hammer.js 2.0)

On the example page when viewed on an iPad 2, the content within each ".item" does not show.

(It does swipe, though.)

Halo,
I have an issue with your carousel on mobile if use auto rotation, image not responsive and looks broken.
Have a solution with this?

When auto scroll is enabled the carousel jumps slides with a touch action. Any thoughts on how to resolve this? Should I disable auto scroll on a touch event or update the scroll index?