Carousel + swiper

Feature Request
1

The bootstrap carousel does not have the swipe.
In the next version, can you integrate the Swiper library or another solution?
http://idangero.us/swiper/demos/
the mobile user, does not press on the arrows, but wants to swipe.
Thanks a lot.
David

2

Hi David,

With Pinegrow, users are able to implement any JS or CSS framework or plugin that you desire into your projects. Like you see on the Swiper site most all things you will find have detailed install, usage, examples, documentation etc. Also you will likely find numerous examples by others discussing the things you wish to implement across the web via examples, tutorials etc.

As for the BootStrap Carousel, you can likewise find examples of how to add Touch and Swipe and how to go about accomplishing that. https://www.google.com/search?q=bootstrap+carousel+touch+swipe

3

The following added to your page with a Bootstrap carousel will make it touch/swipe ready…

First, add this library to the rest of the javascript libraries that are loaded after the footer…

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>

Then under that, add the following javascript…

<script>
	$(".carousel").swipe({
        
    swipe: function(event, direction, distance, duration, fingerCount, fingerData) {

    if (direction == 'left') $(this).carousel('next');
    if (direction == 'right') $(this).carousel('prev');

  	},
  	allowPageScroll:"vertical"

	});
</script>
1 Like
4

Hi David,

As the above suggestion demonstrates, that exact suggestion is seen many times in the various references linked in the above Google Search Link that was provided, along with many other detailed solutions and suggestions.

You will find the same for most any JS or CSS frameworks, libraries or plugins as also hinted above. :wink:

5

I actually had to go through about 6 or 7 different “solutions” to add swipe support to the Bootstrap Carousel before I found one that actually worked. Many of them suggested adding the jQuery mobile library, but I couldn’t get that to work. The first one I found that worked was jquery.touchSwipe.

1 Like
6

Sure, regardless if a “potential” solution is said to work or even does work, proper testing / evaluation are always part of the research / development process when introducing / implementing something new into ones projects / workflow. There are generally many ways to reach a desired outcome and this too is one such case.