Carousel isn't working right

[spapas]

The carousel component is changing the images when the time passes however nothing happens when I click the next/previous buttons to the left/right of the component. No errors are dispalyed on the JS.

Here's the base.html that contains the js that is loaded: https://github.com/spapas/wagtailmu/blob/master/wagtailmu/templates/base.html#L76-L81

I don't have any special code for rendering the streamfield:

{% block content %}
{{ page.body }}
{% endblock content %}

Does it need any special handling ?

[cnk]

Not so much special handling as another undocumented dependency - Bootstrap 4.1.0 I'll put that in the README. In the mean time, here is the JS part of our project's base.html file

  {# Intentionally loaded synchronously, since its a prereq for other scripts_.. #}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  {% compress js %}
    {# This is a custom build of Modernizr created specifically for the features that we actually use in Multitenant. #}
    <script src="{% static 'theme-v6.1/js/modernizr-3.5.0-custom.js' %}"></script>
    <script defer src="{% static 'bootstrap-4.1.0/dist/js/bootstrap.min.js' %}"></script>

    <script defer src="{% static 'jetstream/js/utils.js' %}"></script>
    <script defer src="{% static 'jetstream/js/layouts.js' %}"></script>
	<!-- your other JS files here -->
  {% endcompress %}

[spapas]

Unfortunately even when I added bootstrap 4.1 (I was using bootstrap 4.6 before) I get the same behavior:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.2/dist/js/bootstrap.min.js" ></script>
        <script defer src="{% static 'modernizr-custom.js' %}"></script>
        <script defer src="{% static 'jetstream/js/layouts.js' %}"></script>
        <script defer src="{% static 'jetstream/js/utils.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/wagtailmu.js' %}"></script>

[spapas]

Ok I did some research on this. The carousel it generates is more or less similar to :

<div id="54f7294e-0bd4-4690-8993-8ade1d4e4cde" class="image-carousel carousel carousel-fade slide" data-ride="carousel" data-interval="10001" style="max-height: 350px;">
...
    <a class="image-carousel__control image-carousel__control--prev carousel-control-prev" href="#54f7294e-0bd4-4690-8993-8ade1d4e4cde" role="button" data-slide="prev">
      <span class="image-carousel__control__component carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="image-carousel__control__component sr-only">Previous</span>
    </a>
    <a class="image-carousel__control image-carousel__control--next carousel-control-next" href="#54f7294e-0bd4-4690-8993-8ade1d4e4cde" role="button" data-slide="next">
      <span class="image-carousel__control__component carousel-control-next-icon" aria-hidden="true"></span>
      <span class="image-carousel__control__component sr-only">Next</span>
    </a>
</div>

Plase notice the funny id (54f7294e-0bd4-4690-8993-8ade1d4e4cde) of the carousel that is referenced from the next/prev buttons.

If I change the id to some simple identifier, for example,

<div id="koko" class="image-carousel carousel carousel-fade slide" data-ride="carousel" data-interval="10001" style="max-height: 350px;">
...
    <a class="image-carousel__control image-carousel__control--prev carousel-control-prev" href="#koko" role="button" data-slide="prev">
      <span class="image-carousel__control__component carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="image-carousel__control__component sr-only">Previous</span>
    </a>
    <a class="image-carousel__control image-carousel__control--next carousel-control-next" href="#koko" role="button" data-slide="next">
      <span class="image-carousel__control__component carousel-control-next-icon" aria-hidden="true"></span>
      <span class="image-carousel__control__component sr-only">Next</span>
    </a>
</div>

it works fine!

After more research I understood that the problem is that the generated id in my case starts with a number. It seems that it doesn't work if you've got an id='32'!

I fixed it by adding a prefix to the id, see #10.

[spapas]

Actually, HTML ids (and names) cannot start with a number: https://www.w3.org/TR/html4/types.html#:~:text=ID%20and%20NAME%20tokens%20must,periods%20(%22.%22).

(at least in html4, html5 it seems to allow these ids but probably bootstrap doesn't support em)

[cnk]

My project has ids that look just like your example <div id="54f7294e-0bd4-4690-8993-8ade1d4e4cde" but the buttons work just fine. I'll leave the PR open in case anyone else needs the fix but I am trying to eliminate this package from my current sites and am not willing to make this change while I am still using it.