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

我想追加幻灯片到特定的div元素，该幻灯片的宽度和高度不像普通幻灯片。我遵循他们在文档中指导的步骤。但是，我无法设置宽度和高度不像其他幻灯片。我的代码，如何将幻灯片添加到特定的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>

我如何做到这一点？我为此失去了几个小时。

来源

2015-05-26 aark

上传什么是你的尝试。 –

你可以发布链接到你指的文档吗？ – Avinash

当然，这是http://www.idangero.us/swiper/ – aark

我解决我的问题，下面的步骤，

1）通过onClick事件，让这一个点击，还可以得到它的刷卡行和列值的div元素的ID。

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

2）获取&变化刷卡的方式包装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（）。

来源

2015-06-05 11:20:26 aark

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

回答

相关问题