Question

我正在尝试使用Slick Carousel为三个不同的div容器制作幻灯片（下面的示例）。每个容器都有三张应该循环的图片。当我在“pic”类下为每个容器添加1个图像时，布局是正确的，但是当我将其他2个图像添加到每个容器并刷新页面时，所有图像都非常伸展，布局和位置搞砸了。请原谅我不知道如何展示JavaScript并让它在预览部分工作的示例表示不佳。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Why OneDrive?</title>
    <link rel="stylesheet" href="../CSS/styles.css">
    <script src="https://use.fontawesome.com/c83075ea7c.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
    <script src="../JS/jQuery.js"></script>
    <script
              src="https://code.jquery.com/jquery-3.2.1.js"
              integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
              crossorigin="anonymous">     
    </script>
    <script type="text/javascript" src="../slick/slick.min.js"></script>
    <script src="../JS/3picslideshow.js"></script>        
</head>
<body>
    <header>
        <nav>
            <ul class="main-menu">
                <li class="menu-item"><a href="#Home" class="menu-item-select">Home</a></li>
                <li class="menu-item"><a href="#Home" class="menu-item-select">Usage</a></li>
                <li class="menu-item menu-item-has-child">
                    <a href="#Home" class="menu-item-select">About<i class="fa fa-chevron-down" aria-hidden="true"></i></a>
                    <ul class="sub-nav">
                        <li><a href="#" target="_blank">Pricing</a></li>
                           <li><a href="#" target="_blank">Extra Information</a></li>
                        <li><a href="#" target="_blank">Related</a></li>
                    </ul>
                </li>
                <li class="menu-item"><a href="#Home" class="menu-item-select">Acknowledgments</a></li>
            </ul> 
        </nav>
    </header>
    <div class="column-container">

        <div class="row-container">

            <div class="home-carousel-grid">

                <div class="home-carousel">
                    <div class="pic">
                        <img src="../Pictures/OneDrive-Clouds-Text-Logo.png" alt="">

                    </div>
                    <div class="pic">
                        <img src="../Pictures/OneDrive-Clouds-Logo.png" alt="">

                    </div>
                    <div class="pic">
                        <img src="../Pictures/OneDrive-Sync-Logo.png" alt="">
                    </div>
                </div>
            </div>

        </div>
        <div class="pic-intro">
            <h1>OneDrive A Cloud Based Storage System!</h1>
        </div>
        <div class="home-content">
            <div class="content">
                <p>With OneDrive You Can:</p>
                <ul>
                    <li>Sync To Multiple Devices.</li>
                    <li>See All Of Your Information From Any Device.</li>
                    <li>Oragnize Your Folders and Subfolders</li>
                    <li>Buy The Amount of Space That You Need! </li>
                    <li>Share Individual Folders or Files with Colleagues.</li>
                </ul>
                <div class ="button">
                    <a href="https://onedrive.com">See What OneDrive Can Do For You</a>
                </div>
            </div>
            <div class="content content-pics">
                <img src="../Pictures/OneDrive-Sync-Logo.png">
            </div>

        </div>
    </div>
</body>
</html> 

html{
    @import url(https://fonts.googleapis.com/css?family=Hind);
    font-family: 'Hind', sans-serif;
}

body{
    background-color: white;
}

header{
    width: 100%;
}

nav{
    display: flex;
    justify-content: center;


}

ul.main-menu{
    display: flex;
    width: 100%;
    justify-content: space-around;
    list-style: none;
    max-width: 100%;

}

li.menu-item{



}

a.menu-item-select{
    text-decoration: none;
    color: #808080;
    font-weight: bold;
    padding-top: 4px;
    padding-right: 25px;
    padding-bottom: 4px;
    padding-left: 14px;
}

a.menu-item-select:hover{
    text-align: center;
    background-color: #DFE1E5;
    border-radius: 3px;
    padding-top: 4px;
    padding-right: 25px;
    padding-bottom: 4px;
    padding-left: 14px;


}

a.menu-item-has-child{
    position: relative;
}

.sub-nav {
    display: none;
    background:    #D3D3D3;
      overflow: hidden;
      font-weight: normal;
      list-style: none;

}

.sub-nav a{
    text-decoration: none;
    color: #808080;



 }

 .sub-nav a:hover{
    color:     #094AB2;
}

.sub-nav li{
    padding-bottom: 20px;
    padding-top: 20px;
    padding-right: 50%; 
    text-align: center;
}



li:hover > .sub-nav{
    display: flex;
      flex-direction: column; 
      align-items: center;
    position: absolute;
 }

 .column-container{
     display: flex;
     flex-direction: column;
 }

 .pic-intro{
     text-align: center;
     color: #091E42;
     border-bottom: solid 2px #094AB2;


 }

  .row-container{
     display: flex;
     justify-content: space-around;
 }

 .home-content{
     display: flex;
     padding-left: 5%;

 }

 .content{
    width: 33.3%;
    color: #091E42;
    font-weight: bold;
 }

 .content-pics img{
    height:150px;

 }

 .button a{
    text-decoration: none;
    border-radius: 3px;
    color: #091E42;
    background-color: #b3ffe6;
    padding: 5px 5px 5px 5px;
    transition: 4s;


 }

 .button a:hover{
     transition: 2s;
    background-color: #00e699;


 }

 .button{
    text-align: center;

 }

 .home-carousel{
     display: flex;
     justify-content: space-around;


 }

$( document ).ready(function() {

$(document).ready(function(){
      $('.pic').slick({

      });
    });

});

使用Slick Carousel有三个不同的图像周期

0 个答案: