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

【问题标题】：How do i append slide to particular div element?如何将幻灯片附加到特定的 div 元素？
【发布时间】：2015-05-26 03:30:31
【问题描述】：

我想将幻灯片附加到特定的 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>

我该怎么做？我为此浪费了几个小时。

【问题讨论】：

上传你的尝试。
您能否发布指向您所指文档的链接？
当然，这是idangero.us/swiper

标签： jquery slide swiper

【解决方案1】：

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

1) 通过 onClick 事件，获取被点击的 div 元素的 id 以及它的 swiper 列和行值。

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) 然后，根据您的 swiper 列获取值，将边距添加到下一个 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()。

【讨论】：