时间戳

首页 > 解决方案 > Slick 插件在我的网站上看起来很奇怪。有人知道修复吗？

javascript - Slick 插件在我的网站上看起来很奇怪。有人知道修复吗？

问题描述

我一直在研究一个网站，并且一直在尝试实现图像幻灯片。我最终选择了 slick，但作为我处理过的最复杂的插件（我对编码很陌生），我立即遇到了一个问题。在查看该站点时，我的幻灯片看起来很奇怪。有谁知道解决这个问题？这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Sunny Bistro</title>
    <meta charset="UTF-8">

    
    <link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="CSS/Base%20CSS.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>

<body>

    <div class="header">
        <nav id="nav">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#home"><h6>Home</h6></a>
                </li>
                <li>
                    <a href="#about"><h6>About</h6></a>
                </li>
                <li>
                    <a href="#services"><h6>Services</h6></a>
                </li>
                <li>
                    <a href="#contact"><h6>Contact</h6></a>
                </li>
            </ul>
        </nav>
    </div>



    <section id="bottle">
        <article>
            <div class="Slideshow-1">
                <div><img src="CSS/Images/SunnyBistro-1.jpg"></div>
                <div><img src="CSS/Images/SunnyBistro-7%20edited.jpg"></div>
            </div>
            <h6><img src="CSS/Images/SunnyBistro-8.png"></h6>
            <h1>The Sunny Bistro</h1>
            <h2>The sunny bistro</h2>
        </article>
        <div class="parallax" data-velocity="-.3"></div>
    </section>
    <section id="story-freext">
        <article>
            <p>Lorem ipsum</p>
            <p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
        </article>
        <div class="parallax" data-velocity="-.1"></div>
        <div class="parallax" data-velocity="-.5" data-fit="525"></div>
    </section>
    <section></section>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
<script>
    $(document).ready(function () {
        $('.header').stickyNavbar();
    })
</script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script>
    $(document).ready(function(){
  $('Slideshow-1').slick({
    setting-name: setting-value
  });
});
    </script>
    
</body>

</html>
如果你需要我的 CSS 代码，这里是：

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
body{font:13px/1.1 Helvetica,sans-serif;}
p{line-height:1.6;}
/* Example page */
strong{font-weight:bold;}
header{height:100px;}
header img{float:left;margin:14px 0 0 14px}
header h1{margin-left:14px;float:left;font-size:20px;line-height:100px;}

.active {
    color: #fff !important;
    text-decoration: underline !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}



.header { width: 100%; } #nav { text-align: right; background: rgb(999, 999, 999); /* fallback */
    background: rgba(999, 999, 999, 1); /* 50% transparent */ } #nav li { display: inline-block; padding: 10px 50px; } 

a {
    
    text-decoration: none
}
    
a{
    
    color: #64b7d1
    
}



    p {
    
    font-family: verdana; font-size: 20px; text-decoration: none
       
}


section {
    min-height: 1000px;
    position: relative;
    width: 100% !important;
    min-width: 1000px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

section:nth-of-type(2){background:black;height:1600px;}

#story-freext>div:nth-of-type(1) {
    background: url(Images/SunnyBistro-7%20edited.jpg) 50% 0 no-repeat fixed;
    margin: 0;
    height: 1600px;
    position:absolute;
    width:100%;
    top:0;left:0;
}

#story-freext>div:nth-of-type(2) {
    background: url(Images/SunnyBistro-7%20edited.jpg) 50% 0 no-repeat fixed;
    margin: 0;
    height: 1600px;
    position:absolute;
    top:0px;left:100px;
    width:100%;
}

#bottle>div:nth-of-type(1){
    background: url(Images/SunnyBistro-7%20edited.jpg) 50% 0 no-repeat fixed;
    margin: 0;
    height: 1080px;
    position:absolute;
    top:0;left:0;
    width:1920px;
    
}

section h1{color:#4F9426;width:300px;font-size:65px;margin-bottom:14px;}
section p{color:black;width:300px;}
section article{position:absolute;top:240px;left:40px;width:300px;z-index:4;}

.parallax-item{position:absolute;z-index:5;top:40px;left:400px;}
body {
       
	background-color: white
         
        
}


h1 {

	text-align:center; font-family:impact; font-size: 90px; color:yellow;
	
}



h2 {

	text-align:left; font-family:Verdana; font-size: 30px;color:yellow;



}



h3 {
    
    
    text-align:left; font-family:Verdana; font-size: 30px;color:yellow;
        

}

h4 {
    
    text-align:left; font-family:Verdana; font-size: 30px;color:yellow;


}

h5 {
    
    text-align: left
    
}


h6 {
    
    font-family: 'Audiowide', cursive; font-size: 20px; text-decoration: none
}

   
p {
    
    font-family: impact; font-size: 30px
}
由于我是新手，因此我将不胜感激，因为我不太了解。提前致谢 ：）

标签： javascriptjqueryhtmlcssslick.js

解决方案

@vlad 请下载此文件。我没有设计样式，但我让滑块工作。我觉得剩下的就是你能得到的。

推荐阅读