Sliding Effects
| Class |
.slide Class Use |
Effect |
| .slide |
Yes |
Slide Left To Right |
| .bs4-slide-y |
Yes |
Slide Vertically |
| .carousel-fade |
Yes |
Fade-in & Fade-out |
| .bs4-zoom-i |
No |
Zoom In |
| .bs4-spread |
No |
Spread In & Out Horizontally |
| .bs4-spread-y |
No |
Spread In & Out Vertically |
| .bs4-rotate-scale-c |
No |
Clockwise Rotate + Scale |
| .bs4-rotate-scale-o |
No |
Clockwise Rotate + Scale Zero |
<!-- Slide Vertically -->
<div id="myCarousel" class="carousel slide bs4-slide-y" data-interval="4000" data-pause="hover">
Transition Timing Function For Slide Effect
| Class |
Class |
Class |
| .bs4-ease |
.bs4-easeInOut |
.bs4-speedy |
| .bs4-slowSpeedy |
.bs4-easeOutInCubic |
.bs4-swing |
| .bs4-easeOutCubic |
.bs4-easeInOutCubic |
.bs4-easeOutCirc |
| .bs4-easeOutExpo |
.bs4-easeInQuad |
.bs4-easeOutQuad |
| .bs4-easeInOutQuad |
.bs4-easeOutQuart |
.bs4-easeInOutQuart |
| .bs4-easeOutQuint |
.bs4-easeInSine |
.bs4-easeOutSine |
| .bs4-easeInOutSine |
|
|
<!-- Transition Timing Function For Slide Effect -->
<div id="myCarousel" class="carousel slide bs4-ease" data-interval="4000" data-pause="hover">
Delay Between Slides
| Attribute |
Value |
Result |
| data-interval |
false or 0 |
Stop Sliding |
| data-interval |
value is greater than 0 or Not A String |
Sliding |
<!-- Delay Between Slides -->
<div id="myCarousel" class="carousel slide" data-interval="4000" data-pause="hover">
Duration of Sliding Effect
| Attribute |
Value |
| data-duration |
value should be greater than 0 or Not A String |
<!-- Delay Between Slides -->
<div id="myCarousel" class="carousel slide" data-interval="4000" data-duration="2000" data-pause="hover">
Slides React To Keyboard
| Attribute |
Value |
Result |
| data-keyboard |
true |
Slides will change through left and right arrow keys of keyboard |
| data-keyboard |
false |
Slides will not change through left and right arrow keys of keyboard |
<!-- Slides React To Keyboard -->
<div id="myCarousel" class="carousel slide" data-interval="4000" data-duration="2000" data-keyboard="false" data-pause="hover">
Touch Swipe
| Class |
Result |
| swipe_x |
Enabled Horizontal Swipe |
| swipe_y |
Enabled Vertical Swipe |
<!-- TouchSwipe Horizontally -->
<div id="myCarousel" class="carousel slide swipe_x" data-interval="4000" data-pause="hover">
Sliding Cycle
| Attribute |
Result |
| data-wrap="true" |
Sliding Continuously |
| data-wrap="false" |
Stop On Last Slide |
<!-- Sliding Cycle -->
<div id="myCarousel" class="carousel slide" data-interval="4000" data-duration="2000" data-wrap="true" data-pause="hover">
Pause Sliding On Mouse Hover
| Attribute |
Result |
| data-pause="hover" |
Stop Sliding on Mouse Hover |
| data-pause="false" |
Continue Sliding even on Mouse Hover |
<!-- Stop Sliding On Mouse Hover -->
<div id="myCarousel" class="carousel slide" data-interval="4000" data-duration="2000" data-pause="hover" data-wrap="true">
MouseWheel
| Class |
Result |
| bs4-mouse-wheel-y |
Enabled Only Upward Scrolling |
| bs4-mouse-wheel-xy |
Enabled Upward & Downward Scrolling |
<!-- MouseWheel Both Direction -->
<div id="myCarousel" class="carousel slide bs4-mouse-wheel-xy " data-interval="4000" data-pause="hover">
04 - Support
Please do not hesitate if you have any queries about this product. We are always there for your help. You can contact us on this e-mail address szthemes53@gmail.com