Why doesn't the slick slider work? Did everything seem to follow the instructions? Here is a mistake console error

Here is index.php

<?php session_start(); ob_start(); error_reporting(E_ALL); ?> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> <link rel="stylesheet" href="css/style.css?v=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,900&amp;subset=cyrillic" rel="stylesheet"> <title>shop</title> </head> <body> <header id="header"> <?php include "pages/header.php"; ?> </header> <section id="content"> <div class="left_content"> <div class="left_content_catalog_sidebar"> <?php include "elems/left_catalog.php"; ?> </div> </div> <div class="top_content"> <?php include "elems/top_slider.php"; include "elems/top_sales.php"; include "elems/top_sale.php"; ?> </div> </section> <footer id="footer"> <?php include "pages/footer.php"; ?> </footer> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function () { $('.sub > a').click(function(){ if ($(this).attr('class') != 'active'){ $('.sub ul').slideUp(); $(this).next().slideToggle(); } return false; }); $('.mini-menu > ul > li > a').click(function(){ $('.mini-menu > ul > li > a, .sub a').removeClass('active'); $(this).addClass('active'); }), $('.sub ul li a').click(function(){ $('.sub ul li a').removeClass('active'); $(this).addClass('active'); }); }); </script> </body> </html>

Here is the slider file (top_slider.php)

 <div class="slider_slick_items"> <div class="top_content_slider"> <div class="slider_description"> <div class="top_content_description_head"> <h3 class="top_content_description_header">ЭлСктричСский ΠΌΠΈΠ½ΠΈ-Π²Π΅Ρ€Ρ‚ΠΎΠ»Π΅Ρ‚ Beacon</h3> </div> <div class="top_content_description_characteristic"> <p>Π’ΠΈΠΏ: ΠΌΠΈΠ½ΠΈ Π²Π΅Ρ€Ρ‚ΠΎΠ»Π΅Ρ‚</p> <p>Шасси: пластик</p> <p>Π­Π»Π΅ΠΊΡ‚Ρ€ΠΎΠ΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»ΠΈ: 180 Ρ€Π°Π·ΠΌΠ΅Ρ€Π° (2ΡˆΡ‚.)</p> <p>ВрСмя ΠΏΠΎΠ»Π΅Ρ‚Π°: 10 - 12 ΠΌΠΈΠ½ΡƒΡ‚</p> </div> <div class="top_content_description_price"> <p>Π¦Π΅Π½Π° 6 960 Ρ€ΡƒΠ±Π»Π΅ΠΉ</p> <form action=""> <input class="in_cart_btn" type="submit" name="in_cart" value="Π’ ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ"> </form> </div> </div> <div class="slider_description_img"> <img src="img/pic.png" alt="Π²Π΅Ρ€Ρ‚ΠΎΠ»Π΅Ρ‚"> </div> </div> <div class="top_content_slider"> <div class="slider_description"> <div class="top_content_description_head"> <h3 class="top_content_description_header">ЭлСктричСский ΠΌΠΈΠ½ΠΈ-Π²Π΅Ρ€Ρ‚ΠΎΠ»Π΅Ρ‚ Beacon</h3> </div> <div class="top_content_description_characteristic"> <p>Π’ΠΈΠΏ: ΠΌΠΈΠ½ΠΈ Π²Π΅Ρ€Ρ‚ΠΎΠ»Π΅Ρ‚</p> <p>Шасси: пластик</p> <p>Π­Π»Π΅ΠΊΡ‚Ρ€ΠΎΠ΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»ΠΈ: 180 Ρ€Π°Π·ΠΌΠ΅Ρ€Π° (2ΡˆΡ‚.)</p> <p>ВрСмя ΠΏΠΎΠ»Π΅Ρ‚Π°: 10 - 12 ΠΌΠΈΠ½ΡƒΡ‚</p> </div> <div class="top_content_description_price"> <p>Π¦Π΅Π½Π° 6 960 Ρ€ΡƒΠ±Π»Π΅ΠΉ</p> <form action=""> <input class="in_cart_btn" type="submit" name="in_cart" value="Π’ ΠΊΠΎΡ€Π·ΠΈΠ½Ρƒ"> </form> </div> </div> <div class="slider_description_img"> <img src="img/pic.png" alt="Π²Π΅Ρ€Ρ‚ΠΎΠ»Π΅Ρ‚"> </div> </div> </div>

Here is the main main.js file

 $(document).ready(function(){ $('.slider_slick_items').slick(); });
Here is the folder structure (all of a sudden it became wise that). The root folder

CSS folder

Js folder

  • Why do you connect jquery twice? Plus, for some reason, the script is in the html structure, and because of this, document preparation is prescribed twice - Maxim Vorobiev
  • xs ... but your answer helped)) Removed too much)) You can answer, put a tick))) - Roman

1 answer 1

You connect jquery twice, plus try to write all your scripts in one file, and not put them into the html structure, because of this you have two times written document ready, this is what causes conflicts in the code.

  • Why can't I use document ready several times? - nicolaa
  • In this case, this is not why, why bother to make such a code separately in html and wrap it in document ready? When there is a js file already created and there is a document check there - Maxim Vorobev