0

Unslider プラグインを使用して Web サイトでスライドショーを行うと、スライドが動きます。しかし、速度、ドット、遅延、完全などのオプションを追加すると、機能しません。スライドは順調に進んでいますが、私が JS で行った変更は何もしません。

<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script>

$(function() {
    $('.banner').unslider({
    speed: 500,               
    delay: 3000,              
    complete: function() {},  
    keys: true,               
    dots: true,               
    fluid: false              
    });
});
</script>
</head>
<body background="background.jpg">
<div id="innhold"> 
        <div class="banner">
        <ul>
            <li><img src="mallorca.png" alt="mallorca"></li>
            <li><img src="rhodos.png" alt="rhodos"></li>
            <li><img src="portimao.png" alt="portimao"></li>
        </ul>
        </div>
</div>

そして、ここに私のCSSがあります

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
4

1 に答える 1

1

オプションは機能しています！オプションが機能していることを確認するための正しい CSS がなかっただけです。私はあなたのためにそれをモックアップしました: http://jsfiddle.net/3zt5k/そして、あなたがいじることができるドット (数字) のためのいくつかの css を追加しました。

    .dots li {
  position: relative;
    bottom: 50px;
    left: 215px;
    display: inline;
    margin: 5px;
 }
.dots .active {
    color:#fff
}
  • 速度と遅延時間を変更できます。(5000 = 5 秒)
  • キーボードの矢印キーを使用して、写真を変更します。
  • 現在の画像ではドットが表示され、番号は白です。
  • 流体機能が何をするのかよくわからない! しかし、私はあなたがそうしていると思います、ごめんなさい。

また、 http: //unslider.com/unslider.min.jsファイルは、jsfiddle の左側にある外部リソースにあります。

あなたの解決策はずっとあなたから隠れていました:)

于 2013-11-06T15:09:12.363 に答える