Lots of folks have written in asking how we made the carousel on the Ollie homepage. It’s a combination of native blocks in the editor and some custom CSS to make it shine.
Below, I’ve written a brief tutorial to show you how to get a similar result on your site. This is not an official Ollie tutorial, rather a handy little tutorial to help folks go a little further with the editor. With that said, I cannot provide further advice or customization to help you implement it into your site.
To start, here’s how the carousel is structured in the editor:
- Cover block (.hero-container)
- Group block (.hero-scroll-container)
- Row block (.hero-scroll)
- Stack
- Image
- Image
- Image
- Stack
- Image
- Image
- Image
- Stack
- Image
- Image
- ImageCode language: CSS (css)The outermost container is a cover block with the .hero-container class applied. This sets a max height on the container so that the carousel can scroll in and out of view.
.hero-container {
max-height: 1200px;
}Code language: CSS (css)Inside the cover block is a group block with the .hero-scroll-container class applied. This rotates and skews the grid of images to look like they are floating at an angle.
.hero-scroll-container {
transform: rotate(-28deg) skew(10deg, 10deg);
}Code language: CSS (css)Inside the .hero-scroll-container group, we have a row with the class .hero-scroll applied. This scrolls the grid of images back and forth so they move off screen and then back again.
.hero-scroll {
width: 200%;
-webkit-overflow-scrolling: touch;
animation: scrollhero 100s linear infinite;
animation-play-state: running;
position: relative;
z-index: 20;
}Code language: CSS (css)The images in the grid have some styles applied to give them a hover and scale effect.
.hero-scroll img {
border-radius: 5px;
transition: .3s ease;
box-shadow: 0px 38px 11px 0px rgba(162, 129, 146, 0.00), 0px 24px 10px 0px rgba(162, 129, 146, 0.01), 0px 14px 8px 0px rgba(162, 129, 146, 0.05), 0px 6px 6px 0px rgba(162, 129, 146, 0.09), 0px 2px 3px 0px rgba(162, 129, 146, 0.10);
z-index: 5;
}
.hero-scroll img:hover {
transform: scale(1.05);
box-shadow: 0px 240px 67px 0px rgba(162, 129, 146, 0.00), 0px 154px 62px 0px rgba(162, 129, 146, 0.01), 0px 87px 52px 0px rgba(162, 129, 146, 0.05), 0px 38px 38px 0px rgba(162, 129, 146, 0.09), 0px 10px 21px 0px rgba(162, 129, 146, 0.10);
z-index: 10;
}Code language: CSS (css)There are some additional animation styles I have on the Ollie homepage. I won’t detail all of them here, but feel free to poke around the homepage and grab whatever you’d like from the code.
Below is the block code copied from the editor. If you want to use this as a starting point, you’ll need to paste this into the code view of the editor and then switch back to the editor view to get started.
<!-- wp:cover {"overlayColor":"white","isUserOverlayColor":true,"contentPosition":"top left","isDark":false,"align":"full","className":"dot-bg hero-container","style":{"spacing":{"padding":{"top":"var:preset|spacing|xxx-large","right":"0","bottom":"0","left":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":"var:preset|spacing|large"}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-top-left dot-bg hero-container" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--xxx-large);padding-right:0;padding-bottom:0;padding-left:0"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"padding":{"top":"0","bottom":"0","right":"var:preset|spacing|medium","left":"var:preset|spacing|medium"},"blockGap":"var:preset|spacing|xxx-large"}},"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="margin-top:0px;margin-bottom:0px;padding-top:0;padding-right:var(--wp--preset--spacing--medium);padding-bottom:0;padding-left:var(--wp--preset--spacing--medium)"><!-- wp:group {"align":"wide","layout":{"type":"constrained","wideSize":"1000px","justifyContent":"left"}} -->
<div class="wp-block-group alignwide"><!-- wp:heading {"level":1,"align":"wide","className":"has-secondary-font-family","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}},"typography":{"fontSize":"5rem"}},"textColor":"main"} -->
<h1 class="wp-block-heading alignwide has-secondary-font-family has-main-color has-text-color" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:5rem">Beautiful WordPress websites made simple</h1>
<!-- /wp:heading -->
<!-- wp:group {"layout":{"type":"constrained","justifyContent":"left","contentSize":"860px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"textColor":"secondary","fontSize":"medium","fontFamily":"primary"} -->
<p class="has-secondary-color has-text-color has-primary-font-family has-medium-font-size" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">Launch stunning, responsive websites faster with Ollie, the ultimate WordPress block theme and pattern library for creators.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"hero-scroll-container glow glow-light","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-scroll-container glow glow-light"><!-- wp:group {"align":"full","className":"hero-scroll","style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"},"blockVisibility":{"controlSets":[{"id":1,"enable":true,"controls":{"screenSize":{"hideOnScreenSize":{"small":true,"medium":true}}}}]}} -->
<div class="wp-block-group alignfull hero-scroll"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57349,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881480-jpg.webp" alt="Frame 1597881480" class="wp-image-57349"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57350,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881481-jpg.webp" alt="Frame 1597881481" class="wp-image-57350"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57351,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881490-jpg.webp" alt="Frame 1597881490" class="wp-image-57351"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57352,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881478-jpg.webp" alt="Frame 1597881478" class="wp-image-57352"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57353,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881482-jpg.webp" alt="Frame 1597881482" class="wp-image-57353"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57354,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881489-jpg.webp" alt="Frame 1597881489" class="wp-image-57354"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57350,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881481-jpg.webp" alt="Frame 1597881481" class="wp-image-57350"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57322,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881487-jpg.webp" alt="Frame 1597881487" class="wp-image-57322"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57323,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881483-jpg.webp" alt="Frame 1597881483" class="wp-image-57323"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57324,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881488-jpg.webp" alt="Frame 1597881488" class="wp-image-57324"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57325,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881491-jpg.webp" alt="Frame 1597881491" class="wp-image-57325"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57368,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881477-jpg.webp" alt="Frame 1597881477" class="wp-image-57368"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57360,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881479-jpg.webp" alt="Frame 1597881479" class="wp-image-57360"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57386,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881600-jpg.webp" alt="Frame 1597881600" class="wp-image-57386"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57362,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881485-jpg.webp" alt="Frame 1597881485" class="wp-image-57362"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57363,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881500-jpg.webp" alt="Frame 1597881500" class="wp-image-57363"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57364,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881499-jpg.webp" alt="Frame 1597881499" class="wp-image-57364"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57365,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881492-jpg.webp" alt="Frame 1597881492" class="wp-image-57365"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57366,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881502-jpg.webp" alt="Frame 1597881502" class="wp-image-57366"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57367,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881504-jpg.webp" alt="Frame 1597881504" class="wp-image-57367"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57368,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881477-jpg.webp" alt="Frame 1597881477" class="wp-image-57368"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57369,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881509-jpg.webp" alt="Frame 1597881509" class="wp-image-57369"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57370,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881507-jpg.webp" alt="Frame 1597881507" class="wp-image-57370"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57371,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881511-jpg.webp" alt="Frame 1597881511" class="wp-image-57371"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57374,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881594-jpg.webp" alt="Frame 1597881594" class="wp-image-57374"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57375,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881591-jpg.webp" alt="Frame 1597881591" class="wp-image-57375"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57376,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881596-jpg.webp" alt="Frame 1597881596" class="wp-image-57376"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57377,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Episodes-jpg.webp" alt="Episodes" class="wp-image-57377"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57350,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881481-jpg.webp" alt="Frame 1597881481" class="wp-image-57350"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57379,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881603-jpg.webp" alt="Frame 1597881603" class="wp-image-57379"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57380,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881605-jpg.webp" alt="Frame 1597881605" class="wp-image-57380"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57360,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881479-jpg.webp" alt="Frame 1597881479" class="wp-image-57360"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57322,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881487-jpg.webp" alt="Frame 1597881487" class="wp-image-57322"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57381,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881607-jpg.webp" alt="Frame 1597881607" class="wp-image-57381"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57382,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881597-jpg.webp" alt="Frame 1597881597" class="wp-image-57382"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57383,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881604-jpg.webp" alt="Frame 1597881604" class="wp-image-57383"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57384,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881598-jpg.webp" alt="Frame 1597881598" class="wp-image-57384"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57359,"sizeSlug":"medium","linkDestination":"none"} -->
<figure class="wp-block-image size-medium"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881491-300x176.webp" alt="Frame 1597881491" class="wp-image-57359"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57386,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881600-jpg.webp" alt="Frame 1597881600" class="wp-image-57386"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57387,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881482-1-jpg.webp" alt="Frame 1597881482 1" class="wp-image-57387"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57388,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881595-jpg.webp" alt="Frame 1597881595" class="wp-image-57388"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"id":57354,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881489-jpg.webp" alt="Frame 1597881489" class="wp-image-57354"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57364,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881499-jpg.webp" alt="Frame 1597881499" class="wp-image-57364"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57390,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881611-jpg.webp" alt="Frame 1597881611" class="wp-image-57390"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":57352,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://olliewp.com/wp-content/uploads/2024/05/Frame-1597881478-jpg.webp" alt="Frame 1597881478" class="wp-image-57352"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->Code language: JavaScript (javascript)