<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css"> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- <div class="swiper-slide"> <div class="slide-inner" style="background-image:url(http://cs412624.vk.me/v412624691/4117/RWBNZL6CLtU.jpg)"></div> </div> <div class="swiper-slide"> <div class="slide-inner" style="background-image:url(http://cs412624.vk.me/v412624691/41ad/atM6w55Z9Xg.jpg)"></div> </div> --> <div class="swiper-slide"> <div class="slide-inner"> <img src="https://pp.userapi.com/c836139/v836139003/63ce1/QThPx7qPzvU.jpg"> </div> </div> <div class="swiper-slide"> <div class="slide-inner" style="background-image:url(https://pp.userapi.com/c412624/v412624691/4136/_da_uAA6ha8.jpg)"></div> </div> <div class="swiper-slide"> <div class="slide-inner"> <img src="https://pp.userapi.com/c637331/v637331691/48f5f/spHnV42iYVw.jpg"> </div> </div> <div class="swiper-slide"> <div class="slide-inner"> <img src="https://pp.userapi.com/c837139/v837139407/67f52/fFqjq4U2mEk.jpg"> </div> </div> <!-- <div class="swiper-slide"> <div class="slide-inner" style="background-image:url(http://cs412624.vk.me/v412624691/415d/X7YuVilSl4k.jpg)"></div> </div> --> </div> <div class="swiper-button-next swiper-button-white"></div> <div class="swiper-button-prev swiper-button-white"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script> <script> var interleaveOffset = 0.5; var swiperOptions = { loop: true, speed: 1000, grabCursor: true, autoplay: true, watchSlidesProgress: true, mousewheelControl: true, keyboardControl: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, on: { progress: function() { var swiper = this; for (var i = 0; i < swiper.slides.length; i++) { var slideProgress = swiper.slides[i].progress; var innerOffset = swiper.width * interleaveOffset; var innerTranslate = slideProgress * innerOffset; swiper.slides[i].querySelector(".slide-inner").style.transform = "translate3d(" + innerTranslate + "px, 0, 0)"; } }, touchStart: function() { var swiper = this; for (var i = 0; i < swiper.slides.length; i++) { swiper.slides[i].style.transition = ""; } }, setTransition: function(speed) { var swiper = this; for (var i = 0; i < swiper.slides.length; i++) { swiper.slides[i].style.transition = speed + "ms"; swiper.slides[i].querySelector(".slide-inner").style.transition = speed + "ms"; } } } }; var swiper = new Swiper(".swiper-container", swiperOptions); </script>

body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; background: #404449; margin: 0; padding: 0; } .swiper-container { height: calc(100vh - 120px); margin: 60px; } .swiper-slide { overflow: hidden; } .slide-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: center; } img{ display:block; width:100%; height:auto; } .copy { position: absolute; bottom: 15px; left: 0; right: 0; color: white; text-align: center; letter-spacing: 0.06em; } a { color: white; }