<div class="mini-carousel">
<div class="mini-carousel__spacer">
<div class="mini-carousel__inner">
<div class="mini-carousel__title">
key facts
</div>
<div class="mini-carousel__item">
<h4 class="heading heading--medium">Top 20 biopharmaceutical companies</h4>
<div class="mini-carousel__item__inner">
<p>Ipsen is one of the worlds top 20 biopharmaceutical companies in terms of oncology sales Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
</div>
</div>
<div class="mini-carousel__item">
<h4 class="heading heading--medium">Top 20 biopharmaceutical companies 2</h4>
<div class="mini-carousel__item__inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
</div>
</div>
</div>
</div>
/* @mini-carousel */
// .mini-carousel {
// width: 400px;
// max-width: 100%;
// background-color: $slate-grey;
// color: white;
// @include poly-padding--large;
// &__inner {
// .category {
// margin-bottom: $small-spacing;
// }
// h4 {
// line-height: 1.4;
// }
// .flickity-slider {
// .mini-carousel__item {
// width: 100%;
// }
// }
// .flickity-page-dots {
// width: auto;
// right: 0;
// bottom: -17px;
// .dot {
// margin: 0 5px;
// background: white;
// }
// }
// }
// }
/* @wysiwyg-content */
.mini-carousel {
@include poly-padding-x--large;
position: relative;
&__spacer {
@include poly-padding-y--large;
width: 100%;
position: relative;
max-width: 1024px;
margin: 0 auto;
}
&__title {
@include poly-margin-bottom;
font-size: 12px;
font-weight: 400;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 3.4px;
color: #eb0047;
text-transform: uppercase;
}
&__inner {
@include poly-margin-y--large;
@include poly-padding-y--large;
box-sizing: border-box;
position: relative;
width: calc(100% + 1px);
}
&__item {
&__inner {
width: 80%;
}
}
.flickity-slider {
.mini-carousel__item {
width: 100%;
}
}
.flickity-page-dots {
width: 100%;
padding-bottom: $large-spacing;
text-align: left;
position: relative;
.dot {
margin: 0 $base-spacing 0 0;
position: relative;
@include themify($themes) {
background-color: themed('ctaColor');
}
&::before, &::after {
position: absolute;
top: 50%;
left: 50%;
margin: -18px 0 0 -18px;
width: 36px;
height: 36px;
border-radius: 50%;
content: '';
opacity: 0;
pointer-events: none;
}
&::before,
&::after {
@include themify($themes) {
box-shadow: 0 0 0 2px themed('ctaColor');
}
}
&.is-selected::before {
animation: anim-pulse-1 4s forwards;
}
&.is-selected::after {
animation: anim-pulse-2 4s forwards;
}
}
}
h1,h2,h3,h4,h5,h6 {
}
}
/* mini-carousel */
import $ from 'jQuery'
var jQueryBridget = require('jquery-bridget');
import Flickity from 'flickity'
jQueryBridget( 'flickity', Flickity, $ );
$(document).ready(function () {
if ($('.mini-carousel__item').length ) {
$('.mini-carousel__inner').flickity({
prevNextButtons: false,
wrapAround: true,
cellSelector: '.mini-carousel__item'
})
}
})