[Support request] CSS Slideshow in a Section

[Elle]

Hi,

I am trying to create a text slideshow in sections and I can’t get the positioning correct.

When I use position: absolute, the the text block slides into the exact position of the previous text block. However, the slider appears at the top of the page, not in the section where I want it. If I use relative, the text slider appears in the correct section, but the text is stacked. Each text block is contained in paragraph, for example <p class=”item-1″>.

So, I either have the slide items aligned correctly, relative to each other, but outside of the section. Or, I have it in the section, but the items not properly sliding in.

Here’s the code that seems to affect position on the page:

.item-1,
.item-2,
.item-3 {
position: relative;
display: block;
top: 0em;

width: 60%;

font-size: 1.5em;

animation-duration: 30s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

Maybe there’s an easier way to do this, but I am trying to minimize plugins and work with GP’s native page builder — and I am not an expert, though trying to learn. 🙂

Thanks much!

[Leo]

Hi there,

Would you consider using a slider plugin?

I really like Smart Slider 3: https://en-ca.wordpress.org/plugins/smart-slider-3/

[Author]

Posts