I am using the FieldsBuilder to create a handful of components. One of them is a carousel. Any custom JS that went with it, I was going to enqueue only when this blade template is called but that threw an error. So now I am trying something like this:
@php($uuid = wp_generate_uuid4())
<div class="container">
<div id="{{ $uuid }}" class="carousel slide multi-item-carousel" data-ride="carousel" data-interval="3000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
@php($first = true)
@while(have_rows('logos')) @php(the_row())
<div class="carousel-item col-sm-4{{ $first ? ' active' : '' }}">
<img class="img-fluid mx-auto d-block" src="{{ get_sub_field('logo')['url'] }}">
</div>
@php($first = false)
@endwhile
</div>
</div>
<script>
jQuery(document).ready(function() {
jQuery( '{{ "#" . $uuid }}' ).on('slide.bs.carousel', function(e) {
console.log('slide'); // THIS IS NEVER CALLED
});
});
</script>
This is not working either. How do I get this line to execute? console.log('slide'); // THIS IS NEVER CALLED
Or better yet, what’s the best way to include conditional jquery code?
I have also tried created a route called ‘pageTemplateDefault.js’. This gets executed fine, but not the carousel event.
export default () => {
// scripts here run on the DOM load event
console.log('This is a page with the default template.');
// scripts here fire after init() runs
jQuery( '.multi-item-carousel' ).on('slide.bs.carousel', function() {
console.log('slide');
});
};
BS 4.X is included in sage 10, yes? The carousel starts scrolling just fine on it’s own, just not capturing the event for whatever reason. (Default dependencies still in place)
/**
* External Dependencies
*/
import 'jquery';
import 'bootstrap';
import { router } from 'js-dom-router';