"Slider NEW"
Bootstrap 4.1.1 Snippet by nshyti

<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 ----------> <style> * {box-sizing: border-box;} body {font-family: Verdana, sans-serif;} .mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 100%; position: relative; margin: auto; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #c0c2c4; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #c41230; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } .cd-hero__btn.cd-hero__btn--secondary:hover { background-color: #161a1e; } /* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "Open Sans", sans-serif; color: #2c343b; } a { color: #d44457; text-decoration: none; } img, video { max-width: 100%; } /* -------------------------------- Hero Slider -------------------------------- */ /* Slider */ .cd-hero { position: relative; } .cd-hero__slider { position: relative; height: 360px; width: 100%; overflow: hidden; } .cd-hero__slide { position: absolute; top: 0; left: 0; width: 100%; height: 360px; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0px); transform: translateZ(0px); will-change: transform; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-hero__slide.cd-hero__slide--selected { /* this is the visible slide */ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .cd-hero__slide.cd-hero__slide--move-left { /* slide hidden on the left */ -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .cd-hero__slide.cd-hero__slide--is-moving, .cd-hero__slide.cd-hero__slide--selected { /* the cd-hero__slide--is-moving class is assigned to the slide which is moving outside the viewport */ -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } /* Slide style */ .cd-hero__slide { background-position: center center; background-size: cover; background-repeat: no-repeat; } .cd-hero__slide:first-of-type { background-color: none; } .cd-hero__content.cd-hero__content--full-width, .cd-hero__content.cd-hero__content--half-width { position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; top: 0; /* this padding is used to align the text */ padding-top: 50px; text-align: left; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; } .cd-hero__content h2, .cd-hero__content p, .cd-hero__btn, .cd-hero__content--img img { /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; } .cd-hero__content.cd-hero__content--img { /* hide image on mobile device */ display: none; } .cd-hero__content--img img { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .cd-hero__content.cd-hero__content--bg-video { /* hide video on mobile device */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .cd-hero__content h2, .cd-hero__content p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); line-height: 1.2; margin: 0 auto 14px; color: #ffffff; width: 90%; max-width: 400px; } .cd-hero__content h2 { font-size: 2.4rem; } .cd-hero__content p { font-size: 1.4rem; line-height: 1.4; } .cd-hero__btn { display: inline-block; padding: 1.2em 5.4em; margin-top: .8em; background-color: rgba(212, 68, 87, 0.9); font-size: 1.3rem; font-weight: 700; letter-spacing: 1px; color: #ffffff; text-transform: uppercase; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-hero__btn.cd-hero__btn--secondary { background-color: rgba(22, 26, 30, 0.8); } .cd-hero__btn:nth-of-type(2) { margin-left: 1em; } .cd-hero__btn:hover { background-color: #d44457; } .cd-hero__btn.cd-hero__btn--secondary:hover { background-color: #161a1e; } @media only screen and (min-width: 768px) { .cd-hero__slide:nth-of-type(2), .cd-hero__slide:nth-of-type(3), .cd-hero__slide:nth-of-type(4) { background-image: none; } .cd-hero__content.cd-hero__content--full-width, .cd-hero__content.cd-hero__content--half-width { padding-top: 150px; } .cd-hero__content.cd-hero__content--bg-video { display: block; } .cd-hero__content.cd-hero__content--half-width { width: 45%; } .cd-hero__content.cd-hero__content--half-width:first-of-type { left: 5%; } .cd-hero__content.cd-hero__content--half-width:nth-of-type(2) { right: 5%; left: auto; } .cd-hero__content.cd-hero__content--img { display: block; } .cd-hero__content h2, .cd-hero__content p { max-width: 520px; } .cd-hero__content h2 { font-size: 2.4em; font-weight: 300; } .cd-hero__btn { font-size: 1.4rem; margin-left: 25px; } } /* Single slide animation */ @media only screen and (min-width: 768px) { .cd-hero__content.cd-hero__content--half-width { opacity: 0; -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); } .cd-hero__slide--move-left .cd-hero__content.cd-hero__content--half-width { -webkit-transform: translateX(-40px); -ms-transform: translateX(-40px); transform: translateX(-40px); } .cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width { /* this is the visible slide */ opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .cd-hero__slide--is-moving .cd-hero__content.cd-hero__content--half-width { /* this is the slide moving outside the viewport wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */ -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s; transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s; transition: opacity 0s 0.5s, transform 0s 0.5s; transition: opacity 0s 0.5s, transform 0s 0.5s, -webkit-transform 0s 0.5s; } .cd-hero__slide--from-left.cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width:nth-of-type(2), .cd-hero__slide--from-right.cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width:first-of-type { /* this is the selected slide - different animation if it's entering from left or right */ -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s; transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s; transition: opacity 0.4s 0.2s, transform 0.5s 0.2s; transition: opacity 0.4s 0.2s, transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s; } .cd-hero__slide--from-left.cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width:first-of-type, .cd-hero__slide--from-right.cd-hero__slide--selected .cd-hero__content.cd-hero__content--half-width:nth-of-type(2) { /* this is the selected slide - different animation if it's entering from left or right */ -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s; transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s; transition: opacity 0.4s 0.4s, transform 0.5s 0.4s; transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, -webkit-transform 0.5s 0.4s; } .cd-hero__content--full-width h2, .cd-hero__content--full-width p, .cd-hero__content--full-width .cd-hero__btn { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } .cd-hero__slide--move-left .cd-hero__content--full-width h2, .cd-hero__slide--move-left .cd-hero__content--full-width p, .cd-hero__slide--move-left .cd-hero__content--full-width .cd-hero__btn { -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } .cd-hero__slide--selected .cd-hero__content--full-width h2, .cd-hero__slide--selected .cd-hero__content--full-width p, .cd-hero__slide--selected .cd-hero__content--full-width .cd-hero__btn { /* this is the visible slide */ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .cd-hero__slide--is-moving .cd-hero__content--full-width h2, .cd-hero__slide--is-moving .cd-hero__content--full-width p, .cd-hero__slide--is-moving .cd-hero__content--full-width .cd-hero__btn { /* this is the slide moving outside the viewport wait for the end of the transition on the li parent before set translate to 100px/-100px */ -webkit-transition: -webkit-transform 0s 0.5s; transition: -webkit-transform 0s 0.5s; transition: transform 0s 0.5s; transition: transform 0s 0.5s, -webkit-transform 0s 0.5s; } .cd-hero__slide--selected h2 { -webkit-transition: -webkit-transform 0.5s 0.2s; transition: -webkit-transform 0.5s 0.2s; transition: transform 0.5s 0.2s; transition: transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s; } .cd-hero__slide--selected p { -webkit-transition: -webkit-transform 0.5s 0.3s; transition: -webkit-transform 0.5s 0.3s; transition: transform 0.5s 0.3s; transition: transform 0.5s 0.3s, -webkit-transform 0.5s 0.3s; } .cd-hero__slide--selected .cd-hero__btn { -webkit-transition: background-color 0.2s 0s, -webkit-transform 0.5s 0.4s; transition: background-color 0.2s 0s, -webkit-transform 0.5s 0.4s; transition: transform 0.5s 0.4s, background-color 0.2s 0s; transition: transform 0.5s 0.4s, background-color 0.2s 0s, -webkit-transform 0.5s 0.4s; } } /* Slider navigation */ @media only screen and (min-width: 768px) { .cd-hero__nav { height: 80px; } .cd-hero__marker, .cd-hero__nav li { width: 95px; } .cd-hero__nav a { padding-top: 48px; font-size: 1.1rem; text-transform: uppercase; } .cd-hero__nav a::before { top: 18px; } } /* Main Content */ .cd-main-content { width: 90%; max-width: 768px; margin: 0 auto; padding: 2em 0; } .cd-main-content p { font-size: 1.4rem; line-height: 1.8; color: #999999; margin: 2em 0; } @media only screen and (min-width: 1170px) { .cd-main-content { padding: 3em 0; } .cd-main-content p { font-size: 1.6rem; } } /* Javascript disabled */ .no-js .cd-hero__slide { display: none; } .no-js .cd-hero__slide.cd-hero__slide--selected { display: block; } .no-js .cd-hero__nav { display: none; } </style> <div class="slideshow-container"> <div class="mySlides fade"> <ul class="cd-hero__slider"> <li class="cd-hero__slide cd-hero__slide--selected js-cd-slide"> <div class="cd-hero__content cd-hero__content--half-width"> <h2>Slide 1:<br>Headline Goes Here</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In consequatur cumque natus!</p> <a href="#0" class="cd-hero__btn">Start</a> </div> <!-- .cd-hero__content --> </li> <img src="/confluence/download/attachments/196967955/UWF_carousel_test2.jpg?api=v2" style="width:100%; background-color: black"> </div> <div class="mySlides fade"> <ul class="cd-hero__slider"> <li class="cd-hero__slide cd-hero__slide--selected js-cd-slide"> <div class="cd-hero__content cd-hero__content--half-width"> <h2>Slide 2:<br>Headline Goes Here</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In consequatur cumque natus!</p> <a href="#0" class="cd-hero__btn">Start</a> </div> <!-- .cd-hero__content --> </li> <img src="/confluence/download/attachments/196967955/UWF_carousel_test2.jpg?api=v2" style="width:100%; background-color: black"> </div> <div class="mySlides fade"> <ul class="cd-hero__slider"> <li class="cd-hero__slide cd-hero__slide--selected js-cd-slide"> <div class="cd-hero__content cd-hero__content--half-width"> <h2>Slide 3:<br>Headline Goes Here</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In consequatur cumque natus!</p> <a href="#0" class="cd-hero__btn">Start</a> </div> <!-- .cd-hero__content --> </li> <img src="/confluence/download/attachments/196967955/UWF_carousel_test2.jpg?api=v2" style="width:100%; background-color: black"> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 10000); // Change image every 10 seconds } </script>

Related: See More


Questions / Comments: