首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Css和Javascript无法加载到html中

问Css和Javascript无法加载到html中
EN

Stack Overflow用户
提问于 2020-04-23 20:31:48
回答 2查看 85关注 0票数 0

尝试在我的django项目中添加一个滑块到html页面,但是css和javascript没有加载。由于这一点,而不是滑块是一个实际的滑块。图像滑过,我得到一条垂直的图片线。这些是我在浏览器控制台中得到的错误

代码语言:javascript
复制
Failed to load resource: the server responded with a status of 404 (Not Found)
slider.js:1 Uncaught ReferenceError: $ is not defined
    at slider.js:1
main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
countdown.js:26 Uncaught TypeError: Cannot set property 'innerHTML' of null
    at updateClock (countdown.js:26)
    at initializeClock (countdown.js:36)
    at countdown.js:41
main.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
slider.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

这是我的静态文件夹的结构

代码语言:javascript
复制
static
-->second
---->css
       >app
         slider.css
---->js
       >app
         slider.css

我的html

代码语言:javascript
复制
{% load static %}
<link rel="stylesheet" href="{% static 'second/css/app/slider.css' %}">
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="{% static 'second/js/app/slider.js' %}"></script>
    <div class="container">
        <h3>Our  Partners</h3>
        <section class="customer-logos slider">
      <div class="slide"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/football-logo-background_1195-244.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/background-of-spots-halftone_1035-3847.jpg"></div>
      <div class="slide"><img src="https://image.freepik.com/free-vector/retro-label-on-rustic-background_82147503374.jpg"></div>
   </section>
</div>

我的javascript (slider.js)

代码语言:javascript
复制
$(document).ready(function(){
    $('.customer-logos').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 4
            }
        }, {
            breakpoint: 520,
            settings: {
                slidesToShow: 3
            }
        }]
    });
});

和css (slider.css):

代码语言:javascript
复制
h3{
  text-align:center;
  padding: 20px;
}
/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

下面是使用此滑块工作https://codepen.io/emms21/pen/eYpgMwz的代码

EN

回答 2

Stack Overflow用户

发布于 2020-04-23 20:36:09

我想你忘了加jQuery CDN了。

代码语言:javascript
复制
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

将这一行添加到html文件中。

票数 0
EN

Stack Overflow用户

发布于 2020-04-23 22:55:07

在脚本标记中添加属性type = "text/javascript“

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61387298

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档