这是一款js动感水平拖拽式轮播图特效。该轮播图特效通过拖拽方式切换图片，拖拽过程中图片有弹性缩放效果，非常炫酷。

使用方法

在HTML文件中引入。

  
<link rel="stylesheet" href="./css/style.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script src='js/imagesloaded.pkgd.min.js'></script>
<script  src="./js/script.js"></script>
HTML结构
<figure class="logo logo--top js-trigger">
  <img src="img/logo.svg">
</figure>

<a href="#" target="_blank" class="resize">
  <div class="resize__inner">
    <figure class="logo logo--resize">
      <img src="img/logo.svg">
    </figure>
    <p>Please view in <span>full page</span> mode</p>
  </div>
</a>

<a href="#" target="_blank" class="hi">
  Hi
</a>

<a href="#" target="_blank" rel="nofollow" class="menu-btn js-menu-btn">
  <div class="menu-btn__circles">
    <span class="menu-btn__circle menu-btn__circle--top js-menu-btn__circle--top"></span>
    <span class="menu-btn__circle menu-btn__circle--bottom js-menu-btn__circle--bottom"></span>
  </div>
  <div class="menu-btn__text">See shot</div>
</a>

<div class="scroll" data-scroll>
  
  <nav class="filter">
    <ul class="filter__list">
      <li class="filter__item">
        <a href="#" class="filter__link is-active js-trigger">
          <div class="filter__link-mask" area-hidden><span>Interiors</span></div>
          Interiors
        </a>   
      </li>
      <li class="filter__item">
        <a href="#" class="filter__link js-trigger">
          <div class="filter__link-mask" area-hidden><span>Residential</span></div>
          Residential
        </a>   
      </li>
      <li class="filter__item">
        <a href="#" class="filter__link js-trigger">
          <div class="filter__link-mask" area-hidden><span>Commercial</span></div>
          Commercial
        </a>   
      </li>
       <li class="filter__item">
        <a href="#" class="filter__link js-trigger">
          <div class="filter__link-mask" area-hidden><span>Installation</span></div>
          Installation
         </a>   
      </li>
    </ul>
  </nav>
  
  <div class="scroll-content" data-scroll-content>
    
    <article class="slide slide--1 js-slide">
      <div class="slide__inner">
        <div class="slide__img js-transition-img">
          <figure class="js-transition-img__inner">
            <img src="img/project-one.png" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
    <article class="slide slide--2 js-slide">
      <div class="slide__inner">
        <div class="slide__img js-transition-img">
          <figure class="js-transition-img__inner">
            <img src="img/project-two.png" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
    <article class="slide slide--3 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/project-three.png" draggable="false">
          </figure>
        </div>
      </div>
    </article>

    <article class="slide slide--1 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/project-one.png" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
    <article class="slide slide--2 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/project-two.png" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
    <article class="slide slide--3 js-slide">
      <div class="slide__inner">
        <div class="slide__img">
          <figure>
            <img src="img/project-three.png" draggable="false">
          </figure>
        </div>
      </div>
    </article>
    
  </div>  
  
  <div class="scroll-content scroll-content--last" data-scroll-content>
    
    <article class="slide slide--1 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span>Project</span></div>
        <h1 class="slide__title"><div class="js-transition-title">Oak Refuge</div></h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project">Corpus Studio</div>
      </div>
    </article>
    
    <article class="slide slide--2 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span>Project</span></div>
        <h1 class="slide__title"><div class="js-transition-title">Teton Residence</div></h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project">Ro Rocket Design</div>
      </div>
    </article>
    
    <article class="slide slide--3 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span>Project</span></div>
        <h1 class="slide__title">Oak Refuge</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project">Corpus Studio</div>
      </div>
    </article>

    <article class="slide slide--1 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span>Project</span></div>
        <h1 class="slide__title">Teton Residence</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project">Ro Rocket Design</div>
      </div>
    </article>
    
    <article class="slide slide--2 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span>Project</span></div>
        <h1 class="slide__title">Oak Refuge</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project">Corpus Studio</div>
      </div>
    </article>
    
    <article class="slide slide--3 js-slide">
      <div class="slide__inner">
        <div class="slide__sub-title"><span>Project</span></div>
        <h1 class="slide__title">Teton Residence</h1>
        <div class="slide__img slide__img--proxy"></div>
        <div class="slide__project">Ro Rocket Design</div>
      </div>
    </article>
    
  </div>
  
  <div class="scrollbar" data-scrollbar>
    <div class="scrollbar__handle js-scrollbar__handle"></div>
  </div>
  
</div>

<div class="mask js-mask">
  <div class="mask__slice js-mask__slice"></div>
  <div class="mask__slice js-mask__slice"></div>
  <div class="mask__slice js-mask__slice"></div>
  <div class="mask__inner">
    <figure class="logo logo--mask">
      <img class="js-logo" src="img/logo.svg">
    </figure>
    <div class="mask-line js-mask-line">
      <div class="mask-line__inner js-mask-line"></div>
    </div>
  </div>
</div>

该js动感水平拖拽式轮播图特效的codepen网址为：https://codepen.io/ReGGae/pen/QZxdVX