More than 4 images in Carousel

[AlexB52]

I know the carousels are still experimental but I thought I would raise those issues as I find them when trying to use carousels.

At the moment, the carousel only works with 4 images.

In _carousels.scss

  .carousel-locator {
    &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
    &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
    &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
    &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
      animation: carousel-slidein .75s ease-in-out 1;
      opacity: 1;
      z-index: $zindex-1;
    }
    &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
    &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
    &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
    &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
      color: $gray-color-light;
    }
  }

A quick fix is to add more lines or to replace it with the code below where you choose a bigger $number

  $number: 15;
  .carousel-locator {
    @for $i from 0 to $number{
      &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
        animation: carousel-slidein .75s ease-in-out 1;
        opacity: 1;
        z-index: $zindex-1;
      }
      &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
        color: $gray-color-light;
      }
    }
  }

Both methods require a hardcoded number and it would be nice to have it work with any number

[picturepan2]

@AlexB52 Thanks, I will add a variable to it.

[picturepan2]

@AlexB52 The default is 8 images. You can change the variable and re-compile it get more numbers. Thank you.

[BaloghDavid]

@picturepan2 Please set it to "!default" and won't need to re-compile it.

_carousels.scss

// Carousels
// The number of carousel images
$carousel-number: 8 !default;
...

And use

$carousel-number: 10;
@import '~spectre.css/src/carousels';