Gallery Slider Block

<If check="{{ slider_gallery-ids }}">
  <div class="tt-slider-gallery tslider-pagination--{{ slider_pagination_type }}">
    <Slider>
      <Loop type=attachment include="{{ slider_gallery-ids }}">
        <Slide>
          <figure class="tt-slider-gallery__item">
            <img src="{Field url size=large}" alt="{Field alt}" class="wp-image-{Field id}" srcset="{Field srcset size=large}" sizes="{Field sizes size=large}" />
            <If field=caption><figcaption><Field caption /></figcaption></If>
           </figure>
        </Slide>
      </Loop>
    </Slider>
  </div>
</If>

$slider_color: #002deb !default;
$slider_color_hover: #0024bc !default;
$slider_color_focus: #fed62d !default;
$slider_color_button_text: #fff !default;

.tt-slider-gallery {
  border: 1px solid #ddd;
  border-radius: $slider_radius;

  &__item {
    margin: 0;

    img {
      border-top-left-radius: $slider_radius_left - 1px;
      border-top-right-radius: $slider_radius_right - 1px;
      aspect-ratio: #{$slider_aspect_ratio};
    }
  }

  .tslide-outer .tslider {
    height: auto !important;

    img {
      width: 100%;
    }
  }
  .tslider-action > a {
    display: block;
    top: 50%;
    text-align: center;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    font-size: 20px;
    width: 2em;
    height: 2em;
    line-height: 2em;
    border-radius: 99px;
    padding: 0;
    background-image: none;
    background-color: $slider_color;
    opacity: 1;
    color: $slider_color_button_text;
    transform: translatey(-50%);
    transition: background-color .2s ease;


    &:hover, &:focus {
      background-color: $slider_color_hover;
      opacity: 1;
    }
  }
  .slider-action > a::before {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-decoration: none;
  }
  .tslider-action > .tslider-prev::before {
    content: "\1f868";
  }

  .tslider-action > .tslider-next::before {
    content: "\1f86a";
  }

  .tslide-outer .tslider-pager.tslider-pager {
    padding: .5em 2em;
    text-align: left;
  }

  .tslide-outer .tslider-pager.tslider-pager > li a {
    border-radius: 0;
    height: 3px;
    width: 2.2em;
    background-color: $slider_color;
    opacity: .2;
  }

  .tslide-outer .tslider-pager.tslider-pager > li a:focus {
    opacity: 1;
    background-color: $slider_color_focus;
  }

  .tslide-outer .tslider-pager.tslider-pager > li.active a, 
  .tslide-outer .tslider-pager.tslider-pager > li a:hover {
    opacity: 1;
    background-color: $slider_color;
  }

  .tslide-outer figcaption {
    text-align: left;
    color: initial;
    padding: 1em 2em 0;
  }
  .tslider-pagination--ordered {
    .tslider-pager.tslider-pager {
      counter-reset: slider-pager;
    }
    .tslider-pager.tslider-pager > li {   
      a {
        color: $slider_color_button_text;
        font-size: 0.7em;
        background-color: $slider_color;
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.5;
        text-indent: 0;
        text-decoration: none;
      }
    }
  }
}

<Control type="gallery" name="slider_gallery" label="Gallery" size="large" />
<Control type="select" name="slider_pagination_type" label="Pagination Type">
  <Map options>
    <Key default>Normal</Key>
    <Key ordered>Numbers</Key>
  </Map>
</Control>
<Control type="color" name="slider_color" label="Color" default="#002deb" />
<Control type="color" name="slider_color_hover" label="Hover Color" default="#0024bc" />
<Control type="dimension" name="slider_radius" label="Border Radius" default="5px">
  <Key units>px,%</Key>
  <Key default_unit>px</Key>
</Control>
<Control type="select" name="slider_aspect_ratio" label="Aspect Ratio">
  <Map options>
    <Key unset>None</Key>
    <Key name="16 / 9">16/9</Key>
    <Key name="4 / 3">4/3</Key>
    <Key name="3 / 2">3/2</Key>
  </Map>
</Control>