I've been using a right float table for my pages to give them a wikipedia like style, but I was hoping to add an image carousel to some of the pages. For example, the Elven Gods in my world are the same deities, but known by different names and look different in each continent, so I wanted to be able to scroll through the different images instead of having to choose just one. Currently when I use the carousel button, it breaks the table from that point onward. Anyone hav suggestions on if/how this could work?
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
Eh... from my testing it looks like you can make it work but it's kinda messy.
When I embedded a slideshow into a table it set the width and height of the slideshow cell in the table to some ridiculous number rendering it unusable. This behavior can be changed via the following CSS targeting: .slick-dotted.slick-slider
So something along these lines, though this impacts all accordions and your content width may be different so your mileage may vary:
That makes it so that you can actually see the accordion cell, but then you run into an opacity issue which makes the images appear washed out, ironically only when the accordion is used inside of a table.
This is easy enough to fix as well via targeting the .slick-slide class, like so:
.slick-slide {opacity: 1;}
Using these changes it does appear to be workable. That said, that statement is predicated on a few things:
You can work around point number 3 there by embedding your tables in a custom class, then targeting it that way, so on the pages with the tables add a div declaring the class, like:
Then the CSS would look like the following:
You can further customize this (and sort of work around points 1 and 2 so that it's specific to just one accordion instead of all of the accordions used in this fashion) by making the custom class declared in the div unique to each page, but then you have to create corresponding CSS lines as well.
It may also be possible to do this via inline CSS on each page but that's never been my strong suit.
Hope this helps!
GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM
GM of Core: The Ashes of Alcarna - April 2020 CotM
GM of Stream of Kairos
Need CSS Help? It may be covered here: Abersade's CSS Hub