Lehigh Clutch Style Guide

Image Slider: Default 

<section class="story-slide lazy slider">

    <div class="slide-wrapper" style="background-image: url(/img/lava.jpg);">
        <div class="slide-content">
            <h2></h2>
            <div class="mobile-image">
                <img src="/img/lava.jpg" alt="" />
            </div>
            <p>

            </p>
            <div class="slider_buttons">
            </div>
            <!-- end slider_buttons -->
        </div>
        <!-- end slide-content -->
    </div>

    <div class="slide-wrapper" style="background-image: url(/img/maxresdefault.jpg);">
        <div class="slide-content">
            <h2></h2>
            <div class="mobile-image">
                <img src="/img/maxresdefault.jpg" alt="" />
            </div>
            <p>

            </p>
            <div class="slider_buttons">
            </div>
            <!-- end slider_buttons -->
        </div>
        <!-- end slide-content -->
    </div>

    <div class="slide-wrapper" style="background-image: url(/img/lava-2.jpg);">
        <div class="slide-content">
            <h2></h2>
            <div class="mobile-image">
                <img src="/img/lava-2.jpg" alt="" />
            </div>
            <p>

            </p>
            <div class="slider_buttons">
            </div>
            <!-- end slider_buttons -->
        </div>
        <!-- end slide-content -->
    </div>
</section>
 
<section class="story-slide lazy slider">
  {% block cms_override %}
    {% for slide_img in slide_imgs %}
      {% include "@carousel_item" with slide_img only %}
    {% endfor %}
  {% endblock cms_override %}
</section>
 
{
  "slide_imgs": [
    {
      "slide_src_img": "/img/lava.jpg"
    },
    {
      "slide_src_img": "/img/maxresdefault.jpg"
    },
    {
      "slide_src_img": "/img/lava-2.jpg"
    }
  ]
}
  • Content: 
    .story-slide {
  margin: 0 0 -6px 0 !important;
  margin-top: $space_and_half;
  margin-bottom: $space_and_half !important;

  @include media-breakpoint-down(md) {
    margin: $space_three 0 0 0 !important;
    padding: 0 0 $space_three 0 !important;
    border-bottom: 1px solid $grey_lightest;
  }

  .slick {

    &-next,
    &-prev {
      height: inherit;
      width: inherit;
      z-index: 2;

      @include media-breakpoint-down(md) {
        top: 30%;
      }

      &::before {
        @include font-awesome-base;
        color: $white;
        font-size: 8rem !important;
        text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;

        @include media-breakpoint-down(xs) {
          font-size: 4rem !important;
        }
      }
    }

    &-prev {
      left: $spacer !important;

      &::before {
        content: "\f104" !important;
      }
    }

    &-next {
      right: $spacer !important;

      &::before {
        content: "\f105" !important;
      }
    }

    &-dots {
      bottom: $space_three;
      right: $space_four;
      text-align: center;
      width: inherit;
      position: unset;

      @include media-breakpoint-up(md) {
        position: absolute;
      }

      li {
        margin: 0 10px;

        button {
          &::before {
            font-family: $font_awesome !important;
            font-size: 1.5rem;
            -webkit-text-stroke: 4px $lehigh_brown_60;
            opacity: 1;
            color: transparent;
            content: '\2022' !important;

            @include media-breakpoint-up(md) {
              -webkit-text-stroke: 4px $lehigh_brown_60;
            }
          }
        }

        &.slick-active {
          button {
            &::before {
              opacity: 1;
              color: $lehigh_brown;

              @include media-breakpoint-up(md) {
                color: $black;
              }
            }
          }
        }

        &:last-of-type {
          margin: 0 0 0 10px;
        }
      }
    }

    &-dotted {
      &.slick-slider {
        margin: 0;
      }
    }
  }
}

.slick-next,
.slick-prev {
  &:focus,
  &:hover {
    &::before {
      color: $lehigh_brown;
      font-weight: 900;
    }
  }
}
  • URL: /components/raw/image_slider/image_slider.scss
  • Filesystem Path: bits/05-sections/image_slider/image_slider.scss
  • Size: 2.2 KB

Display the image slider without text.