Я пытаюсь использовать скользкую карусель со ссылкой CDN внутри тега JavaScript над закрывающим тегом тела. Однако ссылка соответствует ссылке на официальном сайте: https://cdnjs.com/libraries/slick-carousel, она не работает. Раньше он работал должным образом, прежде чем я пытался создать систему электронной почты с PHPMailer. Я не знаю, что вызывает эту проблему. Если кто-то, кто может любезно дать мне несколько решений или советов, я был бы рад.
main. js
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
index. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
<a href="http://joeynamiki.com/" target="_blank">Work</a>
<a href="about.php">About Us</a>
<a href="#">Services</a>
<a href="https://medium.com/@wcgwd1" target="_blank">Blog</a>
<a href="contact.php"><span>Contact Us</span></a>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
</div>
</section>
<div class="box">
<span></span>
<span></span>
<span></span>
</div>
<section class="businessSec">
<h1>Brand Strategy • Web Design • Marketing</h1>
<div class="bContainer">
<div class="businessIcons">
<a href="#" class="location"><img src="img/brand.png" alt=""><p>BRANDING</p></a>
<a href="#" class="location"><img src="img/marketing.png" alt=""><p>MARKETING</p></a>
</div>
<div class="businessIcons2">
<a href="#" class="location"><img src="img/redesign.png" alt=""><p>REDESIGN</p></a>
<a href="#" class="location"><img src="img/webdesign.png" alt=""><p>MAKE A NEW SITE</p></a>
</div>
<div class="businessIcons3">
<a href="#" class="location"><img src="img/anyalizing.png" alt=""><p>ANALYSING</p></a>
<a href="#" class="location"><img src="img/seo.png" alt=""><p>SEO</p></a>
</div>
</div>
</section>
<div class="container">
<section class="infoBox">
<div class="photoBox" id="pos">
<h2><img src="img/image4.jpg" alt=""></h2>
</div>
<div class="detailBox">
<h1>Redesign your exiting website ?</h1>
<p>• Sixty percent of the increase in the search of your website.<br><br>• Remaking a stress-free website by cutting the speed of loading your website.<br><br>• Using colors and fonts following the latest design trend</p>
</div>
</section>
<section class="infoBox2">
<div class="photoBox2">
<h2><img src="img/image4.jpg" alt=""></h2>
</div>
<div class="detailBox2">
<h1>Need your own website ?</h1>
<p>• I visualize your expectation<br><br>
• Find keywords for the best search for the web<br><br>
• Create a design with a strategic UX design<br><br></p>
</div>
</section>
<section class="infoBox">
<div class="photoBox">
<h2><img src="img/image4.jpg" alt=""></h2>
</div>
<div class="detailBox">
<h1>Analysing your website ?</h1>
<p>JoeyNamiki Design checks the number of users who entered your website. Check the number of the clicks to each element. Also, we look at how the user found the website and how they browse on the website. After that, we suggest you the breakthrough for the problem.</p>
</div>
</section>
<section class="contactSection">
<h1>Let's do the first chat together and make a better website for the better futuer!</h1>
<a href="contact.php"><button>CONTACT US</button></a>
</section>
<section class="clientSec">
<h1>client</h1>
<div class="clientIcons">
<a href="#"><img src="img/gofindai.jpg" alt=""></a>
<a href="#"><img src="img/feelgoodetc.png" alt=""></a>
<a href="#"><img src="img/spoofstore.png" alt=""></a>
<a href="#"><img src="img/logo4.png" alt=""></a>
</div>
</section>
<div class="ourWork">
<a href="http://joeynamiki.com/" target="_blank"><button>View Our Work</button></a>
</div>
<section class="cs">
<div class="awardTitle">
<h1>Client Review</h1>
</div>
<section id="userReview">
<div class="slick">
<div><p><i>I love your design. I think you are becoming a very good designer very soon. You have a really good sense. You need to study every single day. Keep going.</i><br><br><b>By the design supervisor at GoFind.ai in San Francisco</b></p></div>
<div><p><i>You are a hard worker. I want to hire you as a graphic designer.</i><br><br><b>By CEO at Spoofstore! in Toronto</b></p></div>
<div><p><i>I love your UX design and strategy whose route is coherent to our goal. Additionally, I follow your suggestion which SNS icons should be in the footer, not the tope of our website. I want to hire you as the COO and designer position.</i><br><br><b>By CEO at FeelGood.etc in Montréal.</b></p></div>
</div>
</section>
</section>
<div class="blogSec">
<h1>Check Our Blog</h1>
</div>
<section class="blogPost">
<div class="post">
<h1>The roots of Typography created by Jan Tschichold.</h1>
<p><br>As long as you are designers such as graphic, web, or editorial designs, you may have an experience to adjust each space between characters of header on your design...</p>
<a href="https://medium.com/@wcgwd1/the-roots-of-typography-created-by-jan-tschichold-39fd006aa05c" target="_blank"><button>Learn More</button></a>
</div>
</section>
<section class="blogPost2">
<div class="post">
<h1>The website below explains the usage of and what is callback function in JavaScript.</h1>
<p>If you have ever studied JavaScript before, maybe you may have an experience to be confused at what callback function in JavaScript is and how to use callback function. Even closure in JavaScript is really tricky. So, I found a good article to understand it. I will share the website. Hopefully, you will understand it.</p>
<a href="https://medium.com/@wcgwd1/the-website-below-explains-the-usage-of-and-what-is-callback-function-in-javascript-2ff5cd2d7f5c" target="_blank"><button>Learn More</button></a>
</div>
</section>
<section class="newsLetter">
<h1><i>Better design info gives you better inspiration.</i></h1>
<form method="post" action="send2.php" class="contents">
<div><input type="text" name="name" placeholder="Name" required></div>
<div><input type="text" name="email" placeholder="Email" required></div>
<div><button type="submit" id="subButton" value="Subscribe">subscribe</button></div>
</form>
</section>
<hr>
<footer>
<section class="sns">
<a href="https://www.linkedin.com/in/ynjoeyca/" target="_blank"><i class="fa fa-linkedin fa-lg"></i></a>
<a href="https://dribbble.com/Joey73" target="_blank"><i class="fa fa-dribbble fa-lg"></i></a>
<a href="https://www.instagram.com/ynjoeyca/" target="_blank"><i class="fa fa-instagram fa-lg"></i></a>
<a href="https://twitter.com/ynjoeyca" target="_blank"><i class="fa fa-twitter fa-lg"></i></a>
<a href="https://github.com/ynjoeyca" target="_blank"><i class="fa fa-github fa-lg" style="text-decoration:none"></i></a>
<a href="https://www.youtube.com/channel/UCaubVFfCUyq28uZSOBvTFIA" target="_blank"><i class="fa fa-youtube-play fa-lg"></i></a>
<a href="https://www.pinterest.com/joeynamiki2/" target="_blank"><i class="fa fa-pinterest fa-lg"></i></a>
</section>
<p>®2020JOEYDESIGN All Rights Reserved</p>
</footer>
</div><!-- container -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
</body>
</html>