I am working on a small dasbhoard to display custom charts using the Highcharts.js library and DotNet Highcharts. I've written most everything in C# using an MVC framework with very little done on the View/HTML side besides having divs to output the charts. Everything works fine when not using the Jssor slider, it just displays all charts stacked on the page. After loading the Jssor library and using the custom values needed for the divs, I get a blank slider placeholder and nothing output to the screen. I tried with and without jQuery, but both rendered the same results.
It appears that the Jssor library is creating duplicate divs of my content divs and updating the second set, which contain nothing more than a duplicate class name and empty content.
For example, the main div section of my content is as follows:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
<div>@ViewBag.thisWeekReport</div>
<div>@ViewBag.lastWeekreport</div>
<div>@ViewBag.projectStatusSummary</div>
<div>@ViewBag.childEntityCounts</div>
</div>
</div>
What I end up with in the DOM is 8 divs with 2 of each report class. The second set only contains the output script reference, while the first contains the full set of HTML that actually displays the chart. The Jssor script is actively changing the properties of the second set of divs, but ignoring the first.
Has anyone run into this issue while using Jssor in an MVC environment?
The 'slides' container was duplicated in old version of jssor slider, it leads duplicate slide elements.
This bug has been fixed a few days ago.