Question

我想将幻灯片附加到特定的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事件，我得到了div个ID，通过此ID，我获得了列值。然后我将我的幻灯片追加到具有该列值的最后一个元素之后。

我的追加幻灯片：

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

我是怎么做到的？我为此浪费了几个小时。

Answer 1

我通过以下步骤解决了我的问题，

1）通过onClick事件，获取单击div元素的id，并获取其swiper列和行值。

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

2）获得＆amp;更改swiper-wrapper div的宽度，width取决于你的追加div宽度。我的宽度是420px。

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

3）然后，根据您的swiper column get值，将剩余边距添加到下一个swiper列。

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

4）最后，将你的div添加到swiper列的最后一个swiper行之后，点击之前的那一行。

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

注意：如果在添加新幻灯片后滑动有任何问题，请确保添加swiper.init（）。

如何将幻灯片附加到特定div元素？

1 个答案: