0

我正在将使用Amazing Slider生成的幻灯片代码放入我的网站（用于学校项目）中，特别是在<div class = "bl-content"></div>和不幸的是，无济于事。每当我刷新我的网站以查看它是否有效时，JS 滑块就不会显示在#bl-content div 下。我尝试更改 的元素属性<div id = "amazingslider-1">：我尝试将不透明度更改为 1，尝试将位置更改为绝对位置，并尝试使用该clear: both;技术。但是，所有这些都不起作用。

这是我的 HTML

<div class="bl-content">
    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-1" style="display:block;position:relative;margin:16px auto 56px;">
        <ul class="amazingslider-slides" style="display:none;">
            <li><img src="image/1.JPG" />Haha</li>
            <li><img src="image/2.JPG" /></li>
            <li><img src="image/3.JPG" /></li>
            <li><img src="image/4.JPG" /></li>
            <li><img src="image/5.JPG" /></li>
        </ul>
        <ul class="amazingslider-thumbnails" style="display:none;">
            <li><img src="image/1-tn.JPG" /></li>
            <li><img src="image/2-tn.JPG" /></li>
            <li><img src="image/3-tn.JPG" /></li>
            <li><img src="image/4-tn.JPG" /></li>
            <li><img src="image/5-tn.JPG" /></li>
        </ul>
    </div>
    <h2>Silot Bay</h2>
    <p>Some Text</p> 
</div>

这是CSS

.bl-content, 
div.bl-panel-items > div > div {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 60px;
    left: 30px;
    right: 30px;
    bottom: 30px;
    padding: 0 20px;
    overflow: hidden;
    overflow-y: auto;
}

/* Custom content */

.bl-content p {
    margin: 0 auto;
    padding-bottom: 15px;
    font-size: 1.7em;
    line-height: 1.8;
}

.bl-content h2 {
    font-size: 3em;
    font-weight: 300;
    margin: 0 0 20px 0;
}

.bl-content article {
    padding: 20px 40px 20px 0px;
}

.bl-content article h3 {
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    padding-top: 20px;
    font-size: 1.4em;
}

.bl-content article a {
    color: rgba(0,0,0,0.2);
}

.bl-content > ul {
    list-style: none;
    padding: 0;
    margin: 0;
} 

.bl-content > ul li {
    display: inline-block;
    width: 20%;
    margin: 1%;
}

.bl-content > ul li a {
    display: block;
    padding: 0;
    border: 8px solid rgba(0,0,0,0.1);
}

.bl-content > ul li a img {
    display: block;
    max-width: 100%;
}
4

0 回答 0