Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="slider">
- <div class="slider-inner">
- <div class="slide active">1</div>
- <div class="slide">2</div>
- <div class="slide">3</div>
- <div class="slide">4</div>
- <div class="slide">5</div>
- <div class="slide">6</div>
- <div class="slide">7</div>
- <div class="slide">8</div>
- </div>
- <nav class="slider-nav">
- <div class="active"></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </nav>
- </div>
- <style type="text/css">
- * {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
- }
- body {
- font-family: 'Roboto', sans-serif;
- font-weight: 300;
- }
- .nav {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 9;
- padding: 40px;
- color: white;
- }
- .nav h1 {
- font-weight: 300;
- font-size: 3rem;
- }
- .nav .author {
- text-align: right;
- }
- .loading {
- background-color: #2ecc71;
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- height: 600px;
- line-height: 600px;
- text-align: center;
- color: white;
- font-size: 2rem;
- }
- .slider {
- background-color: white;
- position: relative;
- width: 100%;
- height: 600px;
- overflow: hidden;
- display: none;
- }
- .slider-inner {
- position: absolute;
- left: 0;
- top: 0;
- height: 100%;
- -webkit-transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
- transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
- -webkit-transition-duration: 1s;
- transition-duration: 1s;
- background-visibility: hidden;
- -webkit-transition-delay: .75s;
- transition-delay: .75s;
- -webkit-transform: translateZ(0);
- transform: translateZ(0);
- }
- .slide {
- position: absolute;
- top: 0;
- height: 100%;
- background-color: #f1c40f;
- background-visibility: hidden;
- -webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
- transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
- -webkit-transform: translateZ(0) scale(0.8, 0.8);
- transform: translateZ(0) scale(0.8, 0.8);
- -webkit-transition-duration: .5s;
- transition-duration: .5s;
- text-align: center;
- line-height: 600px;
- font-size: 5rem;
- color: white;
- }
- .slide.active {
- -webkit-transform: scale(1, 1);
- transform: scale(1, 1);
- -webkit-transition-delay: 2s;
- transition-delay: 2s;
- }
- .slide:nth-child(2n) {
- background-color: #2ecc71;
- }
- .slide:nth-child(3n) {
- background-color: #3498db;
- }
- .slide:nth-child(4n) {
- background-color: #9b50ba;
- }
- .slider-nav {
- position: absolute;
- bottom: 0;
- left: 50%;
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
- padding: 20px;
- text-align: center;
- }
- .slider-nav > div {
- float: left;
- width: 10px;
- height: 10px;
- border: 1px solid white;
- z-index: 2;
- display: inline-block;
- margin: 0 10px;
- cursor: pointer;
- border-radius: 50%;
- opacity: .5;
- -webkit-transition-duration: .25s;
- transition-duration: .25s;
- background-color: transparent;
- }
- .slider-nav > div:hover {
- opacity: 1;
- }
- .slider-nav > div.active {
- background-color: white;
- -webkit-transform: scale(2);
- transform: scale(2);
- opacity: 1;
- }
- <script type="text/javascript">
- $(document).ready(function(){
- var slide = $(".slide");
- var viewWidth = $(window).width();
- var sliderInner = $(".slider-inner");
- var childrenNo = sliderInner.children().length;
- sliderInner.width( viewWidth * childrenNo );
- $(window).resize(function(){
- viewWidth = $(window).width();
- });
- function setWidth(){
- slide.each(function(){
- $(this).width(viewWidth);
- $(this).css("left", viewWidth * $(this).index());
- });
- }
- function setActive(element){
- var clickedIndex = element.index();
- $(".slider-nav .active").removeClass("active");
- element.addClass("active");
- sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
- $(".slider-inner .active").removeClass("active");
- $(".slider-inner .slide").eq(clickedIndex).addClass("active");
- }
- setWidth();
- $(".slider-nav > div").on("click", function(){
- setActive($(this));
- });
- $(window).resize(function(){
- setWidth();
- });
- setTimeout(function(){
- $(".slider").fadeIn(500);
- }, 2000);
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement