New carousel indicators: dots, vertical, thumbs (#1101)

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)
 })
 

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 %}

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 %}
 

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 %}
-<div id="{{ include.id }}" class="carousel slide" data-bs-ride="carousel">
-   {% if include.show-indicators %}
-   <ol class="carousel-indicators">
-      {% for i in (1..limit) %}
-      <li data-bs-target="#{{ include.id }}" data-bs-slide-to="{{ forloop.index | minus: 1 }}" class="{% if forloop.first %}active{% endif %}"></li>
+{% assign id = include.id | default: "carousel" %}
+<div id="{{ id }}" class="carousel slide{% if include.fade %} carousel-fade{% endif %}" data-bs-ride="carousel">
+   {% if include.indicators %}
+   <div class="carousel-indicators{% if include.indicators-vertical %} carousel-indicators-vertical{% endif %}{% if include.indicators-dot %} carousel-indicators-dot{% elsif include.indicators-thumb %} carousel-indicators-thumb{% endif %}">
+	   {% for photo in photos limit: limit offset: offset %}
+      <button type="button" data-bs-target="#{{ id }}" data-bs-slide-to="{{ forloop.index | minus: 1 }}" class="{%if include.indicators-thumb-ratio %} ratio ratio-4x3{% endif %}{% if forloop.first %} active{% endif %}"{% if include.indicators-thumb %} style="background-image: url({{ site.base }}/static/photos/{{ photo.file }})"{% endif %}></button>
       {% endfor %}
-   </ol>
+   </div>
    {% endif %}
 
    <div class="carousel-inner">
@@ -15,8 +16,8 @@
       <div class="carousel-item{% if forloop.first %} active{% endif %}">
          <img class="d-block w-100" alt="" src="{{ site.base }}/static/photos/{{ photo.file }}">
 
-         {% if include.show-captions %}
-         <div class="carousel-item-background d-none d-md-block"></div>
+         {% if include.captions %}
+         <div class="carousel-caption-background d-none d-md-block"></div>
          <div class="carousel-caption d-none d-md-block">
             <h3>Slide label</h3>
             <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
@@ -26,12 +27,12 @@
       {% endfor %}
    </div>
 
-   {% if include.show-controls %}
-   <a class="carousel-control-prev" href="#{{ include.id }}" role="button" data-bs-slide="prev">
+   {% if include.controls %}
+   <a class="carousel-control-prev" href="#{{ id }}" role="button" data-bs-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="visually-hidden">Previous</span>
    </a>
-   <a class="carousel-control-next" href="#{{ include.id }}" role="button" data-bs-slide="next">
+   <a class="carousel-control-next" href="#{{ id }}" role="button" data-bs-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="visually-hidden">Next</span>
    </a>

src/pages/carousel.html

@@ -5,17 +5,29 @@ layout: default
 menu: base.carousel
 ---
 
-<div class="row">
-   <div class="col-md-6">
+<div class="row row-cards">
+   <div class="col-md-4">
       {% include cards/carousel.html id="carousel-default" %}
    </div>
-   <div class="col-md-6">
-      {% include cards/carousel.html id="carousel-indicators" title="Carousel with indicators" show-indicators=true offset=5 %}
+   <div class="col-md-4">
+      {% include cards/carousel.html id="carousel-indicators" title="Carousel with indicators" indicators=true offset=5 %}
    </div>
-   <div class="col-md-6">
-      {% include cards/carousel.html id="carousel-controls" title="Carousel with controls" show-controls=true offset=10 %}
+   <div class="col-md-4">
+      {% include cards/carousel.html id="carousel-controls" title="Carousel with controls" controls=true offset=10 %}
    </div>
-   <div class="col-md-6">
-      {% include cards/carousel.html id="carousel-captions" title="Carousel with captions" show-captions=true show-controls=true offset=15 %}
+	<div class="col-md-4">
+		{% include cards/carousel.html id="carousel-captions" title="Carousel with captions" captions=true controls=true offset=15 %}
+	</div>
+	<div class="col-md-4">
+		{% include cards/carousel.html id="carousel-indicators-dot" title="Carousel with dot indicators" indicators=true indicators-dot=true offset=20 fade=true %}
+	</div>
+	<div class="col-md-4">
+		{% 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 %}
+	</div>
+	<div class="col-md-4">
+		{% 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 %}
+	</div>
+	<div class="col-md-4">
+		{% 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 %}
 	</div>
 </div>

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";

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,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$carousel-control-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") !default;
 $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$carousel-control-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'></polyline></svg>") !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;

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));
+}