Как добавить слайд к определенному элементу 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 идентификатора и через этот идентификатор, я получаю значение столбца. Затем я добавляю свой слайд после последнего элемента, который имеет это значение столбца.

Мой Append слайд, как это:

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

Как мне это сделать? Я потерял часы для этого.

Answer 1

я решил мою проблему, выполните описанные ниже действия,

1) Via OnClick события, получить идентификатор сНа элемента, который один клик, а также получить его Swiper столбцов и строки значений.

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

2) Получить & изменение ширины Swiper-обертки DIV, ширина основана на вашей ширине Append Див. Здесь моя ширина 420 пикселей.

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().