0

スライドを特定の div 要素に追加したいのですが、そのスライドの幅と高さは通常のスライドとは異なります。ドキュメントで案内されている手順に従います。しかし、他のスライドと違って幅と高さを設定することはできません。私のコードは、

<div id="id_0" class="swiper-slide" onClick="add(0);">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>


var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
slidesPerColumn: 2,
paginationClickable: true,
spaceBetween: 30
});

そこで、onclickイベントを介してその ID を取得し、divこの ID を介して列の値を取得します。次に、その列の値を持つ最後の要素の後にスライドを追加します。

このような私の追加スライド：

<div class="append-slide" style="width:200px;height:300px;">Slide 10</div>

どうすればいいですか？私はこれで時間を失いました。

4

1 に答える 1

0

以下の手順で問題を解決しました。

1) onClick イベントを介して、クリックした div 要素の ID を取得し、そのスワイパーの列と行の値も取得します。

s_row = $('#' + id).attr('data-swiper-row');
s_col = $('#' + id).attr('data-swiper-column');

2) swiper-wrapper div の幅を取得して変更します。幅は追加の div 幅に基づいています。ここで私の幅は420pxです。

wid = $('.swiper-wrapper').css('width') + 420;
$('.swiper-wrapper').css('width',wid);

3）次に、スワイパー列の取得値に基づいて、次のスワイパー列に左マージンを追加します。

$('div[data-swiper-column=' + (s_col+1) + ']').css('margin-left', '420px');

4) 最後に、swiper 列の最後の swiper 行の後に div を追加します。

$('div[data-swiper-column='+ s_col +'][data-swiper-row=7]').after('<div style="width:420px;height:200px;">Append slide 1</div>');

注: 新しいスライドを追加した後のスワイプで問題が発生した場合は、必ず swiper.init() を追加してください。

于 2015-06-05T11:20:26.930 に答える