Помощь со слайдером

350

07 января 2017, 15:38

Есть слайдер, под центральным слайдом текст описывающий слайд, который должен меняться в зависимости от слайда, как лучше всего это реализовать?

P.S. пользуюсь slick slider если это имеет значение

@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>