Painel > Marketing > Banners principais (slide) 

# HTML
{% set slides = store.mainBanner() %}
{% if slides.raw|length >= 1 %}
<div class="{{ slides.width == 'block' ? 'block' : 'central' }}{{ slogan == '' ? ' mb-0' : '' }}">
	<div id="slider" class="mb-0 owl-carousel owl-theme">
		{% for slide in slides.items %}
		<div class="item">
			<div class="{{ slide.foto_mobile == '' ? 'block' : 'd-none d-md-block' }}">
				{{ slide.desktop_raw|raw }}
			</div>
			{% if slide.foto_mobile %}
			<div class="d-block d-md-none">
				{{ slide.mobile_raw|raw }}
			</div>
			{% endif %}
		</div>
		{% endfor %}
	</div>
</div>
{% endif %}

// CSS
#slider{
	width: 100%;
	float: left;
	text-align: center;
	
	.item{
		width: 100%;
		float: left;
		
		img{
			max-height: 800px;
		}
	}
	
	.owl-dots{
		position: absolute;
		width: 100%;
		margin: 0;
		bottom: 0;
		visibility: hidden;
		opacity: 0;
	}
	
	.owl-nav{
		visibility: hidden;
		opacity: 0;
		transition: all .25s ease;
		margin-top: 0;
	}
	
	.owl-prev,
	.owl-next{
		position: absolute;
		top: 0;
		left: 0;
		height: calc(100% - 10px);
		width: 30px;
		background-color: rgba(195,195,195,0.70);
		color: #000;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.owl-next{
		left: auto;
		right: 0;
	}
	
	.owl-pagination{
		line-height: normal;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
	}
	
	&:hover .owl-nav,
	&:hover .owl-dots{
		visibility: visible;
		opacity: 1;
	}
}