<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="slider"> <div class="slider-control slide-left"><i class="fa fa-minus fa-2x"></i></div> <div class="slider-control slide-right"><i class="fa fa-plus fa-2x"></i></div> <div class="slide-box"> <div class="slide" style="background-image: url(https://images.unsplash.com/photo-1427435150519-42d9bcd0aa81?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1896a40b338ccfb0d8ff7e5199e5ecd2)"> <div class="slide-content"> <H1>A Full Page Slider</H1> <p>With a flex-box container inside it.</p> </div> </div> <div class="slide" style="background-image: url(https://images.unsplash.com/photo-1452800185063-6db5e12b8e2e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2700f9770386e4c5ebc53502a9099966)"> </div> <div class="slide" style="background-image: url(https://images.unsplash.com/photo-1452274381522-521513015433?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=476b9724fcf47b51c652d66e384f9ba0)"> </div> </div> </div> <script> var $slider = $('.slider'); var $slideBox = $slider.find('.slide-box'); var $leftControl = $slider.find('.slide-left'); var $rightControl = $slider.find('.slide-right'); var $slides = $slider.find('.slide'); var numItems = $slider.find('.slide').length; var position = 0; var windowWidth = $(window).width(); $slides.width(windowWidth); $leftControl.on('click', function(){ var width = $slider.width(); position = position - 1 >= 0 ? position - 1 : numItems - 1; if(position != numItems-1){ $slider.find('.slide').eq(position + 1).css('margin-left', 0); } else{ $slider.find('.slide:gt(0)').each(function(index){ $(this).css('margin-left', width * -1 + 'px'); }); } }); $rightControl.on('click', function(){ var width = $slider.width(); position = position + 1 < numItems ? position + 1 : 0; if(position != 0){ $slider.find('.slide').eq(position).css('margin-left', width * -1 + 'px'); } else{ $slider.find('.slide').css('margin-left', 0); } }); $(window).resize(function(){ $slides.width($(window).width()).height($(window).height); }); </script>

@import url(https://fonts.googleapis.com/css?family=Lato:100,900); html, body { height: 100%; font-family: 'Lato', sans-serif; font-weight: 100; } h1, h2, h3, h4 { font-weight: 900; } .slider { overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0 auto; } .slider .slider-control { -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; width: 48px; height: 48px; position: absolute; top: 50%; margin-top: -24px; z-index: 1; border-radius: 50%; background: #FFF; opacity: .8; cursor: pointer; line-height: 48px; text-align: center; } .slider .slider-control:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); background: #222; } .slider .slider-control.slide-left { left: 24px; } .slider .slider-control.slide-right { right: 24px; } .slider .slider-control i { color: #ccc; line-height: 48px; } .slider .slide-box { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; height: 100%; width: 999999px; } .slider .slide-box img { width: 100%; } .slider .slide-box .slide { -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; background-size: cover; background-position: center center; float: left; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 20000px #000; z-index: 10; } .slider .slide-box .slide .slide-content { height: 40%; font-size: 22px; min-height: 200px; width: 40%; min-width: 300px; color: #FFF; background: rgba(51, 77, 153, 0.5); text-align: center; }