Hi,
How do I set up a trigger in Bootstrap 4 carousel to be able to animate image overlay text on slide?
https://getbootstrap.com/docs/4.0/components/carousel/
Example:
https://codepen.io/SitePoint/pen/MJXVMN
Regards & Thanks,
David
BS carousel is not using a scroller, so Scroll scene can’t be used on the slides.
You could listen to slide/slid carousel events and trigger the animation from there:
$('#myCarousel').on('slid.bs.carousel', function (e) {
var slide = //get the slide element from the e
pgia.play(slide, 'MyFancyAnimation');
})
MyFancyAnimation should be defined with the Interactions action on the slide.
Thanks @matjaz,
Could you please elaborate with a clear example? I have uploaded a simple setup with Bootstrap 4 carousel with 3 images and overlay text.
https://yourweblab.nl/interactions-2/
Now I have triggered it on clicking the slider, but what I want is clicking the slider, auto slide and swiping the slider.
I only have to see it once to understand how to do it with Interactions!
Regards & Thanks,
David
@AllMediaLab I updated your example. Note:
- Show and Hide animations are defined on the first slide and applied to the rest
- The actual animations are completely up to you, this is just a quick example using stagger to reveal H2 and P
- Hide animation is not implemented because the Show uses Set to always start from the starting position
- Restart on play is used on Show animation to make sure the animation is always played from start. This is optional.
- We listen to BS slide event, get to and from slides from the event info and call Hide and Show animations on them.
- We need to manually call Show on the first slide when the page loads because the slide event is not triggered for initial display.
- Use Hide as Start on first slide H2 and P to hide them at start so that they can be revealed.
- You could also define custom Show and Hide animations on individual slides if needed.
- I removed responsive image code from your example to make the example here easier to read and removed custom styling to make the example code self contained.
To run the example, just start a new BS4 page and then copy over the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Blank Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
</head>
<body>
<div class="container-fluid p-0 m-0">
<!-- slider area start -->
<!--
####################################################
C A R O U S E L
####################################################
-->
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000" style="z-index:0 !important;">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active slider-overlay" data-pg-ia='{"l":[{"name":"Show","trg":"no","a":{"l":[{"t":"h2,p","l":[{"t":"set","p":0,"d":0,"l":{"y":-100,"autoAlpha":0}},{"t":"tween","p":0.49,"d":0.5,"s":0.5,"l":{"y":0,"autoAlpha":1}}]}]},"rstr":"true"},{"name":"Hide","trg":"no"}]}' data-pg-ia-apply="^.carousel|.carousel-item">
<!--
If you need more browser support use https://scottjehl.github.io/picturefill/
If a picture looks blurry on a retina device you can add a high resolution like this
<source srcset="img/blog-post-1000x600-2.jpg, blog-post-1000x600-2@2x.jpg 2x" media="(min-width: 768px)">
What image sizes should you use? This can help - https://codepen.io/JacobLett/pen/NjramL
-->
<img src="https://images.unsplash.com/photo-1566146991569-696da38bb775?ixid=MXwyMDkyMnwwfDF8c2VhcmNofDR8fHxlbnwwfHx8&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=1000&h=700&fit=crop" class="img-responsive" alt="Image description 3" style="width: 100%; height: 500px; object-fit: cover;">
<div class="carousel-caption">
<div>
<h2 class="text-white" data-pg-ia-hide>Pinegrow Interactions</h2>
<p class="text-white" data-pg-ia-hide>animate whatever you want </p>
<span class="slider btn text-white"><a href="#" data-fancybox class="play-btn play-btn-pink"><i class="far fa-play"></i></a></span>
</div>
</div>
</div>
<!-- /.carousel-item -->
<div class="carousel-item slider-overlay">
<img src="https://images.unsplash.com/photo-1526610423553-5947ca82c3bd?ixid=MXwyMDkyMnwwfDF8c2VhcmNofDU5fHx8ZW58MHx8fA&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=1000&h=700&fit=crop" class="img-responsive" alt="Image description 3" style="width: 100%; height: 500px; object-fit: cover;">
<div class="carousel-caption">
<div>
<h2 class="text-white">Dependency Free</h2>
<p class="text-white">so no more jQuery needed</p>
<span class="slider btn text-white"><a href="#" data-fancybox class="play-btn play-btn-pink"><i class="far fa-play"></i></a></span>
</div>
</div>
</div>
<!-- /.carousel-item -->
<div class="carousel-item slider-overlay">
<img src="https://images.unsplash.com/photo-1587777803265-2942d48153ef?ixid=MXwyMDkyMnwwfDF8c2VhcmNofDg2fHx8ZW58MHx8fA&ixlib=rb-1.2.1q=85&fm=jpg&crop=faces&cs=srgb&w=1000&h=700&fit=crop" class="img-responsive" alt="Image description 3" style="width: 100%; height: 500px; object-fit: cover;">
<div class="carousel-caption">
<div>
<h2 class="text-white">Amazing Results</h2>
<p class="text-white">let your fantasy create </p>
<span class="slider btn text-white"><a href="#" data-fancybox class="play-btn play-btn-pink"><i class="far fa-play"></i></a></span>
</div>
</div>
</div>
<!-- /.carousel-item -->
</div>
<!-- /.carousel-inner -->
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
<!-- /.carousel -->
<!-- slider area end -->
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="pgia/lib/pgia.js"></script>
<script>
//Play Show animation on the active slide and Hide on the previous slide
$('#carousel').on('slide.bs.carousel', function (e, a) {
var slides = e.target.querySelectorAll('.carousel-item');
var from_slide = slides[e.from];
var to_slide = slides[e.to];
pgia.play(from_slide, 'Hide');
pgia.play(to_slide, 'Show');
})
//Animate the first slide when the page is loaded. The content on the first slide has Hide as Start so that it is not visible on load.
$(function() {
var $first_slide = $('#carousel .carousel-item').first();
pgia.play($first_slide.get(0), 'Show');
});
</script>
</body>
</html>
The main part is this:
<script>
//Play Show animation on the active slide and Hide on the previous slide
$('#carousel').on('slide.bs.carousel', function (e, a) {
var slides = e.target.querySelectorAll('.carousel-item');
var from_slide = slides[e.from];
var to_slide = slides[e.to];
pgia.play(from_slide, 'Hide');
pgia.play(to_slide, 'Show');
})
//Animate the first slide when the page is loaded. The content on the first slide has Hide as Start so that it is not visible on load.
$(function() {
var $first_slide = $('#carousel .carousel-item').first();
pgia.play($first_slide.get(0), 'Show');
});
</script>
2 Likes
Thanks very much for the clear instructions!
Made a version with 3 responsive images & srcset (it serves the proper image to the particular device you use including art direction!) a video player (jQuery Fancy Box) on each slide and interactions.
I will leave the link open for others that are interested, when I have some time I will make a Code Pen.
Bootstrap 4 carousel with Pinegrow Interactions overlay text
Regards,
David
1 Like
Hi @Matjaz,
At the moment I’m building a Bootstrap 5 building system including the Bootstrap 5 carousel with Pinegrow Interactions on the overlay text with some blocks for use on multiple websites I make. You made the example of animating text with jQuery.
Would you be so kind to share the same carousel code in Vanilla JavaScript? So I can use it without jQuery? I’m doing a steam course JavaScript as we speak, but I’m not on the proper level yet.
Bootstrap 4 carousel with Pinegrow Interactions overlay text
Bootstrap 5 carousel without Pinegrow Interactions
When I add the same animation to bs-5 with jQuery the carousel and animation only plays by it self but arrows and indicators don’t function anymore.
Hope you have the time to show it!
Regards & Thanks,
David
Hey @AllMediaLab,
I THINK this should work. I’m not sure how the structure of the Bootstrap 5 carousel differs from the Bootstrap 4. This is a literal translation of the jQuery to JavaScript of the script. The only part I’m not sure about is the last line.
document.getElementById('carousel').addEventListener('slide.bs.carousel', function (e, a) {
let slides = e.target.querySelectorAll('.carousel-item');
let from_slide = slides[e.from];
let to_slide = slides[e.to];
pgia.play(from_slide, 'Hide');
pgia.play(to_slide, 'Show');
});
window.addEventListener(‘DOMContentLoaded’, function () {
let slides = document.querySelectorAll('#carousel .carousel-item');
let first_slide = slides[0]
pgia.play(first_slide, 'Show');
});
The last line may need to be altered to
pgia.play(first_slide.get(0), 'Show');
Hard to test without knowing the carousel code you are using. Let me know,
Bob
Bob,
Thanks very much for the quick response!
Tried your code, but there is a tiny error in it when I look in to the console. Have implemented your code in this page, the slider does run but the animation on the text doesn’t work and the click function of the arrows and indicators is gone.
Bootstrap 5 carousel with Pinegrow Interactions
Regards,
David
Hi David,
Yeah - tough to troubleshoot without code. Thanks for the link. One thing I noticed when examining the page is this:
The id for your carousel contains several spaces. This would cause the code to throw an error potentially. I’m going to try to grab the code from your page to use locally and check it out.
Bob
Hey @AllMediaLab,
I took a look at the script. One error was caused by the markdown the forum uses. It changed to quotes around the getElementById('carousel') so they were invalid. The second error was rushing on the first slide code - it should have ben window.addEventListener not document. Duh!!
I corrected the code above and it should work now. Make sure you correct the id of the carousel.
Let me know,
Bob
1 Like
Hi @RobM Bob,
Thanks again!
Update:
Doesn’t work only worked one round(had to change id’s on the arrows and indicators to fix it!) Only this error appears in the console: (index):277 Uncaught SyntaxError: missing ) after argument list
Hope I did’t make a error with correcting the code 
David
Hi @AllMediaLab David,
There is a space after the underscore in the second block of code:
pgia.play(first_slide, 'Show');
Also, you don’t need the line that is after the closing }); that starts with pgia.play.
Bob
1 Like
@RobM
Thanks Bob, You’r a genius! Many thanks! Will keep the page one line for others who are interested in Bootstrap 5 and Interactions. The advantage of Pinegrow is that when you open this page you can edit everything in the Interactions panel and add effects or change effects. I’m going to add this to my build system I created my self (not like the one you downloaded from my website!). When I’m finished with it I like to make a small tutorial of the build system ( if possible even with the new Pinegrow terminal when it works). 