0

Slick carousel jQuery プラグインを使用しています。ドキュメントにはオプションがありますappendArrows。私が理解しているように、矢印を別の要素にくっつけるために使用できます。各スライドにタイトル、リンク、説明、および写真であるいくつかのサブスライドがあるように、ネストされたカルーセルを使用します。デフォルト設定では、ナビゲーション矢印はスライド全体の中央に配置されます。写真だけに追加したいのですが、やり方がわかりません。appendArrows: $('img’)動作しません。

マークアップは次のとおりです。

<div class="slider-for">

            <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example.com</a>
                <p>Description.</p>
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
            </div>

            <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example.com</a>
                <p>Description.</p>
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
            </div>

    <div class="single-item">
                <h4>Title</h4>
                <a href=“#” target="_blank">example.com</a>
                <p>Description.</p>
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
                <img class="img-responsive" src="http://placehold.it/960x540">
            </div>

</div>

そしてJS：

$('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        swipe: false,
        accessibility: false,
        arrows: false,
    });

 $('.single-item').slick({
        slide: 'img',
        dots: true,
        speed: 500,
        arrows: true,
        appendArrows: $('img'),
    });`

編集：質問が明確ではなかったと思います、悪いです。は、例から省略した.slider-forによって切り替えられます。.slider-navそれはすべて機能します。私の問題は美学の問題です。矢印が全体に追加されると、.single-itemそれらは全体の高さに対して垂直方向に中央に配置されますが、実際にはその中の s<div class="single-item">のみがスライドしているため、奇妙に見えます。に矢印を追加して、画像の高さに対して垂直方向に中央に配置される<img>ようにしたいと思います。<img>それがより理にかなっていることを願っています。

私が本当に求めているのは次のようなことだと思います: どうすれば<img>の内部<div class="single-item">を でターゲットにできappendArrows()ますか? ドキュメントの状態：

オプション: appendArrows; タイプ: 文字列; デフォルト: $(要素); 説明: ナビゲーション矢印を付ける場所を変更する (セレクター、htmlString、配列、要素、jQuery オブジェクト)

どうすればそれを使用できますか？私はまったくの初心者であり、JS についてあまり知らないので、明らかな何かが欠けている可能性があることを覚えておいてください。

4

2 に答える 2

0

わかった。ばかげた間違いでした。を下に移動し<div class="single-item">て、 のみをラップし<img>、全体を別の でラップしましたdiv。このような：

    <div>
            <h4>Title</h4>
            <a href=“#” target="_blank">example.com</a>
            <p>Description.</p>
        <div  class="single-item">
            <img class="img-responsive" src="http://placehold.it/960x540">
            <img class="img-responsive" src="http://placehold.it/960x540">
            <img class="img-responsive" src="http://placehold.it/960x540">
            <img class="img-responsive" src="http://placehold.it/960x540">
            <img class="img-responsive" src="http://placehold.it/960x540">
        </div>
    </div>
于 2014-10-22T12:44:56.840 に答える
0

次の CSS を追加することを検討してください。

.slick-prev
{
    position: absolute;
    left: 0px;
}
.slick-next
{
    position: absolute;
    right: 50px;
}

以下を反映するように JS を修正します。

$('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        swipe: false,
        accessibility: false,
        arrows: true
    });
    $('.single-item').slick({
        slide: 'img',
        dots: true,
        speed: 500,
        arrows: false
    });

上記で目的の出力が生成される場合は、.slick-nextのrightプロパティを調整して、次の矢印の位置を微調整できます

于 2014-10-21T21:26:55.483 に答える