niedziałająy slider mimo robienia wg filmiku

0

robiłem slider wg tego filmiku https://www.youtube.com/watch?v=_hzIwvuSXpc , oto moj kod, slidera dotycza 2 ostatnie linki w head i 3 ostatnie scripty pod koniec body i div z klasa slider, wie ktos czemu to nie działa?

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- <script src="https://use.fontawesome.com/2af48de262.js"></script> -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <link rel="stylesheet" href="main.css">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
 
 
    <title>Document</title>
</head>

<body>
    <header>
        <nav>
            <img src="img/logo.jpg" class="logo" alt="">
        </nav>
    </header>
    <div class="container">
        <div class="row first-section">
            <h1 class="heading text-center">Heading</h1>
            <h5 class="heading-two text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
        </div>





        <div class="row second-section slider">
            <div class="col-sm divs item">
                <h6 class="first-heading">Heading</h6>
                <p>Lorem ipsum dolor sit amet.</p>
                <img src="img/images.png" alt="">
            </div>
            <div class="col-sm divs item">
                <h6 class="first-heading">Heading</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Aenea uismod bibendum laoreet. Proin gravida dolor sit amet lacus.</p>
            </div>
            <div class="col-sm divs item">
                <h6 class="first-heading">Ultra Mega Super Long Heading</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Aenea uismod bibendum laoreet. Lorem ipsum dolor sit amet</p>
            </div>
        </div>



        <p id="left-arrow"><</p>
        <p id="left-arrow">></p>
    </div>
    <!-- <div class="row">

    </div> -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
    </script>
    <script src="main.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
    <script type="text/javascript">
    $('.slider').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
    </script>
</body>

</html>
0

Nie ma nawet strzałek do zmiany slide'u

1

Wszystko działa jak należy.
Na PC nie będziesz miał strzałek (pojawia się dopiero poniżej 600px) bo masz 3 elementy i takie masz ustawienia karuzeli.
Dodatkowo bootstrap nadpisuje część stylów ze slicka dla strzałek i dlatego są one niewidoczne.

Sprawdź sobie w źródle strony. Pojawiają się elementy (buttony) odpowiedzialne za przewijanie slajdów poniżej wspomnianej rozdzielczości.

0

nie rozumiem z czego wynika to, że pojawiają się dopiero poniżej 600px i jak te buttony znaleźć?

1

W swoim kodzie masz 3 elementy do wyświetlenia na karuzeli.
Tak więc śledząc ustawienia slicka

$('.slider').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,       // Domyślnie mają być max 4 elementy wyświetlone na raz. Ty masz 3 więc strzałki nie są potrzebne
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3, // Na rozdzielczości poniżej 1024px mają być max 3 elementy wyświetlone na raz. Ty masz 3 więc strzałki nie są potrzebne
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,  // Na rozdzielczości poniżej 600px mają być max 2 elementy wyświetlone na raz. Ty masz 3 więc TUTAJ POJAWIS SIĘ STRZAŁKI
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

Demo:
https://jsfiddle.net/48juxk35/

0

ale ich wtedy nie mam - strzałek kiedy zejdzie ponizej 600

0

tylko ze jak zejdzie u mnie ponizej 600, to te 2 slajdy zajmuja cala szerokosc okna

1 użytkowników online, w tym zalogowanych: 0, gości: 1