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

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，并获取其滑动条的列值和行值。

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) 最后，将您的 div 附加到滑动器列的最后一个滑动器行之后，哪一个更早点击。

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

注意：如果在添加新幻灯片后刷入有任何问题，请确保添加 swiper.init()。

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

How do i append slide to particular div element?

jquery

slide

swiper