javascript - 指定されたdivの下にJSスライドショーが表示されない

Question

Amazing Sliderを使用して生成したスライドショーのコードを自分の Web サイト (学校のプロジェクト用) に配置していますが<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%;
}