"slider"
Bootstrap 3.0.0 Snippet by thavaselvam

<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 ----------> <div class="con"> <div class="con__slide con__slide--1"> <div class="con__slide-top con__slide--1-top active-slide-left-top"> <div class='con__slide-top-inner con__slide--1-top-inner'> <div class='con__slide-top-inner-text con__slide--1-top-inner-text active-slide1-top-text'> <h1 class='con__slide-h con__slide--1-top-h'>some nice slider<br> here wow</h1> </div> </div> </div> <!-- slide--1 top end --> <div class="con__slide-bot con__slide--1-bot active-slide-left-bot"> <div class='con__slide-bot-text con__slide--1-bot-text active-slide1-bot-text'> <h1 class='con__slide-h con__slide--1-bot-h'>some nice slider<br> here wow</h1> </div> </div> <!-- slide--1 bot end --> <div class="con__slide-content con__slide--1-content active-slide-left-content"> <svg class='con__slide--1-content-logo' version="1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 600.000000 600.000000"><path d="M280.5 13.6c-19 1.9-25.9 2.9-38.5 5.4-73.3 14.6-139.2 59.2-181.4 122.8-24.5 36.8-40.2 79.8-45.8 125.2-1.6 13.5-1.6 51.5 0 65 5.6 45.4 21.3 88.4 45.8 125.2 47.1 70.9 121.3 116.5 206.4 127 5.8.7 20.4 1.3 32.5 1.3 12.1 0 26.7-.6 32.5-1.3 115.7-14.2 209.7-93.7 242.6-205.1 3.8-12.9 7.7-31.8 9.6-47.1 1.6-13.5 1.6-51.4 0-65-5.6-45.4-21.3-88.4-45.8-125.2-46.2-69.6-118.6-115-201.5-126.3-10.9-1.5-48.1-2.7-56.4-1.9zm39 47.4c63.6 5.9 120.7 35.1 161.2 82.4 33.4 39.1 52.5 84.4 57.3 136.1 4.2 45.6-6.5 95.6-29 135.7-29.5 52.4-75.8 91.3-131.5 110.5-72.2 24.8-149.5 14.4-213.1-28.8-30.3-20.6-55.7-48.5-74.4-81.7-22.5-40.1-33.2-90.1-29-135.7 6.2-67.1 37.6-125.6 90-167.5 46.5-37.4 109.5-56.4 168.5-51z"/><path d="M295 123.3c-1.9.7-40.7 26.1-86.2 56.5-64.5 43-83.1 55.9-84.5 58.4-1.7 3.1-1.8 7.5-1.8 61.3 0 53.9.1 58.2 1.8 61.3 1.4 2.5 20.1 15.5 85.5 59.1 49.2 32.8 85.1 56 87 56.4 1.9.4 4.9.1 7-.6 2-.7 40.9-26.1 86.4-56.5 64.5-43 83.1-55.9 84.5-58.4 1.7-3.1 1.8-7.5 1.8-61.3 0-53.9-.1-58.2-1.8-61.3-1.4-2.5-20.1-15.5-85.8-59.2-46.1-30.8-84.5-56-85.2-56-.6 0-2.1-.2-3.2-.5s-3.6.1-5.5.8zm-11 78.9l-.1 35.3-32.8 21.8-32.9 21.9-26.6-17.8-26.6-17.7 58.7-39.3c32.4-21.6 59.1-39.3 59.6-39.3.4-.1.7 15.8.7 35.1zm91 4.1l59 39.4-26.6 17.7-26.6 17.8-32.9-21.9-32.8-21.8-.1-35.3c0-19.3.2-35.2.5-35.2s27.1 17.7 59.5 39.3zm-49.2 74.8c14.1 9.4 26 17.5 26.5 17.8 1 1-52.1 36.4-53.6 35.8-3.2-1.4-52.1-34.8-51.8-35.5.5-.9 51.3-35 52.4-35.1.4-.1 12.3 7.6 26.5 17zm-135.2 18.5s-8.5 5.8-18.8 12.8L153 325.1V274l18.9 12.7c10.4 7.1 18.8 12.8 18.7 12.9zm255.4-.1V325l-18.8-12.7-18.8-12.8 18.5-12.7c10.3-6.9 18.7-12.7 18.9-12.7.1-.1.2 11.4.2 25.4zm-194.8 40.2l32.7 21.8.1 35.2c0 19.4-.2 35.3-.5 35.3s-27.1-17.7-59.5-39.3l-59-39.4 26.2-17.6c14.5-9.6 26.5-17.6 26.8-17.6.3-.1 15.2 9.7 33.2 21.6zm156.3-4l26.5 17.6-59 39.4c-32.4 21.6-59.2 39.3-59.5 39.3-.3 0-.5-15.9-.5-35.3l.1-35.2 32.7-21.7c18-12 32.8-21.8 33-21.8.1 0 12.1 7.9 26.7 17.7z"/></svg> </div> <!-- slide--1 content end --> </div> <!-- slide--1 end --> <!-- slide 2 --> <div class="con__slide con__slide--right con__slide--2"> <div class="con__slide-top con__slide--right-top con__slide--2-top active-slide-right-top"> <div class='con__slide-top-inner con__slide--right-top-inner con__slide--2-top-inner'> <div class='con__slide-top-inner-text con__slide--right-top-inner-text con__slide--2-top-inner-text active-slide2-top-text'> <h1 class='con__slide-h con__slide--right-top-h con__slide--2-top-h'>another slide<br> such wow</h1> </div> </div> </div> <!-- slide--2 top end --> <div class="con__slide-bot con__slide--right-bot con__slide--2-bot active-slide-right-bot"> <div class='con__slide-bot-text con__slide--right-bot-text con__slide--2-bot-text active-slide2-bot-text'> <h1 class='con__slide-h con__slide--right-bot-h con__slide--2-bot-h'>another slide<br> such wow</h1> </div> </div> <!-- slide--2 bot end --> <div class="con__slide-content con__slide--right-content con__slide--2-content active-slide-right-content"> <img class='con__slide--right-content-image con__slide--2-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/doge_snow.png" alt="" /> </div> <!-- slide--2 content end --> </div> <!-- slide--2 end --> <div class="con__slide con__slide--3"> <div class="con__slide-top con__slide--3-top active-slide-left-top"> <div class='con__slide-top-inner con__slide--3-top-inner'> <div class='con__slide-top-inner-text con__slide--3-top-inner-text active-slide3-top-text'> <h1 class='con__slide-h con__slide--3-top-h'>half collored<br> text so nice</h1> </div> </div> </div> <!-- slide--3 top end --> <div class="con__slide-bot con__slide--3-bot active-slide-left-bot"> <div class='con__slide-bot-text con__slide--3-bot-text active-slide3-bot-text'> <h1 class='con__slide-h con__slide--3-bot-h'>half collored<br> text so nice</h1> </div> </div> <!-- slide--3 bot end --> <div class="con__slide-content con__slide--3-content active-slide-left-content"> <img class='con__slide--right-content-image con__slide--3-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/butterfly_(1).png" alt="" /> </div> <!-- slide--3 content end --> </div> <!-- slide--3 end --> <div class="con__slide con__slide--right con__slide--4"> <div class="con__slide-top con__slide--right-top con__slide--4-top active-slide-right-top"> <div class='con__slide-top-inner con__slide--right-top-inner con__slide--4-top-inner'> <div class='con__slide-top-inner-text con__slide--right-top-inner-text con__slide--4-top-inner-text active-slide4-top-text'> <h1 class='con__slide-h con__slide--right-top-h con__slide--4-top-h'><a class='con__slide--4-top-h-link' href="https://codepen.io/mrspok407/" target="_blank">checkout my<br> other pens</a></h1> </div> </div> </div> <!-- slide--4 top end --> <div class="con__slide-bot con__slide--right-bot con__slide--4-bot active-slide-right-bot"> <div class='con__slide-bot-text con__slide--right-bot-text con__slide--4-bot-text active-slide4-bot-text'> <h1 class='con__slide-h con__slide--right-bot-h con__slide--4-bot-h'><a class='con__slide--4-bot-h-link' href="https://codepen.io/mrspok407/" target="_blank">checkout my<br> other pens</a></h1> </div> </div> <!-- slide--4 bot end --> <div class="con__slide-content con__slide--right-content con__slide--4-content active-slide-right-content"> <a href="https://twitter.com/mrspok407" target="_blank"><img class='con__slide--right-content-image con__slide--4-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/twi_(1).png" alt="" /></a> </div> <!-- slide--4 content end --> </div> <!-- slide--4 end --> <div class="con__nav"> <div data-target='up' class='con__nav-scroll con__nav-scroll--goup'></div> <div data-target='down' class='con__nav-scroll con__nav-scroll--godown'></div> <ul class='con__nav-list'> <li data-target="1" class='con__nav-item con__nav-item--1 nav-active'></li> <li data-target="2" class='con__nav-item con__nav-item--2'></li> <li data-target="3" class='con__nav-item con__nav-item--3'></li> <li data-target="4" class='con__nav-item con__nav-item--4'></li> </ul> </div> <!-- nav end --> </div>
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; } body { font-family: 'Roboto', sans-serif; } .con { position: relative; height: 100vh; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/image.jpg") center center no-repeat; background-size: cover; overflow: hidden; } .con__slide { position: absolute; width: 100%; height: 100%; left: 0; } .con__slide-h { display: inline-block; text-align: center; text-transform: uppercase; font-size: 60px; } .con__slide-top, .con__slide-bot { position: absolute; background: rgba(0, 0, 0, 0.4); } .con__slide-top { top: -200px; left: -835px; height: 1235px; width: 550px; -webkit-transform: rotate(25deg); transform: rotate(25deg); -webkit-transition: -webkit-transform 650ms 1000ms; transition: -webkit-transform 650ms 1000ms; transition: transform 650ms 1000ms; transition: transform 650ms 1000ms, -webkit-transform 650ms 1000ms; } .con__slide-top-inner { position: fixed; top: -59px; right: -175px; width: 100%; height: 500px; -webkit-transform: rotate(20deg); transform: rotate(20deg); overflow: hidden; } .con__slide-top-inner-text { position: absolute; right: 21px; top: 649px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: -webkit-transform 1000ms; transition: -webkit-transform 1000ms; transition: transform 1000ms; transition: transform 1000ms, -webkit-transform 1000ms; } .con__slide-bot { top: -50px; left: -884px; width: 700px; height: 1700px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); overflow: hidden; -webkit-transition: -webkit-transform 1000ms 1100ms; transition: -webkit-transform 1000ms 1100ms; transition: transform 1000ms 1100ms; transition: transform 1000ms 1100ms, -webkit-transform 1000ms 1100ms; } .con__slide-bot-text { position: absolute; right: -440px; top: 430px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: -webkit-transform 1000ms; transition: -webkit-transform 1000ms; transition: transform 1000ms; transition: transform 1000ms, -webkit-transform 1000ms; } .con__slide--1-top-h { text-shadow: 0 0 1px #c43838; color: #c43838; } .con__slide--1-bot-h { text-shadow: 0 0 1px #fff; color: #fff; } .con__slide--1-content { position: absolute; right: 300px; top: 50%; -webkit-transform: translateY(-55%); transform: translateY(-55%); opacity: 0; -webkit-transition: opacity 1000ms, -webkit-transform 1000ms; transition: opacity 1000ms, -webkit-transform 1000ms; transition: transform 1000ms, opacity 1000ms; transition: transform 1000ms, opacity 1000ms, -webkit-transform 1000ms; } @media screen and (max-width: 1350px) { .con__slide--1-content { right: 15%; } } @media screen and (max-width: 1160px) { .con__slide--1-content { right: 5%; } } .con__slide--1-content-logo { fill: #e5e5e5; } @media screen and (max-height: 730px) { .con__slide--1-content-logo { width: 300px; } } @media screen and (max-width: 1350px) { .con__slide--1-content-logo { width: 300px; } } .con__slide--right-top { left: initial; right: -195px; right: -780px; -webkit-transform: rotate(-25deg); transform: rotate(-25deg); -webkit-transition: -webkit-transform 650ms 1000ms; transition: -webkit-transform 650ms 1000ms; transition: transform 650ms 1000ms; transition: transform 650ms 1000ms, -webkit-transform 650ms 1000ms; } .con__slide--right-top-inner { top: -31px; left: -249px; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); overflow: overflow; } .con__slide--right-top-inner-text { right: 10px; top: 620px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: initial; animation: initial; -webkit-transition: -webkit-transform 1000ms 0s; transition: -webkit-transform 1000ms 0s; transition: transform 1000ms 0s; transition: transform 1000ms 0s, -webkit-transform 1000ms 0s; } .con__slide--right-top-h { width: 450px; text-shadow: 0 0 1px #2d48e2; color: #2d48e2; } .con__slide--right-bot { left: initial; right: -84px; right: -884px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: initial; animation: initial; overflow: hidden; -webkit-transition: -webkit-transform 1000ms 1100ms; transition: -webkit-transform 1000ms 1100ms; transition: transform 1000ms 1100ms; transition: transform 1000ms 1100ms, -webkit-transform 1000ms 1100ms; } .con__slide--right-bot-text { left: -560px; top: 150px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: initial; animation: initial; -webkit-transition: -webkit-transform 1000ms 0s; transition: -webkit-transform 1000ms 0s; transition: transform 1000ms 0s; transition: transform 1000ms 0s, -webkit-transform 1000ms 0s; } .con__slide--right-bot-h { text-shadow: 0 0 1px #fff; color: #fff; } .con__slide--right-content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-95%, -45%); transform: translate(-95%, -45%); opacity: 0; -webkit-transition: opacity 1400ms 0s, z-index 0s 2.2s, -webkit-transform 1400ms 0s; transition: opacity 1400ms 0s, z-index 0s 2.2s, -webkit-transform 1400ms 0s; transition: transform 1400ms 0s, opacity 1400ms 0s, z-index 0s 2.2s; transition: transform 1400ms 0s, opacity 1400ms 0s, z-index 0s 2.2s, -webkit-transform 1400ms 0s; z-index: -9999; } @media screen and (max-height: 730px) { .con__slide--right-content-image { width: 80%; } } @media screen and (max-width: 1366px) { .con__slide--right-content-image { width: 80%; } } .con__slide--3-top-h { text-shadow: 0 0 1px #e0bb28; color: #e0bb28; } .con__slide--3-bot-h { text-shadow: 0 0 1px #fff; color: #fff; } .con__slide--3-content { position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-45%); transform: translateY(-45%); opacity: 0; -webkit-transition: opacity 1400ms 0s, z-index 0s 2.2s, -webkit-transform 1400ms 0s; transition: opacity 1400ms 0s, z-index 0s 2.2s, -webkit-transform 1400ms 0s; transition: transform 1400ms 0s, opacity 1400ms 0s, z-index 0s 2.2s; transition: transform 1400ms 0s, opacity 1400ms 0s, z-index 0s 2.2s, -webkit-transform 1400ms 0s; } @media screen and (max-width: 1366px) { .con__slide--3-content { left: 60%; } } .con__slide--3-content-image { width: 500px; } @media screen and (max-height: 730px) { .con__slide--3-content-image { width: 400px; } } @media screen and (max-width: 1366px) { .con__slide--3-content-image { width: 400px; } } .con__slide--4-top-h-link { position: relative; text-decoration: none; text-shadow: 0 0 1px #3ee84f; color: #3ee84f; } .con__slide--4-bot-h-link { text-decoration: none; text-shadow: 0 0 1px #fff; color: #fff; z-index: 20; } .con__nav { position: fixed; bottom: 3%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .con__nav-list { list-style-type: none; } .con__nav-item { display: inline-block; position: relative; margin-left: 8px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e5e5e5; cursor: pointer; } .con__nav-item:after { content: ' '; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0, 0); transform: translate(-50%, -50%) scale(0, 0); width: 75%; height: 75%; border-radius: 50%; background: #e5e5e5; -webkit-transition: 300ms; transition: 300ms; opacity: 0; overflow: hidden; } .con__nav-item:hover:after { -webkit-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); opacity: 1; } .con__nav-item--1 { margin-left: 0; } .con__nav-scroll { position: absolute; top: 1px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 17px; height: 17px; border: 2px solid #e5e5e5; border-right: transparent; border-bottom: transparent; cursor: pointer; -webkit-transition: 300ms; transition: 300ms; } .con__nav-scroll:hover { -webkit-transform: rotate(-45deg) scale(1.2, 1.2); transform: rotate(-45deg) scale(1.2, 1.2); } .con__nav-scroll--goup { left: -20px; } .con__nav-scroll--godown { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); right: -20px; } .con__nav-scroll--godown:hover { -webkit-transform: rotate(-225deg) scale(1.2, 1.2); transform: rotate(-225deg) scale(1.2, 1.2); } .nav-active:after { -webkit-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); opacity: 1; } .active .active-slide-left-top { -webkit-transform: translate(640px, 0) rotate(25deg); transform: translate(640px, 0) rotate(25deg); -webkit-transition: -webkit-transform 650ms cubic-bezier(0, 0, 0.21, 1.02); transition: -webkit-transform 650ms cubic-bezier(0, 0, 0.21, 1.02); transition: transform 650ms cubic-bezier(0, 0, 0.21, 1.02); transition: transform 650ms cubic-bezier(0, 0, 0.21, 1.02), -webkit-transform 650ms cubic-bezier(0, 0, 0.21, 1.02); } .active .active-slide-left-bot { -webkit-transform: translateX(800px) rotate(-45deg); transform: translateX(800px) rotate(-45deg); -webkit-transition: -webkit-transform 1000ms 350ms; transition: -webkit-transform 1000ms 350ms; transition: transform 1000ms 350ms; transition: transform 1000ms 350ms, -webkit-transform 1000ms 350ms; } .active .active-slide-left-content { -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; -webkit-transition: opacity 1000ms 1350ms, -webkit-transform 1000ms 1350ms; transition: opacity 1000ms 1350ms, -webkit-transform 1000ms 1350ms; transition: transform 1000ms 1350ms, opacity 1000ms 1350ms; transition: transform 1000ms 1350ms, opacity 1000ms 1350ms, -webkit-transform 1000ms 1350ms; } .active .active-slide-right-top { -webkit-transform: translateX(-585px) rotate(-25deg); transform: translateX(-585px) rotate(-25deg); -webkit-transition: -webkit-transform 650ms; transition: -webkit-transform 650ms; transition: transform 650ms; transition: transform 650ms, -webkit-transform 650ms; } .active .active-slide-right-bot { -webkit-transform: translateX(-800px) rotate(45deg); transform: translateX(-800px) rotate(45deg); -webkit-transition-delay: 350ms; transition-delay: 350ms; } .active .active-slide-right-content { -webkit-transform: translate(-95%, -50%); transform: translate(-95%, -50%); opacity: 1; z-index: 10; -webkit-transition: opacity 1400ms 1350ms, z-index 0s 1s, -webkit-transform 1400ms 1350ms; transition: opacity 1400ms 1350ms, z-index 0s 1s, -webkit-transform 1400ms 1350ms; transition: transform 1400ms 1350ms, opacity 1400ms 1350ms, z-index 0s 1s; transition: transform 1400ms 1350ms, opacity 1400ms 1350ms, z-index 0s 1s, -webkit-transform 1400ms 1350ms; } .active .active-slide1-top-text { -webkit-transform: translate(75px, -282px) rotate(-45deg); transform: translate(75px, -282px) rotate(-45deg); -webkit-transition: -webkit-transform 1000ms 1350ms; transition: -webkit-transform 1000ms 1350ms; transition: transform 1000ms 1350ms; transition: transform 1000ms 1350ms, -webkit-transform 1000ms 1350ms; } .active .active-slide1-bot-text { -webkit-transform: translate(-117px, 31px) rotate(45deg); transform: translate(-117px, 31px) rotate(45deg); -webkit-transition: -webkit-transform 1000ms 1350ms; transition: -webkit-transform 1000ms 1350ms; transition: transform 1000ms 1350ms; transition: transform 1000ms 1350ms, -webkit-transform 1000ms 1350ms; } .active .active-slide2-top-text { -webkit-transform: translate(-43px, -219px) rotate(45deg); transform: translate(-43px, -219px) rotate(45deg); -webkit-transition-delay: 1350ms; transition-delay: 1350ms; } .active .active-slide2-bot-text { -webkit-transform: translate(127px, -116px) rotate(-45deg); transform: translate(127px, -116px) rotate(-45deg); -webkit-transition-delay: 1350ms; transition-delay: 1350ms; } .active .active-slide3-top-text { -webkit-transform: translate(54px, -241px) rotate(-45deg); transform: translate(54px, -241px) rotate(-45deg); -webkit-transition: -webkit-transform 1000ms 1350ms; transition: -webkit-transform 1000ms 1350ms; transition: transform 1000ms 1350ms; transition: transform 1000ms 1350ms, -webkit-transform 1000ms 1350ms; } .active .active-slide3-bot-text { -webkit-transform: translate(-190px, 43px) rotate(45deg); transform: translate(-190px, 43px) rotate(45deg); -webkit-transition: -webkit-transform 1000ms 1350ms; transition: -webkit-transform 1000ms 1350ms; transition: transform 1000ms 1350ms; transition: transform 1000ms 1350ms, -webkit-transform 1000ms 1350ms; } .active .active-slide4-top-text { -webkit-transform: translate(-55px, -231px) rotate(45deg); transform: translate(-55px, -231px) rotate(45deg); -webkit-transition: -webkit-transform 1000ms 1350ms; transition: -webkit-transform 1000ms 1350ms; transition: transform 1000ms 1350ms; transition: transform 1000ms 1350ms, -webkit-transform 1000ms 1350ms; } .active .active-slide4-bot-text { -webkit-transform: translate(127px, -116px) rotate(-45deg); transform: translate(127px, -116px) rotate(-45deg); -webkit-transition: -webkit-transform 1000ms 1350ms; transition: -webkit-transform 1000ms 1350ms; transition: transform 1000ms 1350ms; transition: transform 1000ms 1350ms, -webkit-transform 1000ms 1350ms; }
'use strict'; $(document).ready(function () { var $slides = $('.con__slide').length, topAnimSpd = 650, textAnimSpd = 1000, nextSlideSpd = topAnimSpd + textAnimSpd, animating = true, animTime = 4000, curSlide = 1, nextSlide, scrolledUp; setTimeout(function () { animating = false; }, 2300); function navigateUp() { if (curSlide > 1) { scrolledUp = true; pagination(curSlide); curSlide--; } } function navigateDown() { if (curSlide < $slides) { scrolledUp = false; pagination(curSlide); curSlide++; console.log(curSlide); } } $(window).on('load', function () { $('.con__slide--1').addClass('active'); }); function pagination(slide, target) { animating = true; // Check if pagination was triggered by scroll/keys/arrows or direct click. If scroll/keys/arrows then check if scrolling was up or down. if (target === undefined) { nextSlide = scrolledUp ? slide - 1 : slide + 1; } else { nextSlide = target; } ////////// Slides ////////// $('.con__slide--' + slide).removeClass('active'); setTimeout(function () { $('.con__slide--' + nextSlide).addClass('active'); }, nextSlideSpd); ////////// Nav ////////// $('.con__nav-item--' + slide).removeClass('nav-active'); $('.con__nav-item--' + nextSlide).addClass('nav-active'); setTimeout(function () { animating = false; }, animTime); } // Mouse wheel trigger $(document).on('mousewheel DOMMouseScroll', function (e) { var delta = e.originalEvent.wheelDelta; if (animating) return; // Mouse Up if (delta > 0 || e.originalEvent.detail < 0) { navigateUp(); } else { navigateDown(); } }); // Direct trigger $(document).on("click", ".con__nav-item:not(.nav-active)", function () { // Essential to convert target to a number with +, so curSlide would be a number var target = +$(this).attr('data-target'); if (animating) return; pagination(curSlide, target); curSlide = target; }); // Arrow trigger $(document).on('click', '.con__nav-scroll', function () { var target = $(this).attr('data-target'); if (animating) return; if (target === 'up') { navigateUp(); } else { navigateDown(); } }); // Key trigger $(document).on("keydown", function (e) { if (animating) return; if (e.which === 38) { navigateUp(); } else if (e.which === 40) { navigateDown(); } }); var topLink = $(".con__slide--4-top-h-link"), botLink = $(".con__slide--4-bot-h-link"); $(".con__slide--4-top-h-link, .con__slide--4-bot-h-link").on({ mouseenter: function mouseenter() { topLink.css('text-decoration', 'underline'); botLink.css('text-decoration', 'underline'); }, mouseleave: function mouseleave() { topLink.css('text-decoration', 'none'); botLink.css('text-decoration', 'none'); } }); });

Related: See More


Questions / Comments: