Grab and Pull Carousel Slides on Bootstrap.
Some times we need to add a little behavior to our Bootstrap carousel like for example a grab and pull slides feature. Bootstrap by default doesn’t have this behavior and maybe you as me think about just to change the carousel by other one that support this feature like Slick Carousel, for example. But to me doesn’t was possible just changed because I’ve need to keep compatibility with other dependencies and didn’t make sense to me do a big change only to support this little behavior, so I implemented this little code in order to support this feature and I want to share it with you.
Laguages, libraries and framework used:
- Javascript
- CSS
- HTML
- JQuery (v3.6.0)
- Hammerjs (v2.0.7)
- Bootstrap (v4.6.0)
Well, hands to work:
1- HTML code
The important here to highlight is the data attribute: data-touch on line 15. Setting this data attribute to false is very important because remove the swipe from Bootstrap that provoke a side effect in the slide’s transition.
2- CSS code
The most important css sytles here are the .visible-carousel-item class on the 58 line and the styles from 65 to 73 line, the first one allow us to make the prev and next item visible on the carousel and the second one avoid to drag the image and anchor element with undesirable results, as you can see in this image:
3- Javascript code. Well, is time to become serious
Now is time to write the javascript code. So first of all we are going to declare our global variables.
Global Variables
Explanation:
The three firts variables ($carousel, $carouselInner, $carouselItems) are JQuery object instancies, the carouselInnerWidth has the carousel’s width, the startXCoord is going to allow us to save the start position where you started to grab the slide, the imageLeftCoord reflect how much you move the cursor respect to the left and the lastMoveType allow us to know the moviment direction (right or left). A good practice in javascript respect to the resize event is avoid to execute the code bind to this event in each resize event, so the idea behain this is only execute the code when the resize was done, so the resizeTimeout is going to save the id of the setTimeout function and carouselHammer is going to save the hammer instance.
Responsive carousel support
Explanation:
In order to support a responsive carousel we are going to keep updated the carouselInnerWidth variable.
Starting Carousel cycle
Explanation:
Can be sound crazy and at first time you could be inclinated to use
data-ride=carousel to init the carousel cycle; please don’t do it, at least for Bootstrap 4.6 version, for some reasons you are not be able to pause the carousel cycle forward; is for this reason that I use the Bootstrap’s method carousel.
Hammer events on carousel and helper functions
I think the most important about this code is know the events that we use, so here you have a brew explanation.
Panstart is when you do click and start to move the cursor over the carousel (for this case).
Pantleft is when a Panstart was done and you move the mouse to the left.
Panrightis when a Panstart was done and you move the mouse to the right.
Panend is whe a Panstart and a Panleft or Panright was done and then you stop pressing the mouse over the carousel (for this case).
Press and Pressup are the same as the mouse event. A mouse click is considered a Press event for Hammerjs, if the mouse isn’t moved and transcur a little time (250 miliseconds).
The rest of the code is very auto explantory an ease to understand if you know the events mentioned above.
I hope that you enjoy and find this solution useful. Here you have the github repository link to two branch, the first one is related to this explanation and the second one is a solution when the first child of element the carousel-item is an anchor element that envolve the whole slide:
1- Grab and Pull Bootstrap Slide Carousel
2- Grab and Pull Bootstrap Slide Carousel with an Anchor as element parent.
