be-fe / be-fe/iSlider

data 为 HTMLElement 时的问题

Open
#421 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.6k
Forks
441
PR merge metrics
No merged PRs in 30d

Description

我采用如下方式填充 content,节点 iSlider-page* 对应的 html 内容在页面里

```JavaScript
var data = [
{'content': document.getElementById('iSlider-page1')},
{'content': document.getElementById('iSlider-page2')},
{'content': document.getElementById('iSlider-page3')},
];
```

浏览器预览的时候,发现**第3页的内容会在第1页叠加显示**,第3页之后再加的其它页面,也会叠加;
滑动到第二页(只要往后面滑动一次),再返回第一页查看,发现已经正常了。

请问 @all,这是不是 bug ?

我目前的解决方案是:

```JavaScript
// 1. iSlider-page3 及以后的每一页,追加 style="display: none"
// 2. iSider 初始化的时候追加 onSlideChange,动态的显示对应的 dom,如下
onSlideChange: function(num, dom) {
var iCurrPage = num + 1;
var oCurrPageDom = document.getElementById('iSlider-page' + iCurrPage);
if (oCurrPageDom) {
oCurrPageDom.style.display = 'block';
}
},
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the issue with HTMLElement values in the data array and inspect the slider's initialization and page-rendering entry points. Done means page 3 and later pages do not overlap page 1 on initial load, while navigation still displays each page correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.