There is a slider, under the central slide the text describing the slide, which should change depending on the slide, how best to implement it?
PS use slick slider if it matters
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=cyrillic'); * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } .bgvideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -9999; } .screen{ position: relative; box-sizing: border-box; height: 100vh; } #screen1{ text-transform: uppercase; padding-top: 170px; } .logo{ position: relative; margin: 0 auto; height: 86px; width: 340px; background:url("../img/logo.png"); } #screen1{ color:#fff; text-align: center; } #screen1 h1{ font-weight:500; font-size: 41pt; margin: 33px 0 0 0; } #screen1 h2{ font-size: 22pt; font-weight: 300; } #screen1 button{ cursor:pointer; color: #fff; margin: 50px auto 0; display: block; outline: none; box-shadow: none; border: 2px solid #fff; font-size: 24pt; font-weight: 300; padding: 12px 20px; background-color: transparent; } #screen1 button:hover{ background: #fff; color:#222; } .bg{ margin: 0 auto; margin-top: -3vh; width: 90%; height: 90vh; background: rgba(255,255,255,0.3); } #screen2{ margin: 0 auto; text-align: center; padding-top: 58px; } .active{ border-bottom: 2px solid #222; } #screen2 h1{ color:#222; text-align: center; font-size: 27pt; font-weight: 400; } #screen2 h2{ cursor: pointer; display:inline-block; color:#222; font-weight: 300; margin-left: 20px; } #screen2 h2:hover{ border-bottom: 2px solid #222; } .slick-slide img { width: 100%; } .slider { width: 65%; margin: 25px auto; } .slick-slide { margin: 0px 20px; } .slider-img{ } .slider-dsc{ text-transform:uppercase; width: 300px; text-align: center; margin: 0 auto; } .design{ display: block; } .illustrations{ display: none; } #screen3{ background: rgba(255,255,255,0.7); padding-top: 44px; color: #222; text-align: center; } #screen3 h1{ padding-bottom: 21px; font-weight: 400; } #screen3 h2{ font-weight: 300; } .contact{ margin-top: 91px; } textarea{ resize: none; display: block; margin: 10px auto 0; width: 460px; border: 2px solid #c8c8c8; } input[type="text"],input[type="email"]{ border: 2px solid #c8c8c8; width: 217px; height: 28px; } input[type="submit"]{ color: #222; margin-top: 10px; background: #fff; border: 2px solid #41375b; width: 460px; height: 28p; font-size: 15pt; } input[type="submit"]:hover{ background: #41375b; color: #fff; cursor: pointer; } input[type="text"]{ margin-right: 20px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Xcurve</title> <link rel="stylesheet" type="text/css" href="slick/slick.css" /> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" /> <link type="text/css" href="css/style.css" rel="stylesheet"> </head> <body> <video autoplay loop muted class="bgvideo" id="bgvideo"> <source src="img/background.mp4" type="video/mp4"></source> </video> <section class=screen id=screen1> <div class="logo"></div> <h1>design studio</h1> <h2>we make your life better</h2> <button>CLICK TO GO</button> </section> <section class=screen id=screen2> <div class="bg"> <h1>PORTFOLIO</h1> <h2 id="btn1" class="active">DESIGN</h2> <h2 id="btn2">ILLUSTRATIONS</h2> <div class="slider-design slider design"> <div class="sl_slide"><img src="Layer7.png" alt="image1"></div> <div class="sl_slide"><img src="Layer7.png" alt="image2"></div> <div class="sl_slide"><img src="Layer7.png" alt="image3"></div> <div class="sl_slide"><img src="Layer7.png" alt="image1"></div> <div class="sl_slide"><img src="Layer7.png" alt="image2"></div> <div class="sl_slide"><img src="Layer7.png" alt="image3"></div> <div class="sl_slide"><img src="Layer7.png" alt="image1"></div> <div class="sl_slide"><img src="Layer7.png" alt="image2"></div> <div class="sl_slide"><img src="Layer7.png" alt="image3"></div> </div> <div class="slider-illustrations slider illustrations"> <div class="sl_slide"><img src="Layer8.png" alt="image1"></div> <div class="sl_slide"><img src="Layer8.png" alt="image2"></div> <div class="sl_slide"><img src="Layer8.png" alt="image3"></div> <div class="sl_slide"><img src="Layer8.png" alt="image1"></div> <div class="sl_slide"><img src="Layer8.png" alt="image2"></div> <div class="sl_slide"><img src="Layer8.png" alt="image3"></div> <div class="sl_slide"><img src="Layer8.png" alt="image1"></div> <div class="sl_slide"><img src="Layer8.png" alt="image2"></div> <div class="sl_slide"><img src="Layer8.png" alt="image3"></div> </div> <div class="slider-dsc"> <div class="dsc1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo nulla, eum, reiciendis iste accusamus error fugiat qui perspiciatis minus. Facilis hic, veniam dolorem vero a.</div> </div> </div> </section> <section class=screen id=screen3> <h1>SERVICES</h1> <h2>LOGO DESIGN</h2> <h2>IDENTITY</h2> <h2>ART ILLUSTRATIONS</h2> <h2>MENU LAYOUT</h2> <h2>WEB DESIGN</h2> <h1 class="contact">CONTACT US</h1> <form> <input type="text" id="name" name="name" required placeholder="Name"> <input type="email" name="email" required placeholder="E-mail"> <textarea name="Massage" id="massage-field" placeholder="Massage" rows="8"></textarea> <input type="submit" name="submit" value="SEND MASSAGE"> </form> </section> <script src="js/scrollspy.js"></script> <script src="js/timings.js"></script> <script src="js/main.js"></script> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function () { $('.slider-design').slick({ dots: true, slidesToShow: 3, slidesToScroll: 1, autoplay: false, autoplaySpeed: 2000, }); }); $(document).ready(function () { $('.slider-illustrations').slick({ dots: true, slidesToShow: 3, slidesToScroll: 1, autoplay: false, autoplaySpeed: 2000, }); }); </script> </body> </html> 
