Sliding Pages within a Page

  • Unknown's avatar
    theconnectionokc · Member ·

    Hi, I’m wanting to recreate a click through page setup that slides horizontally like this one: https://www.jm2capital.com/strategy.

    I’m needing to create it on this page: https://jm2capital.wordpress.com/strategy/

    Any help with the css would be appreciated!

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi @theconnectionokc!

    You might consider using a Slideshow Gallery.

    Those do normally have a border around them, which you could remove with some CSS, like this:

    .slideshow-window {
    background: none;
    border: none;
}

    Give that a try and let me know if it’s what you had in mind!

  • Unknown's avatar
    theconnectionokc · Member ·

    Hi!

    That’s what I did originally, but I couldn’t figure out how to make it full page. Is that possible?

  • staff-loquaciousloon · Staff ·

    We’d need to increase the width, and then manually shift the slideshow over a bit.

    The amount we need to increase and shift depend on the page template you choose.

    Right now, it looks like you’ve selected the Grid Page template with an empty sidebar so the content is centered. This CSS should be closer to what you have in mind for that:

    .page-template-template-grid .slideshow-window {
    background: none;
    border: none;
    width: calc( 100% + 543px );
    position: relative;
    left: -272px;
    height: auto;
    border-radius: inherit;
}

    This will create a similar effect on the Full Width template, which you might like as it lets the content run a bit wider:

    .page-template-template-full-width .slideshow-window {
    background: none;
    border: none;
    width: calc( 100% + 42px );
    position: relative;
    left: -21px;
    height: auto;
    border-radius: inherit;
}

    These both open the gallery up to Piques maximum 1400p width (which on most screens is full screen or close to it.

  • The topic ‘Sliding Pages within a Page’ is closed to new replies.