2018
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2017
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2016
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2015
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2014
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2013
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2012
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2011
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
2010
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...
<div class="o-timeline3">
<div class="o-timeline3__container container">
<div class="o-carousel row no-gutters jq_timeline3">
<div class="o-carousel__navs o-timeline3__navs--prev col-12 col-md-2">
<button type="button" class="o-carousel__nav o-carousel__nav--prev icon-chevron-left" data-carousel="nav" data-direction="prev" aria-label="Previous"></button>
</div>
<div class="o-carousel__navs o-timeline3__navs--next col-12 col-md-2">
<button type="button" class="o-carousel__nav o-carousel__nav--next icon-chevron-right" data-carousel="nav" data-direction="next" aria-label="Next"></button>
</div>
<div data-carousel="wrap" class="o-timeline3__wrap o-carousel__wrap col-24 col-md-20">
<div data-carousel="stage" class="o-timeline3__stage o-carousel__stage row no-gutters">
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__point">2018</div>
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__point">2017</div>
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__point">2016</div>
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__point">2015</div>
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__point">2014</div>
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__point">2013</div>
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__point">2012</div>
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__point">2011</div>
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
<div class="o-timeline3__item col-24 col-sm-12 col-lg-8 ">
<div class="o-timeline3__point">2010</div>
<div class="o-timeline3__clip">
<div class="o-timeline3__text">
<div class="o-timeline3__clip__align">
<div class="o-wysiwyg">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>@import "organisms/carousel/index";
.o-timeline3 {
$self: &;
$height: 350px;
&__container {
padding-left: 0;
padding-right: 0;
}
&__wrap {
order: 1;
@media(min-width: breakpoint-min(md)) {
order: 2;
}
}
&__stage {
height: $height / 2;
z-index: 1;
@media(min-width: breakpoint-min(lg)) {
height: $height;
}
}
&__navs {
&--prev {
order: 2;
text-align: left;
}
&--next {
order: 3;
text-align: right;
}
@media(min-width: breakpoint-min(md)) {
&--prev {
order: 1;
text-align: right;
}
&--next {
order: 3;
text-align: left;
}
}
}
&__item {
display: flex;
flex-direction: column;
position: relative;
z-index: 0;
/* 5 columns layout */
/*@media(min-width: breakpoint-min(lg)) {
flex: 0 0 20%;
max-width: 20%;
}*/
&:before {
background: color('gray-light');
bottom: 25px;
content: '';
height: 1px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
&:first-child,
&:last-child {
&:before {
width: 50%;
}
}
&:first-child {
&:before {
left: 50%;
}
}
@media(min-width: breakpoint-min(lg)) {
align-self: flex-start;
&:before {
bottom: $height / 2;
}
&:nth-child(odd) {
align-self: flex-end;
#{$self}__point {
top: 0;
}
#{$self}__clip {
padding-bottom: 0;
&__align {
display: table-cell;
vertical-align: top;
}
}
}
&:nth-child(even) {
&:before {
bottom: 0;
}
#{$self}__clip {
padding-top: 0;
&__align {
display: table-cell;
vertical-align: bottom;
}
}
}
}
}
&__point {
background: color('gray-light');
border-radius: 50%;
bottom: 0;
display: block;
left: 50%;
line-height: 50px;
margin-left: -25px;
position: absolute;
text-align: center;
width: 50px;
@media(min-width: breakpoint-min(lg)) {
bottom: auto;
margin-top: -25px;
top: 100%;
}
}
&__clip {
display: block;
height: $height / 2;
margin: 0;
overflow: hidden;
padding: 0 0 60px;
position: relative;
width: 100%;
z-index: 1;
@media(min-width: breakpoint-min(lg)) {
padding: $spacer 0;
}
}
&__text {
@include font-size(small);
display: table;
height: 100%;
line-height: line-height(large);
overflow: hidden;
text-align: center;
p {
font-size: inherit;
line-height: inherit;
}
}
}import $ from 'jquery';
import 'js-src/common/carousel';
$(() => {
$('.jq_timeline3').defaultCarousel({
disable_dots: true
});
});