Cacher is the code snippet organizer for pro developers

<div class="cycle-slideshow"
                data-cycle-fx=fade
                data-cycle-timeout=4000
                data-cycle-slides="> a"
                date-cycle-auto-height=1900:650
                data-cycle-center-horz=true
                data-cycle-pause-on-hover="true">
                    <!-- prev/next links -->
                    <div class="cycle-prev"></div>
                    <div class="cycle-next"></div>

                <!-- empty element for pager links -->
                <div class="cycle-pager"></div>

                    <a href="<?WS_ROOT ?>">
                        <img src="<?= IMG_DIR ?>banners/general-surgery.jpg" alt="" title="" />
                    </a>
                    <a href="<?WS_ROOT ?>">
                        <img src="<?= IMG_DIR ?>banners/aerial-shot-2.jpg" alt="" title="" />
                    </a>
            </div>
            
            
            
            
/*---- Banner Styles ----*/

.home .banner {
  height: auto;

  img {
    height: 100%;
  }
}

.banner {
  padding: 0;
  position: relative;
  z-index: 8;
  width: 100%;
  margin-bottom: 0;
  height: auto;
  overflow: hidden;

  img.first {
    display: block;
  }

  .cycle-slideshow {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .cycle-slideshow img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .cycle-slide {
    width: 100%;
    height: 100%;
  }

  .cycle-pager {
    bottom: 50px;
    cursor: pointer;
    left: 5px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 500;

    span {
      color: $black;
      display: inline-block;
      font-size: 35px;
      height: 20px;
      width: 20px;
    }

    span.cycle-pager-active {
      color: $blue;
    }
  }
}