Sliding Pages within a Page

  • Author
    Posts
  • #2874242

    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 jm2capital.wordpress.com.

    #2874419

    chad1008
    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!

    #2874420

    Hi!

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

    #2874432

    chad1008
    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.