Swiper Test with Hashes

HTML

<div class="swiper-container swiper-parent">
    <div class="pagination pagination-parent"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide"  data-hash="slide1">
        <div class="title">Slide 1</div>
      </div>


      <div class="swiper-slide">
        <div class="swiper-container swiper-nested-1">
          <div class="pagination pagination-nested-1"></div>
          <div class="swiper-wrapper">
            <div class="swiper-slide pink-slide" data-hash="slide21">Vertical Slide 1</div>
            <div class="swiper-slide orange-slide" data-hash="slide22">Vertical Slide 2</div>
            <div class="swiper-slide blue-slide" data-hash="slide23">Vertical Slide 3</div>
            <div class="swiper-slide green-slide" data-hash="slide24">Vertical Slide 4</div>
            <div class="swiper-slide pink-slide" data-hash="slide25">Vertical Slide 5</div>
            <div class="swiper-slide blue-slide" data-hash="slide26">Vertical Slide 6</div>
          </div>
        </div>
      </div>

      <div class="swiper-slide blue-slide" data-hash="slide2">
        <div class="title">Slide 2</div>
      </div>
      <div class="swiper-slide orange-slide" data-hash="slide2">
        <div class="title">Slide 3</div>
      </div>
      <div class="swiper-slide green-slide" data-hash="slide3">
        <div class="title">Slide 4</div>
      </div>
      <div class="swiper-slide pink-slide" data-hash="slide5">
        <div class="title">Slide 5</div>
      </div>
      <div class="swiper-slide red-slide" data-hash="slide6">
        <div class="title">Slide 6</div>
      </div>
      <div class="swiper-slide blue-slide" data-hash="slide7">
        <div class="title">Slide 7</div>
      </div>
      <div class="swiper-slide orange-slide" data-hash="slide8">
        <div class="title">Slide 8</div>
      </div>
    </div>
    <div class="pagination"></div>
  </div>
  <script...

CSS

.swiper-container{margin:0 auto;position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;z-index:1;}.swiper-wrapper{position:relative;width:100%;-webkit-transition-property:-webkit-transform,left,top;-webkit-transition-duration:0s;-webkit-transform:translate3d(0px,0,0);-webkit-transition-timing-function:ease;-moz-transition-property:-moz-transform,left,top;-moz-transition-duration:0s;-moz-transform:translate3d(0px,0,0);-moz-transition-timing-function:ease;-o-transition-property:-o-transform,left,top;-o-transition-duration:0s;-o-transform:translate3d(0px,0,0);-o-transition-timing-function:ease;-o-transform:translate(0px,0px);-ms-transition-property:-ms-transform,left,top;-ms-transition-duration:0s;-ms-transform:translate3d(0px,0,0);-ms-transition-timing-function:ease;transition-property:transform,left,top;transition-duration:0s;transform:translate3d(0px,0,0);transition-timing-function:ease;}.swiper-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto;}.swiper-slide{float:left;}.swiper-wp8-horizontal{-ms-touch-action:pan-y;}.swiper-wp8-vertical{-ms-touch-action:pan-x;}.swiper-container{}.swiper-slide{}.swiper-slide-active{}.swiper-slide-visible{}.swiper-pagination-switch{}.swiper-active-switch{}.swiper-visible-switch{}




/* Demo Styles */
html {
  height: 100%;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  height: 100%;
}
.swiper-container {
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
}
.red-slide {
  background: #ca4040;
}
.blue-slide {
  background: #4390ee;
}
.orange-slide {
  background: #ff8604;
}
.green-slide {
  background:...

JavaScript

var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    paginationClickable: true,
    keyboardControl: true,
    loop: true,
    slidesPerGroup: 2,
    slidesPerView: 2,
    hashNav: true
  })

  var swiperNested1 = new Swiper('.swiper-nested-1',{
    mode: 'vertical',
    pagination: '.pagination-nested-1',
    paginationClickable: true,
    slidesPerView: 2,
    hashNav: true
  })