What content can be part of slide?

PrzemyslawKlys commented 3 years ago

I wanted to try out Kineto and it seems it's very picky about tags inside slides. If the slide has div class inside it will not show the text (slide 1) and will only work for Slide 2.

So what are the allowed content types? It seems it's very picky what/how to display content.

<body>
    <script src="https://cdn.jsdelivr.net/gh/findawayer/kineto@main/dist/kineto.js"></script>
    <div class="main-section">
        <div id="Carousel-rnFPmfFD" class="carousel">
            <div class="slide">
                <div class="defaultText">
                    <span>Slide 1</span>
                </div>
            </div>
            <div class="slide">
                <span>Slide 2</span>
            </div>
        </div>
        <script>
            Kineto.create("#Carousel-rnFPmfFD", {
                pagination: !0,
                mode: "horizontal"
            });
        </script>
    </div>
</body>

findawayer commented 3 years ago

Good day @PrzemyslawKlys! Thank you for raising the issue.

You might have CSS rulesets from /test/style.css that I have included for testing; these lines center child inline elements inside .slide in both x/y axis, while supporting legacy IE down to v8. They only work with inline-level elements, so any block-level elements or elements explicitely set to display: block will be outside of the parent element's box boundary and thus be clipped by overflow: hidden declaration in src/styles/_core.scss

If that is the case, you can safely remove those lines to be able to inject any type of content in your slides. If you want to keep the content centered, as shown in the documentation, you can achieve that by using Flexbox or display: table + display: table-cell. Below is a Flexbox implementation example.

.slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

PrzemyslawKlys commented 3 years ago

Thank you! It works!

findawayer / kineto

What content can be part of slide? #1