idangerous swiper

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.7/js/swiper.jquery.js"></script>
<div class="header-swipers">
    <div class="swiper-container header-swiper-back-2 swiper-container-vertical swiper-container-3d swiper-container-coverflow">
        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 20px, 0px);">
            <div class="swiper-slide swiper-slide-active" style="transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg); z-index: 1; transition-duration: 0ms; margin-bottom: 100px;"></div>
            <div class="swiper-slide swiper-slide-next" style="transform: translate3d(0px, 0px, -117.241px) rotateX(58.6207deg) rotateY(0deg); z-index: 0; transition-duration: 0ms; margin-bottom: 100px;"></div>
            <div class="swiper-slide" style="transform: translate3d(0px, 0px, -234.483px) rotateX(117.241deg) rotateY(0deg); z-index: -1; transition-duration: 0ms; margin-bottom: 100px;"></div>
            <div class="swiper-slide" style="transform: translate3d(0px, 0px, -351.724px) rotateX(175.862deg) rotateY(0deg); z-index: -3; transition-duration: 0ms; margin-bottom: 100px;"></div>
        </div>
    </div>
    <div class="swiper-container header-swiper-back-1 swiper-container-horizontal swiper-container-3d swiper-container-coverflow">
        <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(290.5px, 0px, 0px);">
            <div class="swiper-slide swiper-slide-active" style="transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg); z-index: 1; transition-duration: 0ms; margin-right: 300px;"></div>
            <div class="swiper-slide swiper-slide-next" style="transform: translate3d(0px, 0px, -135.714px) rotateX(0deg) rotateY(-67.8571deg); z-index: 0; transition-duration: 0ms; margin-right: 300px;"></div>
            <div class="swiper-slide"...

CSS

body {
    font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size:14px;
    color:#333;
    margin:0;
    padding:0;
    position:relative;
    line-height:1.5;
    background:#fff;
    min-width:960px;
}
.center {
    max-width:960px;
    max-width:1200px;
    position:relative;
    margin:0 auto;
    padding-left:40px;
    padding-right:40px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
a {
    color:#1e70cd;
    text-decoration:none;
}
li {
    margin:5px 0;
}
h1, h2, h3, h4 {
    font-family:"myriad", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight:300;
    color:#1e70cd;
}
h1 {
    font-size:45px;
    line-height:1.2;
    margin:25px 0;
}
h1:first-child {
    margin-top:0;
}
h2 {
    font-size:37px;
    line-height:1.3;
}
h3 {
    font-size:33px;
    line-height:1.4;
}
h2, h3 {
    margin:15px 0;
}
h4 {
    font-size:25px;
    margin:10px 0;
}
h3, h4 {
    color:#1e70cd;
}
code {
    font-size:12px;
    border:1px solid #e1e1e1;
    color:#333;
    font-weight:normal!important;
}
pre, code {
    font-family:Monaco, Menlo, Consolas, "Courier New", monospace;
}
pre {
    overflow:hidden;
    word-wrap:break-word;
    font-size:12px;
}
pre code {
    display:block;
}
code.hljs {
    border:1px solid #e1e1e1;
    padding:10px;
}
code {
    background:#eee;
    color:#000;
    display:inline-block;
    padding:2px 5px;
}
.nowrap {
    white-space:nowrap;
}
header {
    background:#1e70cd;
    background:-moz-radial-gradient(50% 50%, circle cover, #2c8dfb 0%, #1e70cd 100%);
    background:-webkit-gradient(radial, 50% 50%, 0px, center center, 100%, color-stop(0%, #2c8dfb), color-stop(100%, #1e70cd));
    background:-webkit-radial-gradient(0% 0%, circle cover, #2c8dfb 0%, #1e70cd 100%);
    background:-o-radial-gradient(50% 50%, circle cover, #2c8dfb 0%, #1e70cd 100%);
    background:-ms-radial-gradient(50% 50%, circle cover, #2c8dfb 0%, #1e70cd 100%);
   ...

JavaScript

(function () {

    var swiperBack2 = new Swiper('.header-swiper-back-2', {
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 100,
        onlyExternal: true,
        effect: 'coverflow',
        direction: 'vertical',
        speed: 600,
        coverflow: {
            slideShadows: false
        }
    });
    var swiperBack1 = new Swiper('.header-swiper-back-1', {
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 300,
        effect: 'coverflow',
        speed: 600,
        coverflow: {
            slideShadows: false
        }
    });
    var swiperFront = new Swiper('.header-swiper-front', {
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 100,
        effect: 'coverflow',
        speed: 600,
        coverflow: {
            slideShadows: false
        },
        pagination: '.header-swiper-front .swiper-pagination',
        paginationClickable: true,
        nextButton: '.header-swiper-front .swiper-button-next',
        prevButton: '.header-swiper-front .swiper-button-prev',
        control: [swiperBack1, swiperBack2],
        controlBy: 'container',
        keyboardControl: true,
        a11y: true,
        onSlideChangeStart: function (s) {
            if (s.activeIndex === $('.swiper-slide-gallery').index()) {
                $(s.container[0]).find('.swiper-pagination').hide();
            } else {
                $(s.container[0]).find('.swiper-pagination').show();
            }
        }
    });
    var galleryTopSwiper = new Swiper('.swiper-gallery-top', {
        slidesPerView: 1,
        spaceBetween: 10,
        nested: true,
        resistanceRatio: 0,
        preloadImages: false,
        lazyLoading: true,
    });
    var galleryThumbsSwiper = new Swiper('.swiper-gallery-thumbs', {
        slidesPerView: 5,
        spaceBetween: 10,
        centeredSlides: true,
        touchRatio: 0.2,
        slideToClickedSlide: true,
        nested: true,
   ...