%ul#fifty-fifty-slider-stack-id.content-center.mobile-nav-top.slide-start
.ffs-nav
.ffs-nav-count
%span.ffs-current 1
%span /
%span.ffs-total 3
%a.prev
%i.ion-arrow-left-c
%a.next
%i.ion-arrow-right-c
%li.ffs-slide.active.the-one
.ffs-slide-content
.ffs-slide-content-inner
%h2.ffs-slide-title Slide Title
.ffs-slide-text
%p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias ratione reiciendis neque quae ea earum laboriosam eligendi harum. Odio officia nemo nulla sunt hic aspernatur cumque sed necessitatibus tempora amet.
%a.ffs-slide-action(href="#") 힘들구만...
.ffs-slide-image
%li.ffs-slide
.ffs-slide-content
.ffs-slide-content-inner
%h2.ffs-slide-title Slide Title
.ffs-slide-text
%p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias ratione reiciendis neque quae ea earum laboriosam eligendi harum. Odio officia nemo nulla sunt hic aspernatur cumque sed necessitatibus tempora amet.
%p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias ratione reiciendis neque quae ea earum laboriosam eligendi harum. Odio officia nemo nulla sunt hic aspernatur cumque sed necessitatibus tempora amet.
%a.ffs-slide-action(href="#") 힘들구만...
.ffs-slide-image
%li.ffs-slide
.ffs-slide-content
.ffs-slide-content-inner
%h2.ffs-slide-title Slide Title
.ffs-slide-text
%p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias ratione reiciendis neque quae ea earum laboriosam eligendi harum. Odio officia nemo nulla sunt hic aspernatur cumque sed necessitatibus tempora amet.
%a.ffs-slide-action(href="#") 힘들구만...
.ffs-slide-image
%p Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem laudantium nihil fugit rerum quod, omnis blanditiis ullam aliquid quam, voluptate repellat nemo totam autem velit numquam esse atque, eos iusto.
View Compiled
// Variables
$general-radius: 10px
$general-max-width: 800px
$general-min-height: 450px
$mobile-min-height: 450px
$image-min-height: 300px
$content-padding: 20px 25px
$content-title-color: white
$content-title-size: 30px
$content-title-spacing: 10px
$content-title-line: 30px * 1.6
$content-text-color: rgba(white, 0.5)
$content-text-size: 14px
$content-text-spacing: 20px
$content-text-line: 14px * 1.6
$content-action-size: 16px
$content-action-border: 2px
$content-action-radius: 30px
$content-action-color: white
$content-action-background: none
$content-action-padding: 7px 20px
$content-action-border-color: rgba(white, 0.2)
$content-action-hover-color: white
$content-action-hover-background: none
$content-action-hover-border-color: white
$nav-padding: 10px 20px
$nav-count-size: 14px
$nav-icon-size: 20px
$nav-arrow-size: 30px
$nav-arrow-border: 2px
$nav-arrow-radius: 30px
$nav-arrow-spacing: 10px
#fifty-fifty-slider-stack-id
border-radius: $general-radius
max-width: $general-max-width
min-height: $general-min-height
padding: 0
display: flex
margin: 50px auto
overflow: hidden
list-style: none
position: relative
align-items: stretch
font-family: "Nunito"
transition: all 0s ease-in-out
// ###########################
// SLIDE STYLES
// ###########################
#fifty-fifty-slider-stack-id .ffs-slide
top: 0
left: 0
z-index: 1
width: 100%
bottom: auto
display: flex
user-select: none
position: absolute
pointer-events: none
box-sizing: border-box
transform: all 0.3s ease-in-out
&.active
.ffs-slide-content
transform: translateX(0%)
.ffs-slide-image
transform: translateX(0%)
&-content, &-image
width: 50%
flex: 0 1 auto
position: relative
pointer-events: auto
box-sizing: border-box
&-content
z-index: 2
display: flex
position: relative
padding-bottom: $nav-arrow-size + (10px*2)
transform: translateX(200%)
transition: transform 0.6s 0s ease-in-out
flex-direction: column
justify-content: center
&-inner
padding: $content-padding
box-sizing: border-box
.ffs-slide-title
color: $content-title-color
font-size: $content-title-size
line-height: $content-title-line
margin-bottom: $content-title-spacing
.ffs-slide-text
p
color: $content-text-color
font-size: $content-text-size
line-height: $content-text-line
margin-top: $content-text-spacing
.ffs-slide-action
color: $content-action-color
font-size: $content-action-size
padding: $content-action-padding
border: $content-action-border solid
background: $content-action-background
border-radius: $content-action-radius
border-color: $content-action-border-color
display: inline-block
box-sizing: border-box
text-decoration: none
transition: all 0.3s ease
&:hover
color: $content-action-hover-color
background: $content-action-hover-background
border-color: $content-action-hover-border-color
&-image
z-index: 1
transform: translateX(100%)
transition: transform 0s 0.3s ease-in-out
// ###########################
// NAVIGATION STYLES
// ###########################
#fifty-fifty-slider-stack-id
.ffs-nav
left: 0
bottom: 0
width: 50%
z-index: 10
color: white
display: flex
padding: $nav-padding
position: absolute
align-items: center
box-sizing: border-box
justify-content: flex-end
&-count
font-size: $nav-count-size
margin-right: auto
a
width: $nav-arrow-size
height: $nav-arrow-size
border-radius: $nav-arrow-radius
border: $nav-arrow-border solid white
opacity: 0.5
display: flex
color: inherit
line-height: 0
cursor: pointer
align-items: center
justify-content: center
transform: translateY(0%)
transition: all 0.3s ease-in-out
i
line-height: 0
font-size: $nav-icon-size
&:hover
opacity: 1
&:first-of-type
margin-right: $nav-arrow-spacing
&.slide-end
.ffs-nav a.next
opacity: 0
visibility: hidden
pointer-events: none
transform: translateY(100%)
&.slide-start
.ffs-nav a.prev
opacity: 0
visibility: hidden
pointer-events: none
transform: translateY(100%)
// ###########################
// CUSTOM CLASSES
// ###########################
#fifty-fifty-slider-stack-id
&.height-set
.ffs-slide
bottom: 0
&.hide-titles
.ffs-slide-title
display: none
&.hide-text
.ffs-slide-text
display: none
&.hide-actions
.ffs-slide-action
display: none
&.content-top
.ffs-slide-content
justify-content: flex-start
&.content-center
justify-content: center
&.content-bottom
justify-content: flex-end
// Dummy Content Styles
#fifty-fifty-slider-stack-id .ffs-slide
&:nth-of-type(1)
.ffs-slide-content
background: #212121
.ffs-slide-image
background: url(https://images.unsplash.com/photo-1522205393480-69ac15dafb07?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1cdd41f80a21709d55bc35ec17415275&auto=format&fit=crop&w=750&q=80) no-repeat center center
background-size: cover
&:nth-of-type(2)
.ffs-slide-content
background: #212121
.ffs-slide-image
background: url(https://images.unsplash.com/photo-1501484311399-ed1e8632445d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=347e5f45d9bc400b9fa37dc99d078f9b&auto=format&fit=crop&w=1050&q=80) no-repeat center center
background-size: cover
&:nth-of-type(3)
.ffs-slide-content
background: #212121
.ffs-slide-image
background: url(https://images.unsplash.com/photo-1499792914147-5e4c9a4a9684?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=161799cf6c9503ea10fbdb38afd88dca&auto=format&fit=crop&w=661&q=80) no-repeat center center
background-size: cover
// Mobile breakpoints
@media (max-width: 500px)
#fifty-fifty-slider-stack-id
min-height: $mobile-min-height
.ffs-nav
width: 100%
.ffs-slide
width: 100%
flex: 1 0 auto
flex-direction: column-reverse
&-content
width: 100%
flex: 1 0 auto
transform: translateX(100%)
&-image
width: 100%
height: $image-min-height
flex: 0 1 auto
transform: translateX(100%)
transition: transform 0.6s 0s ease-in-out
&.mobile-nav-top
.ffs-slide
&-content
padding-bottom: 0
padding-top: $nav-arrow-size + 20px
.ffs-nav
top: $image-min-height
bottom: auto
&.slide-start
.ffs-nav a.prev
transform: translateY(-100%)
&.slide-end
.ffs-nav a.next
transform: translateY(-100%)
View Compiled
$(function(){
var fiftySlider = {
active: 0,
$el: $('#fifty-fifty-slider-stack-id'),
$slides: $('#fifty-fifty-slider-stack-id .ffs-slide'),
$navCount: $('#fifty-fifty-slider-stack-id .ffs-nav-count'),
numSlides: $('#fifty-fifty-slider-stack-id .ffs-slide').length,
initialize: function(){
this.setHeight();
this.updateCount();
this.$navCount.find('.ffs-total')
.html(this.numSlides)
},
updateCount: function(){
this.$navCount.find('.ffs-current')
.html(this.active+1)
},
setHeight: function(){
var elementHeights = this.$slides.map(function() {
return $(this).height();
}).get();
var maxHeight = Math.max.apply(null, elementHeights);
this.$el.css('height', maxHeight).addClass('height-set');
this.$slides.css('bottom', '');
},
nextSlide: function(){
this.$el.removeClass('slide-start');
if(this.active+1 < this.numSlides){
$(this.$slides[this.active+1]).addClass('active');
if(this.active+1 == this.numSlides-1){
this.$el.addClass('slide-end');
}
this.active++;
}
this.updateCount();
this.setHeight();
},
prevSlide: function(){
this.$el.removeClass('slide-end');
if(this.active-1 >= 0){
$(this.$slides[this.active]).removeClass('active the-one');
$(this.$slides[this.active-1]).addClass('the-one')
if(this.active-1 == 0){
this.$el.addClass('slide-start');
}
this.active--;
}
this.updateCount();
this.setHeight();
}
}
$(window).resize(function(){
fiftySlider.$slides.css('bottom', 'auto');
fiftySlider.setHeight();
});
fiftySlider.initialize();
$('#fifty-fifty-slider-stack-id a.next').click(function(){
fiftySlider.nextSlide();
})
$('#fifty-fifty-slider-stack-id a.prev').click(function(){
fiftySlider.prevSlide();
})
});
