<section class="story-slide lazy slider">
<div class="slide-wrapper" style="background-image: url(/img/maxresdefault.jpg);">
<div class="slide-content background_color">
<h2>This is the Heading 1</h2>
<div class="mobile-image">
<img src="/img/maxresdefault.jpg" alt="" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Ac ut consequat semper viverra nam libero justo.
</p>
<div class="slider_buttons">
</div>
<!-- end slider_buttons -->
</div>
<!-- end slide-content -->
</div>
<div class="slide-wrapper" style="background-image: url(/img/lava.jpg);">
<div class="slide-content background_color">
<h2>This is the Heading 2</h2>
<div class="mobile-image">
<img src="/img/lava.jpg" alt="" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Ac ut consequat semper viverra nam libero justo.
</p>
<div class="slider_buttons">
</div>
<!-- end slider_buttons -->
</div>
<!-- end slide-content -->
</div>
<div class="slide-wrapper" style="background-image: url(/img/lava-2.jpg);">
<div class="slide-content background_color">
<h2>This is the Heading 3</h2>
<div class="mobile-image">
<img src="/img/lava-2.jpg" alt="" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Ac ut consequat semper viverra nam libero justo.
</p>
<div class="slider_buttons">
</div>
<!-- end slider_buttons -->
</div>
<!-- end slide-content -->
</div>
</section>
<section class="story-slide lazy slider">
{% block cms_override %}
{% for slide_img in slide_imgs %}
{% include "@carousel_item" with slide_img only %}
{% endfor %}
{% endblock cms_override %}
</section>
{
"slide_imgs": [
{
"content_block": "yes",
"slide_src_img": "/img/maxresdefault.jpg",
"heading": "This is the Heading 1",
"subheading": "This is the Subheading",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Ac ut consequat semper viverra nam libero justo."
},
{
"content_block": "yes",
"slide_src_img": "/img/lava.jpg",
"heading": "This is the Heading 2",
"subheading": "This is the Subheading",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Ac ut consequat semper viverra nam libero justo."
},
{
"content_block": "yes",
"slide_src_img": "/img/lava-2.jpg",
"heading": "This is the Heading 3",
"subheading": "This is the Subheading",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nunc id cursus metus. Donec ac odio tempor orci dapibus ultrices in iaculis nunc. Ac ut consequat semper viverra nam libero justo."
}
]
}
.story-slide {
margin: 0 0 -6px 0 !important;
margin-top: $space_and_half;
margin-bottom: $space_and_half !important;
@include media-breakpoint-down(md) {
margin: $space_three 0 0 0 !important;
padding: 0 0 $space_three 0 !important;
border-bottom: 1px solid $grey_lightest;
}
.slick {
&-next,
&-prev {
height: inherit;
width: inherit;
z-index: 2;
@include media-breakpoint-down(md) {
top: 30%;
}
&::before {
@include font-awesome-base;
color: $white;
font-size: 8rem !important;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
@include media-breakpoint-down(xs) {
font-size: 4rem !important;
}
}
}
&-prev {
left: $spacer !important;
&::before {
content: "\f104" !important;
}
}
&-next {
right: $spacer !important;
&::before {
content: "\f105" !important;
}
}
&-dots {
bottom: $space_three;
right: $space_four;
text-align: center;
width: inherit;
position: unset;
@include media-breakpoint-up(md) {
position: absolute;
}
li {
margin: 0 10px;
button {
&::before {
font-family: $font_awesome !important;
font-size: 1.5rem;
-webkit-text-stroke: 4px $lehigh_brown_60;
opacity: 1;
color: transparent;
content: '\2022' !important;
@include media-breakpoint-up(md) {
-webkit-text-stroke: 4px $lehigh_brown_60;
}
}
}
&.slick-active {
button {
&::before {
opacity: 1;
color: $lehigh_brown;
@include media-breakpoint-up(md) {
color: $black;
}
}
}
}
&:last-of-type {
margin: 0 0 0 10px;
}
}
}
&-dotted {
&.slick-slider {
margin: 0;
}
}
}
}
.slick-next,
.slick-prev {
&:focus,
&:hover {
&::before {
color: $lehigh_brown;
font-weight: 900;
}
}
}
Display the image slider with text.