一款CSS和jQuery制作的幻灯片，支持键盘方向键切换

简介：

尽管演示幻灯片通常被应用在应用程序APP中，但是我们挑战自我，为桌面浏览器创建了一款演示幻灯片效果，这不是一件容易的事。
这个效果怎么操作呢？最简单的方法是使用键盘上的方向键。

HTML结构:

<div class="cd-slideshow-wrapper">
  <nav class="cd-slideshow-nav">
    <button class="cd-nav-trigger">
      Open Navigation
      <span aria-hidden="true">
      </span>
    </button>
    <div class="cd-nav-items">
      <ol>
        <li>
          <a href="#slide-1">
            Slide 1
          </a>
        </li>
        <li>
          <a href="#slide-2">
            Slide 2
          </a>
          <ol class="sub-nav">
            <li>
              <a href="#slide-2">
                Slide 2 - Sub 1
              </a>
            </li>
            <!-- other sub-slide links here -->
          </ol>
        </li>
        <li>
          <a href="#slide-3">
            Slide 3
          </a>
        </li>
        <!-- other slide links here -->
      </ol>
    </div>
    <!-- .cd-nav-items -->
  </nav>
  <!-- .cd-slideshow-nav -->
  <ol class="cd-slideshow">
    <li class="visible" id="slide-1">
      <div class="cd-slider-content">
        <div class="content-wrapper">
          <h2>
            Presentation Slideshow
          </h2>
          <p>
            A simple presentation template in CSS &amp; jQuery.
          </p>
        </div>
      </div>
    </li>
    <li id="slide-2">
      <ol class="sub-slides">
        <li>
          <div class="cd-slider-content">
            <div class="content-wrapper">
              <h2>
                Slider #2
              </h2>
            </div>
          </div>
        </li>
        <!-- sub-slides content here -->
      </ol>
      <!-- .sub-slides -->
    </li>
    <!-- additional slides here -->
  </ol>
  <!-- .cd-slideshow -->
</div>
<!-- .cd-slideshow-wrapper -->

主要CSS代码:

.cd-slideshow .sub-slides {
  width: 100%;
  transition: transform 0.3s;
}
.cd-slideshow > li, 
.cd-slideshow .sub-slides > li {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100vw;
}
.cd-slideshow .sub-slides > li {
  float: left;
}

@media only screen and (min-width: 1100px) {
  .cd-slideshow-wrapper {
    height: 100vh;
    overflow: hidden;
  }
 
  .cd-slideshow {
    transition: transform 0.6s;
  }
  .cd-slideshow > li, .cd-slideshow .sub-slides > li {
    height: auto;
    width: auto;
  }
 
  .cd-slider-content {
    height: 84vh;
    width: 90vw;
    margin: 2vh 5vw;
    border-radius: 10px;
    cursor: pointer;
  }
  .visible .sub-visible .cd-slider-content, 
  .visible > .cd-slider-content {
    /* visible slide */
    cursor: auto;
  }
  .cd-slideshow > li:first-of-type .cd-slider-content {
    margin-top: 8vh;
  }
  .sub-slides > li:first-of-type .cd-slider-content {
    margin-left: 5vw;
  }
  .sub-slides > li .cd-slider-content {
    margin-left: 1.25vw;
    margin-right: 1.25vw;
  }
  .cd-slider-content .content-wrapper {
    height: 100%;
    /* hide the slide content if the slide is not selected/visible */
    opacity: 0;
    box-shadow: 0 6px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-radius: inherit;
    transition: opacity 0.6s;
  }
  .cd-slider-content::after {
    /* this is used to change the slide background color when the slide is out of focus */
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background-color: #3a3a3a;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s, visibility 0.6s;
  }
  .visible .cd-slider-content .content-wrapper {
    opacity: 1;
  }
  .visible .cd-slider-content::after {
    opacity: 0;
    visibility: hidden;
  }
}

主要事件实现代码:

function updateSubSlide(listItem, string, subSlide) {
    var translate, marginSlide = Number(listItem.find('.cd-slider-content').eq(0).css('margin-right').replace('px', '')) * 6,
    windowWidth = window.innerWidth;

    windowWidth = (mq == 'desktop') ? windowWidth - marginSlide: windowWidth;

    if (listItem.children('.sub-slides').length > 0) {
        var subSlidesWrapper = listItem.children('.sub-slides'),
        visibleSubSlide = subSlidesWrapper.children('.sub-visible');

        if (string == 'nav') {
            /* we have choosen a new slide from the navigation */
            var newSubSlide = subSlide;
        } else {
            var newSubSlide = (string == 'next') ? visibleSubSlide.next() : visibleSubSlide.prev();
        }
        var newSubSlidePosition = newSubSlide.index();
        translate = parseInt( - newSubSlidePosition * windowWidth);
        setTransformValue(subSlidesWrapper.get(0), 'translateX', translate + 'px');
        visibleSubSlide.removeClass('sub-visible');
        newSubSlide.addClass('sub-visible');
    }
}

function setTransformValue(element, property, value) {
    element.style["-webkit-transform"] = property + "(" + value + ")";
    element.style["-moz-transform"] = property + "(" + value + ")";
    element.style["-ms-transform"] = property + "(" + value + ")";
    element.style["-o-transform"] = property + "(" + value + ")";
    element.style["transform"] = property + "(" + value + ")";
    // ...
}