Image carousel in a table?


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?


  • Abersade
    Posts: 420

    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:

    .slick-dotted.slick-slider {
    max-height: 500px;
    max-width: 800px;}


    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;}

    .slick-slide {opacity: 1;}

    Using these changes it does appear to be workable. That said, that statement is predicated on a few things:

    1. The images are all the same height

    2. The images are all the same width

    3. All of the accordions on the site are used for this purpose and this purpose alone

    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:

    <div class=customtable>TABLE CONTENT</div>

    Then the CSS would look like the following:


    /* Accordion Fun Times */
    .customtable .slick-dotted.slick-slider {
    max-height: 500px;
    max-width: 800px;}
    .customtable .slick-slide {opacity: 1;}

    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

Sign In or Register to comment.

April 2024
Season of Strife

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!