Carousel1 (dots, arrows, gutters):
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Carousel2 (dots, line gutters):
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Carousel3 (arrows, no gutters):
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Carousel4 (single item, autoplay):
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
<p>Carousel1 (dots, arrows, gutters):</p>
<div class="o-carousel jq_auto_carousel">
<div class="row no-gutters">
<div class="o-carousel__navs o-carousel__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-carousel__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-carousel__wrap col-24 col-md-20">
<div data-carousel="stage" class="o-carousel__stage row">
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 1">
<p>Slide 1</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 2">
<p>Slide 2</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 3">
<p>Slide 3</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 4">
<p>Slide 4</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 5">
<p>Slide 5</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 6">
<p>Slide 6</p>
</div>
</div>
</div>
</div>
<div class="o-carousel__dots m-nav-base">
<ul class="m-nav-base__list" data-carousel="dots">
<li class="m-nav-base__item" aria-hidden="true" data-selected="false">
<button type="button" tabindex="0" class="o-carousel__dot">
<span class="sr-only sr-only-focusable">Y</span>
</button>
<!-- Skip the closing tag -->
</ul>
</div>
</div>
<p>Carousel2 (dots, line gutters):</p>
<div data-carousel-options='{"disable_arrows":true}' class="o-carousel jq_auto_carousel">
<div class="row">
<div data-carousel="wrap" class="o-carousel__wrap col-24 px-0">
<div data-carousel="stage" class="o-carousel__stage row line-gutters">
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 1">
<p>Slide 1</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 2">
<p>Slide 2</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 3">
<p>Slide 3</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 4">
<p>Slide 4</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 5">
<p>Slide 5</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 6">
<p>Slide 6</p>
</div>
</div>
</div>
</div>
<div class="o-carousel__dots m-nav-base">
<ul class="m-nav-base__list" data-carousel="dots">
<li class="m-nav-base__item" aria-hidden="true" data-selected="false">
<button type="button" tabindex="0" class="o-carousel__dot">
<span class="sr-only sr-only-focusable">Y</span>
</button>
<!-- Skip the closing tag -->
</ul>
</div>
</div>
<p>Carousel3 (arrows, no gutters):</p>
<div data-carousel-options='{"disable_dots":true}' class="o-carousel jq_auto_carousel">
<div class="row no-gutters">
<div class="o-carousel__navs o-carousel__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-carousel__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-carousel__wrap col-24 col-md-20">
<div data-carousel="stage" class="o-carousel__stage row no-gutters">
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 1">
<p>Slide 1</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 2">
<p>Slide 2</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 3">
<p>Slide 3</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 4">
<p>Slide 4</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 5">
<p>Slide 5</p>
</div>
<div class="o-carousel__item col-24 col-sm-12 col-lg-8">
<img src="https://placehold.it/450x200/" loading="lazy" width="450" height="200" alt="Slide 6">
<p>Slide 6</p>
</div>
</div>
</div>
</div>
</div>
<p>Carousel4 (single item, autoplay):</p>
<div data-carousel-options='{"one_item":true,"infinite":true,"autoplay":true}' class="o-carousel jq_auto_carousel">
<div class="row no-gutters">
<div class="o-carousel__navs o-carousel__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-carousel__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-carousel__wrap col-24 col-md-20">
<div data-carousel="stage" class="o-carousel__stage row no-gutters">
<div class="o-carousel__item col-24">
<img src="https://placehold.it/1200x720/" loading="lazy" width="1200" height="720" alt="Slide 1">
<p>Slide 1</p>
</div>
<div class="o-carousel__item col-24">
<img src="https://placehold.it/1200x720/" loading="lazy" width="1200" height="720" alt="Slide 2">
<p>Slide 2</p>
</div>
<div class="o-carousel__item col-24">
<img src="https://placehold.it/1200x720/" loading="lazy" width="1200" height="720" alt="Slide 3">
<p>Slide 3</p>
</div>
<div class="o-carousel__item col-24">
<img src="https://placehold.it/1200x720/" loading="lazy" width="1200" height="720" alt="Slide 4">
<p>Slide 4</p>
</div>
<div class="o-carousel__item col-24">
<img src="https://placehold.it/1200x720/" loading="lazy" width="1200" height="720" alt="Slide 5">
<p>Slide 5</p>
</div>
<div class="o-carousel__item col-24">
<img src="https://placehold.it/1200x720/" loading="lazy" width="1200" height="720" alt="Slide 6">
<p>Slide 6</p>
</div>
</div>
</div>
</div>
<div class="o-carousel__dots m-nav-base">
<ul class="m-nav-base__list" data-carousel="dots">
<li class="m-nav-base__item" aria-hidden="true" data-selected="false">
<button type="button" tabindex="0" class="o-carousel__dot">
<span class="sr-only sr-only-focusable">Y</span>
</button>
<!-- Skip the closing tag -->
</ul>
</div>
</div>@import "molecules/nav-base/index";
.o-carousel {
$self: &;
&__wrap {
overflow-x: auto;
overflow-y: hidden;
@media(min-width: breakpoint-min(md)) {
order: 2;
}
}
&__stage {
flex-wrap: nowrap;
}
&__item {
img {
pointer-events: none;
user-select: none;
}
}
&__navs {
align-self: center;
.no-js & {
display: none;
}
&--prev {
text-align: left;
}
&--next {
text-align: right;
}
@media(min-width: breakpoint-min(md)) {
text-align: center;
&--prev {
order: 1;
}
&--next {
order: 3;
}
}
}
&__nav {
@include font-size(xx-large);
background: color('gray');
border: 0;
border-radius: 50%;
box-sizing: content-box;
color: color('white');
cursor: pointer;
line-height: 1;
padding: space(1);
width: em(100%);
&:disabled {
cursor: default;
visibility: hidden;
}
#{$self} &:before {
width: 100%;
}
&--prev {
letter-spacing: em(20%);
}
&--next {
letter-spacing: em(-20%);
}
}
&__dots {
text-align: center;
.no-js & {
display: none;
}
}
&__dot {
background: color('gray');
border: 0;
border-radius: 50%;
display: block;
padding: space(1);
[data-selected="false"] > & {
cursor: pointer;
opacity: .5;
}
}
}import $ from 'jquery';
import 'js-src/common/carousel';
$(() => {
$('.jq_auto_carousel').each(function() {
$(this).defaultCarousel($.extend({}, $(this).data('carousel-options')));
});
});