admin管理员组文章数量:1414908
I am trying to use a slick-carousel with the link of CDN inside JavaScript tags above the closing body tag. However the link matches the one on the official website:, it does not work. It used to work properly before I fished creating a email system with PHPMailer. I do not know what causes this problem. If anyone who can kindly give me some solutions or advices, I would be glad.
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=".9.0/slick.min.css">
<link rel="stylesheet" href=".9.0/slick-theme.min.css">
<link rel="stylesheet" href=".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="/" target="_blank">Work</a>
<a href="about.php">About Us</a>
<a href="#">Services</a>
<a href="/@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="/" 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 being 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="/@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="/@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="/" target="_blank"><i class="fa fa-linkedin fa-lg"></i></a>
<a href="" target="_blank"><i class="fa fa-dribbble fa-lg"></i></a>
<a href="/" target="_blank"><i class="fa fa-instagram fa-lg"></i></a>
<a href="" target="_blank"><i class="fa fa-twitter fa-lg"></i></a>
<a href="" target="_blank"><i class="fa fa-github fa-lg" style="text-decoration:none"></i></a>
<a href="" target="_blank"><i class="fa fa-youtube-play fa-lg"></i></a>
<a href="/" 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=".9.0/slick.min.js"></script>
</body>
</html>
I am trying to use a slick-carousel with the link of CDN inside JavaScript tags above the closing body tag. However the link matches the one on the official website:https://cdnjs./libraries/slick-carousel, it does not work. It used to work properly before I fished creating a email system with PHPMailer. I do not know what causes this problem. If anyone who can kindly give me some solutions or advices, I would be glad.
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./ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./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./" target="_blank">Work</a>
<a href="about.php">About Us</a>
<a href="#">Services</a>
<a href="https://medium./@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./" 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 being 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./@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./@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./in/ynjoeyca/" target="_blank"><i class="fa fa-linkedin fa-lg"></i></a>
<a href="https://dribbble./Joey73" target="_blank"><i class="fa fa-dribbble fa-lg"></i></a>
<a href="https://www.instagram./ynjoeyca/" target="_blank"><i class="fa fa-instagram fa-lg"></i></a>
<a href="https://twitter./ynjoeyca" target="_blank"><i class="fa fa-twitter fa-lg"></i></a>
<a href="https://github./ynjoeyca" target="_blank"><i class="fa fa-github fa-lg" style="text-decoration:none"></i></a>
<a href="https://www.youtube./channel/UCaubVFfCUyq28uZSOBvTFIA" target="_blank"><i class="fa fa-youtube-play fa-lg"></i></a>
<a href="https://www.pinterest./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./ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
</body>
</html>
- Can you see any error on the console? – Vijay Joshi Commented Jan 28, 2020 at 6:37
- Also, try loading your main.js file after loading slick.min.js – Vijay Joshi Commented Jan 28, 2020 at 6:39
- Change the order of js files. Load plugins first and then your custom js. jquery--> slick--> main – K K Commented Jan 28, 2020 at 6:40
- Cloud you please share your style.css file? – vijay Commented Jan 28, 2020 at 6:42
- @Tuna, style.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) font-awesome.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found) – user8686220 Commented Jan 28, 2020 at 6:45
2 Answers
Reset to default 1
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 500, // autoplaySpeed: 1000, or autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});<!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./ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</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./" target="_blank">Work</a>
<a href="about.php">About Us</a>
<a href="#">Services</a>
<a href="https://medium./@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="https://image.flaticon./icons/png/512/16/16049.png" width="1274px" height="640px" alt="">1</div>
<div><img src="https://image.flaticon./icons/png/512/16/16049.png" width="1274px" height="640px" alt="">2</div>
<div><img src="https://image.flaticon./icons/png/512/16/16049.png" width="1274px" height="640px" alt="">3</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="https://image.flaticon./icons/png/512/16/16049.png" alt=""><p>BRANDING</p></a>
<a href="#" class="location"><img src="https://image.flaticon./icons/png/512/16/16049.png" alt=""><p>MARKETING</p></a>
</div>
<div class="businessIcons2">
<a href="#" class="location"><img src="https://image.flaticon./icons/png/512/16/16049.png" alt=""><p>REDESIGN</p></a>
<a href="#" class="location"><img src="https://image.flaticon./icons/png/512/16/16049.png" alt=""><p>MAKE A NEW SITE</p></a>
</div>
<div class="businessIcons3">
<a href="#" class="location"><img src="https://image.flaticon./icons/png/512/16/16049.png" alt=""><p>ANALYSING</p></a>
<a href="#" class="location"><img src="https://image.flaticon./icons/png/512/16/16049.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./" 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 being 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./@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./@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./in/ynjoeyca/" target="_blank"><i class="fa fa-linkedin fa-lg"></i></a>
<a href="https://dribbble./Joey73" target="_blank"><i class="fa fa-dribbble fa-lg"></i></a>
<a href="https://www.instagram./ynjoeyca/" target="_blank"><i class="fa fa-instagram fa-lg"></i></a>
<a href="https://twitter./ynjoeyca" target="_blank"><i class="fa fa-twitter fa-lg"></i></a>
<a href="https://github./ynjoeyca" target="_blank"><i class="fa fa-github fa-lg" style="text-decoration:none"></i></a>
<a href="https://www.youtube./channel/UCaubVFfCUyq28uZSOBvTFIA" target="_blank"><i class="fa fa-youtube-play fa-lg"></i></a>
<a href="https://www.pinterest./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./ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
</body>
</html>
$(document).ready(function () {
$(".slideshow ").slick({
slidesToShow: 2,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows: true,
dots: true,
pauseOnHover: false,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 520,
settings: {
slidesToShow: 1,
},
},
],
});
});
<link href="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section id="slideshow">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="slick slideshow">
<div><img src="https://i.sstatic/CU2dS.png" alt="" /></div>
<div><img src="https://i.sstatic/1vJZM.png" alt="" /></div>
<div><img src="https://i.sstatic/MNLGU.png" alt="" /></div>
<div><img src="https://i.sstatic/1944z.png" alt="" /></div>
<div><img src="https://i.sstatic/EMM82.png" alt="" /></div>
<div><img src="https://i.sstatic/RKXci.png" alt="" /></div>
</div>
</div>
</div>
</div>
</section>本文标签： javascriptHow to activate a cdn slickcarouselStack Overflow
版权声明：本文标题：javascript - How to activate a cdn slick-carousel? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745189844a2646861.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论