coreui/coreui-angular

Option to change navigation control design/images in Carousel

toPrabhat opened this issue · 8 comments

toPrabhat commented

Before opening:

Feature requests must include:

  • As much detail as possible for what we should add and why it's important to Bootstrap
  • Relevant links to prior art, screenshots, or live demos whenever possible
xidedix commented

@toPrabhat
You can change navigation control images using the custom content for c-carousel-controls sub-component.
This information appears to be missing from the docs. Thank you for bringing it to our attention.

<c-carousel ...>
  <c-carousel-inner>
    ...
  </c-carousel-inner>
  <c-carousel-control [tabIndex]="0" direction="prev">
    <svg cIcon name="cil-chevron-left" size="3xl"></svg>
    <span class="visually-hidden">Previous</span>
  </c-carousel-control>
  <c-carousel-control [tabIndex]="0" direction="next">
    <svg cIcon name="cil-chevron-right" size="3xl"></svg>
    <span class="visually-hidden">Next</span>
  </c-carousel-control>
</c-carousel>
dbarrerap commented

Can this be done with the indicators?

xidedix commented

@dbarrerap
At the moment, the only option is to modify the .carousel-indicators CSS class.
How would you like to modify the indicators’ visual appearance?

dbarrerap commented

Instead of lines, use thumbnails of the actual images

baloo32 commented

As issue #214 also done to support pause, could I ask potentially for an optional "pause" button to be able to be enabled on the c-carousel-indicators. Its a bit of a fight to get our own custom control to look nice with the current indicators without putting it below them... Thx

xidedix commented

@dbarrerap starting from v5.3.16 you can pass your custom template into c-carousel-indicators. Styling is up to you.

<c-carousel [interval]="5000">
  <c-carousel-indicators #indicators="cCarouselIndicators">
    <ng-template cTemplateId="carouselIndicatorsTemplate">
      @for (slide of slides[0]; track slide; let i = $index) {
        <button
          [attr.data-coreui-target]="i"
          type="button"
          (click)="indicators.onClick(i)"
          [class]="{ active: indicators.active === i }"
          [attr.aria-current]="indicators.active === i"
          [cBorder]="true"
          style="height: auto;"
          cRounded="pill"
        >
          <img
            [src]="slide.src"
            alt="{{slide.title}}"
            class="d-flex w-100"
            loading="lazy"
            cRounded="pill"
          />
        </button>
      }
    </ng-template>
  </c-carousel-indicators>
  <c-carousel-inner>
    ...
  </c-carousel-inner>
</c-carousel>
dbarrerap commented

@dbarrerap starting from v5.3.16 you can pass your custom template into c-carousel-indicators. Styling is up to you.

Awesome! Thank you very much!