Welcome to Joel Lipman .Com

Preparing Content...


Loading...

Our Website Development Notes

We hope this helps!

Articles // Web Development // Bootstrap

Make bootstrap carousel responsive to swipe

Wednesday, 14th December 2016
2,763 Reads
What?
A quick reminder on how to make the carousel in bootstrap compatible with touch devices like smartphones and tablets.

Why?
Feed back was that the user was unimpressed with the image slideshow. You have to tap on the left and right symbols...

How?
Some will suggest to load the jQueryMobile library but that started messing up the template layouts for me. I really like the solution (and think it should be voted best answer) put forward by Mark Shiraldi:

The code is minimal but does what it needs to do (tested on iOS) and doesn't appear to effect other javascripts. Put this in a JS:
  1. /*! Bootstrap Carousel Swipe jQuery plugin v1.1 | https://github.com/maaaaark/bcSwipe | MIT License */  
  2. !function(t){  
  3. t.fn.bcSwipe=function(e){  
  4. var n={threshold:50};  
  5. return e&&t.extend(n,e),this.each(  
  6. function(){  
  7. function e(t){  
  8. 1==t.touches.length&&(u=t.touches[0].pageX,c=!0,this.addEventListener("touchmove",o,!1))  
  9. }  
  10. function o(e){  
  11. if(c){  
  12. var o=e.touches[0].pageX,i=u-o;Math.abs(i)>=n.threshold&&(h(),t(this).carousel(i>0?"next":"prev"))  
  13. }  
  14. }  
  15. function h(){  
  16. this.removeEventListener("touchmove",o),u=null,c=!1  
  17. }  
  18. var u,c=!1;"ontouchstart"in document.documentElement&&this.addEventListener("touchstart",e,!1)  
  19. }  
  20. ),this  
  21. }  
  22. }(jQuery);  
  23. $('.carousel').bcSwipe({ threshold: 50 });

Source(s):



Recent Comments

Gravatar for Art
Oracle: order by subquery missing right parenthesis
Hello, what if I would like to add rownum to that code, but in my case it's all is subquery? How can I do this ?

20 Jan


Gravatar for Robert
CharIndex Reverse - find occurrence starting from end of string in TSQL
Very helpful thanks! This worked for me as well, and is a little shorter. Not sure if there are drawbacks. SELECT RIGHT(@Haystack,CHARINDEX(@Delimiter,REVERSE(@Haystack))-LEN(@Delimiter))

29 Dec


Gravatar for Translation

27 Dec


Gravatar for Tibbe
JComments 2.3.0 with ReCaptcha in Joomla 2.5.x
Hi there, This looks like a great solution to get rid of spam comments. How to integrate this in Joomla 3.x? Step 2 I did in settings.xml, but no result in frontend. Kind Regards, Tibbe

16 Dec


Gravatar for sach|n
SSRS Repeat Headers in PDF Report
Yes its working for me..thnx Joel.

7 Oct