slick slider, помогите разобраться со слайдером

Рейтинг: 0Ответов: 0Опубликовано: 27.07.2023
    $('.single-item').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-for'
    });
    $('.slider-for').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: '.single-item',
      dots: true,
      centerMode: true,
      focusOnSelect: true
    });

вем привет, не получается сделать слайдер что бюы работал как нужно, может сможет кто помочь?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link rel="stylesheet" href="master.css">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <title>Document</title>
</head>
<body>
    <header class="header">
        <div class="nasa">
            <img src="img/nasa(log).png">
        </div>
    <div class="div" id="box1">Преимущества</div>
        <div class="div" id="box2">Фотографии</div>
        <div class="div" id="box3">Контакты</div>
        <input type="button" value="Вход">
    </header>
    <main class="main">
        <div class="box1" id="box1"><h1>Космическое агенство</h1><br>
        <h2>Национальное управление по аэронавтике и исследованию космического
            пространсва - ведомство, относящееся к федеральному правительству
            США и подчиняющееся непосредсвенно президенту США.</h2>
        </div>
        <div class="box2" id="box2"></div>
        <div class="box3" id="box3">
            <div class="rocket"><img src="img/rocket.jpg" alt="">
                <div class="rocket-1">Спейс шатлы -<br> пилотируемые корабли

                </div>
            </div>
            <div class="telescope"><img src="img/teleskope.jpg" alt="">
                <div class="telescope-1">Лучшее тескопическое <br> оборудование</div>
            </div>
            <div class="luna"><img src="img/luna.jpg" alt="">
                <dir class="luna-1">Целимся на Луну <br> и Марс</dir>
            </div>
            <div  class="medal"><img src="img/medal.png" alt="">
                <div class="medal-1">Золотая медаль<br>по научным исследованиям</div>
            </div>
        </div>
        <div class="box4" id="box4"><img src="img/milky-way.jpg" alt=""></div>
        <div class="box5" id="box5"></div>
    </main>
    <div class="wrapper">
        <div class="slider single-item">
            <div><img src="img/luna.jpg" alt=""></div>
            
        </div>
    </div>
   
   <div>
    <div class="slider-for">
        <div><img src="img/rocket.jpg" alt=""></div>
        <div><img src="img/teleskope.jpg" alt=""></div>
        
    </div>



   </div>
            
    </script> 
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script src="slick/slick.min.js"></script>
    <script src="master.js"></script>
    
    
    <footer>
        <div class="footer"></div>
    </footer>
    

   
    
</body>
</html>



вот HTML


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
.body{
    background-color: black;
}
.header{
    width: auto;
    height: 70px;
    background: rgb(11, 11, 100);
    display: grid;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
   
}
img{
    width: 500px;
    height: 500px;
    border-radius: 10%;
}
.nasa img{
    width: 120px;
    height: 70px;
}

.div{
    color: white;
    font-size: 1.5rem;
    font-style: condensed ;

}
input{
    background: red;
    color: white;
    border-radius: 10px;
    font-size: 1.3rem;
    font-style: condensed;
    height: 40px;
    width: 80px;
}
.main{
    width: auto;
    height: 800px;
    background: white;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 25% 75%  ;
    
} 
.box1{
    margin: auto 0;
    font-size: 1.1rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    
}
.box3{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    
    
}
.rocket{
    display: grid;
    grid-template-rows: 70% 30%;
    
}
.rocket img{
    height: 150px;
    width: 150px;
    margin: auto auto;
}
.rocket-1{
    text-align: center;
    font-size: 1.1rem;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   
}
.telescope{
    display: grid;
    grid-template-rows: 70% 30%;
    background-size: 40px 40px;
}
.telescope img{
    height: 150px;
    width: 150px;
    margin: auto auto;
}
.telescope-1{
    text-align: center;
    font-size: 1.1rem;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-ser
}
.luna{
    display: grid;
    grid-template-rows: 70% 30%;
    background-size: 40px 40px;
}
.luna img{
    height: 150px;
    width: 150px;
    margin: auto auto;
}
.luna-1{
    text-align: center;
    font-size: 1.1rem;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-ser
}
.medal{
    display: grid;
    grid-template-rows: 70% 30%;
    background-size: 40px 40px;
}
.medal img{
    height: 150px;
    width: 150px;
    margin: auto auto;
}
.medal-1{
    text-align: center;
    font-size: 1.1rem;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-ser
}
.box4 img{
    height: 500px;
    width: 500px;
    border-radius: 30px;
    
}
.box4{
margin: auto ;
}

.wrapper{
    margin: 0 auto;
    padding: 0 10 px;
    background-color: rgba(54, 48, 48, 0.931);
    width: 1480px;
    height: 642px;

}
.footer{
    width: auto;
    height: 100px;
    background: rgb(11, 11, 100);
    display: grid;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
}

    введите сюда код
javascript html slider
Источник: Stack Overflow на русском

Ответы

Ответов пока нет.