1

矢印をクリックして左右にアイテムをスライドさせるjQuery関数を取得しようとしています。TinyCarousel.js という jQuery スクリプトを使用しています。正常に機能している間、最後の li 項目が最初の位置に来るまで右にスクロールし続けます。私が現在持っているものは、メイン スライダーの下の「現在テスト中またはリリース中のゲーム」セクションで確認できます。右端までスクロールすると、問題に気付くでしょう。

どちらでも可能ですか...

1) jQuery を変更して、最後の li アイテムがウィンドウの右側に完全に表示されたら停止しますか? これは、ウィンドウ サイズに部分的なアイテムが表示されている場合に備えて、ブラウザー ウィンドウのサイズに相対的である必要があること、および 1 つの部分的な動きを行う必要があることを私は知っています。また、PHP内で実行できるliアイテムの量を知る必要があることも知っています。

2) または 2 つ目は、li を継続的に追加して、スライダーが終了しないようにすることです。何度も繰り返して続けるだけですか？li アイテムを継続的に追加し、画面外にある場合は削除する必要があると思います。

問題を示すためにjFiddleを作成しようとしました。しかし、それは私が必要とするものに近いjFiddleで一緒に何か違うことをしています。途中で動きが止まったようです。ただし、完全に表示するために最後の li 全体が必要というわけではありません。停止するライブサイトとは何が違うのですか?

どんな助けでも大歓迎です。検索してこれを見つけましたが、この状況では機能しないようです。よろしくお願いします。

私はjQuery 1.10.2、php 5.4、TinyCarousel.jsバージョン1.9を使用しています

これが私が現在持っているものです。CSS

.PrevArrow {
    width: 5%;
    float: left;
    margin-top: 20px;
}
.NextArrow {
    width: 5%;
    float: right;
    margin-top: 20px;
}
.ListImage img {
    margin-top: 5px;
    margin-bottom: 10px;
}
#slider-code .viewport {
    float: left;
    width:90%;
    height: 95px;
    overflow: hidden;
    position: relative;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}
#slider-code .buttons {
    display: block;
    margin: 0px 10px 0 10px;
    float: left;
}
#TickHead {
    margin-top: 3px;
}
#slider-code .prev {
    margin: 0 10px 0 10px;
}
#slider-code .next {
    margin: 0 10px 0 10px;
}
#slider-code .disable {
    visibility: hidden;
}
#slider-code .overview {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.TestingTickerText {
    vertical-align: top;
    color: #666666;
    font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 10px;
}
#slider-code .overview li {
    float: left;
    margin: 0 20px 0 0;
    padding: 1px;
    height: 65px;
    width: 105px;
    left: 0;
}
#slider-code .pager {
    overflow:hidden;
    list-style: none;
    clear: both;
    margin: 0 0 0 45px;
}
#slider-code .pager li {
    float: left;
}
#slider-code .pagenum {
    text-decoration: none;
    text-align: center;
    padding: 5px;
    color: #555555;
    font-size: 14px;
    font-weight: bold;
    display: block;
}
#slider-code .active {
    color: #fff;
}

php

<div id="slider-code">
    <div class="PrevArrow">
        <a href="#" class="prev"><img src="Link to Left Arrow"/></a>
    </div>
    <div class="viewport">
        <ul class="overview">
             <li>Item 1</li>
             <li>Item 2</li>
             <li>Item 3</li>
             etc...
        </ul>
    </div>
    <div class="NextArrow">
        <a href="#" class="next"><img src="Link to Right Arrow"/></a>
    </div>';
<center>
        <span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span>
    </center>
</div>

jQuery

(function ($) {
    $(document).ready(function(){               
        $('#slider-code').tinycarousel({ display: 1});
    });
}(jQuery));
4

1 に答える 1