<div class="slide--parent">
<div class="parent--el">
<div class="two--col">
<div class="is-item has--img">
<figure class="the-img">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/602471/jake-ingle-168726%20copy.jpg" alt="">
</figure>
</div>
<div class="is-item has--content">
<div class="is-item--inner">
<h1><span>EXPLORE</span></h1>
<small>Escape The City</small>
<hr>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed quidem delectus laborum itaque alias, officiis laborum laborum illum voluptates est et voluptas?</p>
<p>Sed quidem delectus laborum itaque laborum alias, officiis illum voluptates est et voluptas?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed quidem delectus laborum itaque alias, officiis illum voluptates est et voluptas?</p>
</div>
</div>
</div>
</div>
<div class="parent--el">
<div class="two--col">
<div class="is-item has--img">
<figure class="the-img">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/602471/lee-campbell-512447%20copy.jpg" alt="">
</figure>
</div>
<div class="is-item has--content">
<div class="is-item--inner">
<h1><span>GRAB COFFEE</span></h1>
<small>Coffee Makes Everything Better</small>
<hr>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed quidem delectus laborum itaque alias, officiis laborum laborum illum voluptates est et voluptas?</p>
<p>Sed quidem delectus laborum itaque laborum alias, officiis illum voluptates est et voluptas?</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed quidem delectus laborum itaque alias, officiis illum voluptates est et voluptas?</p>
</div>
</div>
</div>
</div>
</div>
</div>
body {
font-family: "Fira Sans", sans-serif;
margin-top: 3em;
}
.slide--parent {
max-width: 1100px;
margin: auto;
overflow: hidden;
}
p {
line-height: 1.8;
}
h1 {
letter-spacing: 10px;
color: #343434;
margin: 0;
}
small {
font-style: italic;
font-weight: 700;
margin-bottom: 0.5em;
display: inline-block;
color: #999;
position: relative;
padding-left: 3em;
&:after {
content: "";
position: absolute;
left: -0em;
top: 50%;
height: 4px;
width: 2.4em;
background: red;
transform: translateY(-50%);
}
}
.parent--el {
width: 100%;
max-width: 1000px;
margin: auto;
.two--col {
display: flex;
align-items: center;
}
}
figure {
margin: 0;
}
.is-item {
width: 60%;
&.has--img {
width: 40%;
}
}
.the-img {
width: 100%;
position: relative;
overflow: hidden;
img {
width: 100%;
}
}
.is-item--inner {
padding: 0em 3em;
}
hr {
margin: 0.5em 0em;
height: 4px;
background: #eee;
border: none;
}
// transitions
.the-img {
overflow: hidden;
img {
position: relative;
transform: translateX(100%);
transition: all 600ms ease;
}
}
.is-item--inner {
p {
transform: translateY(15px);
position: relative;
opacity: 0;
transition: all 400ms ease;
}
}
h1 {
overflow: hidden;
span {
transform: translateY(100%);
position: relative;
transition: all 500ms ease;
display: inline-block;
}
}
hr {
width: 0;
max-width: 8em;
transition: all 2500ms ease;
}
small {
transform: translateY(10px);
opacity: 0;
transition: all 100ms ease;
&:after {
width: 0;
max-width: 2.4em;
transition: all 1500ms ease;
}
}
.parent--el {
&.is-selected {
.the-img {
overflow: hidden;
img {
position: relative;
transform: translateX(0%);
transition-delay: 500ms;
}
}
.is-item--inner {
p {
transform: translateY(0px);
transition-delay: 500ms;
position: relative;
opacity: 1;
&:nth-of-type(2) {
color: red;
transition-delay: 700ms;
}
&:nth-of-type(3) {
transition-delay: 900ms;
}
}
}
h1 {
overflow: hidden;
span {
transform: translateY(0%);
position: relative;
transition-delay: 400ms;
display: inline-block;
}
}
hr {
width: 100%;
max-width: 8em;
transition-delay: 500ms;
}
small {
transform: translateY(0px);
opacity: 1;
transition-delay: 400ms;
&:after {
width: 100%;
transition-delay: 600ms;
max-width: 2.4em;
}
}
}
}
View Compiled
var slideEl = $(".slide--parent");
slideEl.flickity({
imagesLoaded: true,
wrapAround: true,
autoPlay: true,
pauseAutoPlayOnHover: false
});
