如何激活CDN光滑传送带?

问题描述 投票:0回答:1

我正在尝试使用圆滑的转盘,将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">&#9776;</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>
javascript jquery carousel slick slick.js
1个回答
0
投票

$(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.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">
  <script src="https://cdnjs.cloudflare.com/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">&#9776;</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="https://image.flaticon.com/icons/png/512/16/16049.png" width="1274px" height="640px" alt="">1</div>
            <div><img src="https://image.flaticon.com/icons/png/512/16/16049.png" width="1274px" height="640px" alt="">2</div>
            <div><img src="https://image.flaticon.com/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.com/icons/png/512/16/16049.png" alt=""><p>BRANDING</p></a>
                            <a href="#" class="location"><img src="https://image.flaticon.com/icons/png/512/16/16049.png" alt=""><p>MARKETING</p></a>
                    </div>
                    <div class="businessIcons2">
                        <a href="#" class="location"><img src="https://image.flaticon.com/icons/png/512/16/16049.png" alt=""><p>REDESIGN</p></a>
                        <a href="#" class="location"><img src="https://image.flaticon.com/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.com/icons/png/512/16/16049.png" alt=""><p>ANALYSING</p></a>
                        <a href="#" class="location"><img src="https://image.flaticon.com/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.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>
© www.soinside.com 2019 - 2024. All rights reserved.