diff --git a/gulpfile.js b/gulpfile.js index 5f1ab91eb3..31836f443b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -348,7 +348,7 @@ gulp.task('mjs', () => { */ gulp.task('watch-jekyll', (cb) => { browserSync.notify('Building Jekyll') - return spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--destination', demoDir, '--trace'], { stdio: 'inherit' }) + return spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--incremental', '--destination', demoDir, '--trace'], { stdio: 'inherit' }) .on('close', cb) }) diff --git a/src/pages/_docs/carousel.md b/src/pages/_docs/carousel.md index 1acb8cbb08..99c30e3bf1 100644 --- a/src/pages/_docs/carousel.md +++ b/src/pages/_docs/carousel.md @@ -11,6 +11,49 @@ bootstrap-link: components/carousel/ Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow. {% capture code %} -{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %} +{% include ui/carousel.html indicators=true controls=true id="carousel-sample" %} {% endcapture %} -{% include example.html code=code max-width="20rem" centered=true %} +{% include example.html code=code max-width="30rem" centered=true %} + +## Dots indicators + +You can replace the standard indicators with dots. Just add the `carousel-indicators-dot` class to your carousel: + +{% capture code %} +{% include ui/carousel.html id="carousel-indicators-dot" title="Carousel with dot indicators" indicators=true indicators-dot=true offset=20 fade=true %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} + +## Thumb indicators + +The syntax is similar with thumbnails. Add class `carousel-indicators-thumb` and add `background-image` to element `[data-bs-target]`. Default thumbnails have an aspect ratio of 1:1. To change this use `ratio` utils. + +{% capture code %} +{% include ui/carousel.html id="carousel-indicators-thumb" title="Carousel with thumbnail indicators" indicators=true indicators-thumb=true indicators-thumb-ratio=true offset=25 fade=true %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} + +## Vertical indicators + +To make the indicators go to the right side, add the `carousel-indicators-vertical` class. You can combine it with other classes that are responsible for dots or thumbnails. + +{% capture code %} +{% include ui/carousel.html id="carousel-indicators-dot-vertical" title="Carousel with vertical dot indicators" indicators=true indicators-vertical=true indicators-dot=true offset=30 fade=true %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} + +Likewise, you can add thumbnails on the right side: + +{% capture code %} +{% include ui/carousel.html id="carousel-indicators-thumb-vertical" title="Carousel with thumbnail indicators" indicators=true indicators-vertical=true indicators-thumb=true indicators-thumb-ratio=true offset=22 fade=true %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} + +## Carousel with captions + +Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. To make the text more readable on the image you can add `carousel-caption-background` which will add a black overlay over the image. + +{% capture code %} +{% include ui/carousel.html id="carousel-captions" title="Carousel with captions" captions=true controls=true offset=15 %} +{% endcapture %} +{% include example.html code=code max-width="30rem" centered=true %} \ No newline at end of file diff --git a/src/pages/_includes/example.html b/src/pages/_includes/example.html index a03fda0537..f2bd644dfc 100644 --- a/src/pages/_includes/example.html +++ b/src/pages/_includes/example.html @@ -42,6 +42,7 @@ {% assign html = html | replace_regex: 'src="([^"]+)"', 'src="..."' %} {% assign html = html | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %} {% assign html = html | replace_regex: '\{% hide %\}.*?\{% endhide %\}', '' %} +{% assign html = html | replace_regex: 'class=" ', 'class="' %} {% assign html = html | htmlbeautifier %} diff --git a/src/pages/_includes/ui/carousel.html b/src/pages/_includes/ui/carousel.html index 7c5c3edf2f..0f85d2a622 100644 --- a/src/pages/_includes/ui/carousel.html +++ b/src/pages/_includes/ui/carousel.html @@ -1,13 +1,14 @@ {% assign limit = include.limit | default: 5 %} {% assign offset = include.offset | default: 0 %} {% assign photos = site.data.photos | where: "horizontal", true %} - {% endif %}
@@ -15,8 +16,8 @@
- {% if include.show-captions %} -
+ {% if include.captions %} +

Slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

@@ -26,12 +27,12 @@

Slide label

{% endfor %}
- {% if include.show-controls %} - + {% if include.controls %} + - + diff --git a/src/pages/carousel.html b/src/pages/carousel.html index 727b79a086..70054268de 100644 --- a/src/pages/carousel.html +++ b/src/pages/carousel.html @@ -5,17 +5,29 @@ menu: base.carousel --- -
-
+
+
{% include cards/carousel.html id="carousel-default" %}
-
- {% include cards/carousel.html id="carousel-indicators" title="Carousel with indicators" show-indicators=true offset=5 %} +
+ {% include cards/carousel.html id="carousel-indicators" title="Carousel with indicators" indicators=true offset=5 %}
-
- {% include cards/carousel.html id="carousel-controls" title="Carousel with controls" show-controls=true offset=10 %} -
-
- {% include cards/carousel.html id="carousel-captions" title="Carousel with captions" show-captions=true show-controls=true offset=15 %} +
+ {% include cards/carousel.html id="carousel-controls" title="Carousel with controls" controls=true offset=10 %}
+
+ {% include cards/carousel.html id="carousel-captions" title="Carousel with captions" captions=true controls=true offset=15 %} +
+
+ {% include cards/carousel.html id="carousel-indicators-dot" title="Carousel with dot indicators" indicators=true indicators-dot=true offset=20 fade=true %} +
+
+ {% include cards/carousel.html id="carousel-indicators-thumb" title="Carousel with thumbnail indicators" indicators=true indicators-thumb=true indicators-thumb-ratio=true offset=25 fade=true %} +
+
+ {% include cards/carousel.html id="carousel-indicators-dot-vertical" title="Carousel with vertical dot indicators" indicators=true indicators-vertical=true indicators-dot=true offset=30 fade=true %} +
+
+ {% include cards/carousel.html id="carousel-indicators-thumb-vertical" title="Carousel with thumbnail indicators" indicators=true indicators-vertical=true indicators-thumb=true indicators-thumb-ratio=true offset=22 fade=true %} +
diff --git a/src/scss/_core.scss b/src/scss/_core.scss index f990e41b42..ff2b38ffe4 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -16,6 +16,7 @@ @import "ui/breadcrumbs"; @import "ui/buttons"; @import "ui/calendars"; +@import "ui/carousel"; @import "ui/cards"; @import "ui/close"; @import "ui/dropdowns"; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 8cae2af38f..a1463fbef7 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -390,6 +390,11 @@ $carousel-control-icon-width: 1.5rem !default; $carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; $carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; +$carousel-indicator-thumb-opacity: .75 !default; +$carousel-indicator-thumb-width: 4rem !default; + +$carousel-indicator-dot-width: .5rem !default; + //close $btn-close-width: .75rem !default; diff --git a/src/scss/ui/_carousel.scss b/src/scss/ui/_carousel.scss new file mode 100644 index 0000000000..42d5ca2ba1 --- /dev/null +++ b/src/scss/ui/_carousel.scss @@ -0,0 +1,68 @@ +.carousel { + +} + +.carousel-indicators-vertical { + left: auto; + top: 0; + margin: 0 1rem 0 0; + flex-direction: column; + + [data-bs-target] { + margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer; + width: $carousel-indicator-height; + height: $carousel-indicator-width; + border: 0; + border-left: $carousel-indicator-hit-area-height solid transparent; + border-right: $carousel-indicator-hit-area-height solid transparent; + } +} + +.carousel-indicators-dot { + [data-bs-target] { + width: $carousel-indicator-dot-width; + height: $carousel-indicator-dot-width; + border-radius: $border-radius-pill; + border: $carousel-indicator-hit-area-height solid transparent; + margin: 0; + } +} + +.carousel-indicators-thumb { + [data-bs-target] { + width: $carousel-indicator-thumb-width * .5; + height: auto; + background: no-repeat center/cover; + border: 0; + border-radius: $border-radius; + box-shadow: $shadow; + margin: 0 $carousel-indicator-spacer; + opacity: $carousel-indicator-thumb-opacity; + + @include media-breakpoint-up(lg) { + width: $carousel-indicator-thumb-width; + } + + &:before { + content: ''; + padding-top: var(--#{$variable-prefix}aspect-ratio, 100%); + display: block; + } + } + + &.carousel-indicators-vertical { + [data-bs-target] { + margin: $carousel-indicator-spacer 0; + } + } +} + +.carousel-caption-background { + background: red; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 90%; + background: linear-gradient(0deg, rgba($dark, .9), rgba($dark, 0)); +} \ No newline at end of file