Slider Type 1

Talha Aziz

The above block is copied from the site: https://ronaldmcdon597.wpenginepowered.com/page-title/

Pattern HTML

<!-- wp:group {"metadata":{"name":"Upcoming House Events for House Guests and Families with a Hospitalized Child"},"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|15"},"blockGap":"var:preset|spacing|50"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--15)"><!-- wp:da/wp-swiper-slides {"align":"full","pagination":false,"slidesPerView":"1.5","spaceBetween":20,"tabsData":[{"clientId":"7d31d28b-ebfb-43c0-b0ca-ba4036d754c7","slug":"slide-1"},{"clientId":"b0e5b6b7-2fdb-4c0e-a85c-2f5bc33786fb","slug":"slide-2"},{"clientId":"091f3950-271b-4c22-b465-af53a87fb6fe","slug":"slide-3"},{"clientId":"f4b1804e-1396-4014-895d-34d69f769fa0","slug":"slide-4"}],"breakpoints":"{\u0022780\u0022:{\u0022slidesPerView\u0022:2.75}}","className":"is-style-default event-slider"} -->
<div class="alignfull alignfull is-style-default event-slider wp-swiper alignfull is-style-default event-slider is-style-default event-slider"><div class="wp-swiper__wrapper"><div class="swiper-container swiper" data-swiper="{&quot;slidesPerView&quot;:&quot;1.5&quot;,&quot;navigation&quot;:true,&quot;pagination&quot;:{&quot;type&quot;:&quot;bullets&quot;},&quot;delay&quot;:3000,&quot;speed&quot;:500,&quot;loop&quot;:false,&quot;direction&quot;:&quot;horizontal&quot;,&quot;slidesOffsetBefore&quot;:0,&quot;slidesOffsetAfter&quot;:0,&quot;autoHeight&quot;:true,&quot;spaceBetween&quot;:20,&quot;releaseOnEdges&quot;:false,&quot;effect&quot;:&quot;slide&quot;,&quot;breakpoints&quot;:&quot;{\&quot;780\&quot;:{\&quot;slidesPerView\&quot;:2.75}}&quot;}"><div class="swiper-wrapper"><!-- wp:da/wp-swiper-slide {"slug":"slide-1"} -->
<div data-tab="slide-1" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content"><!-- wp:image {"id":957,"sizeSlug":"full","linkDestination":"none","style":{"border":{"width":"1px"}},"borderColor":"second"} -->
<figure class="wp-block-image size-full has-custom-border"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/IMG.png" alt="" class="has-border-color has-second-border-color wp-image-957" style="border-width:1px"/></figure>
<!-- /wp:image --></div></div>
<!-- /wp:da/wp-swiper-slide -->

<!-- wp:da/wp-swiper-slide {"slug":"slide-2"} -->
<div data-tab="slide-2" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content"><!-- wp:image {"id":956,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/Mask-group-2.jpg" alt="" class="wp-image-956"/></figure>
<!-- /wp:image --></div></div>
<!-- /wp:da/wp-swiper-slide -->

<!-- wp:da/wp-swiper-slide {"slug":"slide-3"} -->
<div data-tab="slide-3" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content"><!-- wp:image {"id":955,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/Mask-group-3.jpg" alt="" class="wp-image-955"/></figure>
<!-- /wp:image --></div></div>
<!-- /wp:da/wp-swiper-slide -->

<!-- wp:da/wp-swiper-slide {"slug":"slide-4"} -->
<div data-tab="slide-4" class="wp-swiper__slide swiper-slide"><div class="wp-swiper__overlay-color" style="background-color:rgba(0, 0, 0, 0)"></div><div class="wp-swiper__slide-content"><!-- wp:image {"id":954,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/07/IMG-2.jpg" alt="" class="wp-image-954"/></figure>
<!-- /wp:image --></div></div>
<!-- /wp:da/wp-swiper-slide --></div></div><div class="wp_swiper__navigation"><div class="wp_swiper__navigation-container"><div class="swiper-button-prev "></div><div class="swiper-button-next "></div></div></div></div></div>
<!-- /wp:da/wp-swiper-slides --></div>
<!-- /wp:group -->

Pattern CSS

body .swiper {
    overflow: visible;
}

.event-slider .swiper-container.swiper {
    margin-left: calc((100% - 1170px) / 2);
    max-width: 1390px;
}

body .wp_swiper__navigation-container {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

body .swiper-button-next, 
body .swiper-button-prev {
    position: relative;
	width: 58px;
	height: 58px;
	background-color: var(--wp--preset--color--fifth);
	border-radius: 100%;
	margin-top: 30px;
}

body .swiper-button-next:hover, 
body .swiper-button-prev:hover {
	background-color: var(--wp--preset--color--fourth);
}

body .swiper-button-prev:after, 
body .swiper-button-next:after{
	font-size: 20px;
	color: var(--wp--preset--color--second);
	font-weight: 800;
}