如何將幻燈片添加到特定的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元素？

回答

相關問題