Bootstrap
Image carousel buttons #36728
-
|
To start off, I'm very new here and to web development in general, so I'm sorry if this is a very easy answer. I am working through a Udemy course at the moment and for the last big project he is using bootstrap 5 to make an image carousel for different campgrounds. I noticed while comparing the instructor's code and the docs that the instructor is outdated, but when I used code from the documents, the button looked really messed up (code and result attached). What exactly should I be doing to fix this issue? It's supposed to just be a simple clickable text button on top of the image not a massive bar. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 4 replies
-
|
@qoietsammy it looks like you're using some templating engine (aspx?) to allow conditionals within your HTML. When using any sort of templating engine (such as Jinja), something to bear in mind is that any component that uses an It's quite possible that since you've got more than 1 carousel item to display, they're all "stacking" perhaps? Tip: {% for foo in foobar %}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-{{ forloop.counter }}">
Launch demo modal
</button>
<div class="modal fade" id="modal-{{ forloop.counter }}" tabindex="-1" aria-labelledby="modal-{{ forloop.counter }}-label" aria-hidden="true">
....
</div>
{% endfor %} |
Beta Was this translation helpful? Give feedback.
-
|
@TravelTimN Hey there, thank you for your answer. To answer your initial statement, I am using ejs as the templating within html. The code to determine the active image is working with the class attribute, would that possibly need to be the id instead? |
Beta Was this translation helpful? Give feedback.
-
|
I've never used EJS, but it seems to work quite similar to any of the others like Jinja. I tested your code in two places; codepen.io and also an EJS templates playground that I found. Interestingly enough, on codepen, the carousel behaved as I would expect it to. Upon investigating further in the DOM, I found one strange difference. background: none;This doesn't seem to be the case on the EJS playground though for some reason. .carousel-control-next, .carousel-control-prev {
background: none;
} |
Beta Was this translation helpful? Give feedback.
-
|
That seemed to work. I don't actually have a specific .css file for the project, but the instructor copied over some css for leaving a star review on a campground, so I added your line to that and it fixed. Thank you for taking the time to test this and help me out! Much appreciated. |
Beta Was this translation helpful? Give feedback.
-
|
Excellent! |
Beta Was this translation helpful? Give feedback.
@qoietsammy it looks like you're using some templating engine (aspx?) to allow conditionals within your HTML.
<% if(campground.images.length > 1) %{>When using any sort of templating engine (such as Jinja), something to bear in mind is that any component that uses an
id=""attribute (in your case:id="carouselExampleControls") must always be unique. IDs on an HTML page must always be unique, otherwise they won't work properly.It's quite possible that since you've got more than 1 carousel item to display, they're all "stacking" perhaps?
Would you be able to provide a bit more context and code if that doesn't help?
Tip:
something I like to do when in any forloops with a templating engine …