Do you still need help?
Hi there!
So, I'm working on my DND Character's profile, and I wanted to write down his relationships with different characters and NPCs, but I didn't want to make it too large - I already feel like the amount on his current profile is too much.
I've seen coding used to make a 'Carousel' - is there any way that I could make one of these to hold several of these relationship boxes into one section? Such as Player Characters, NPCs - Romantic, NPCs - Familial, NPCs - Enemies, etc etc?
Also! The template I used states that 'You are allowed to edit templates in any way you wish. You may fuse my templates together. You may fuse my freebie templates with other templates as long as all creators are credited.'.
I'm so sorry I feel asleep and then forgot to respond in the morning ;0;
If you still need help it would be something like this. Buttons can be anywhere even inside or outside of the carousel. You can have multiple carousels just make sure each carousel id is different from one another same with the buttons. Only one item in each carousel should have active in the class and thats the one you want to pop up first. You cannot put a carousel inside another carousel
slide does a sliding animation when you move to the next slide. You can delete it
data-ride="carousel" automatically makes the carousel slide as soon as someone visits the page, you can delete it
add data-pause="false" if you want to make it stop auto sliding after you click any of the buttons
<div id="CAROUSEL_ID" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- FIRST REL TO POP UP -->
<div class="active carousel-item">
<!-- code here -->
</div>
<div class="carousel-item">
<!-- code here -->
</div>
<!-- copy and paste more here -->
</div>
<!-- LEFT BUTTON -->
<a class="carousel-prev" href="#CAROUSEL_ID" role="button" data-slide="prev"><i class="fa-regular fa-chevron-left"></i></a>
<!-- RIGHT BUTTON -->
<a class="carousel-next" href="#CAROUSEL_ID" role="button" data-slide="next"><i class="fa-regular fa-chevron-right"></i></a>
</div>
You can learn more about carousels here: https://getbootstrap.com/docs/4.0/components/carousel/