JSSOR slider: Remove inline style from html

I am trying to remove the inline style from the thumbnail navigator skin but am not sure how to treat this bit of html.

    <!-- What is "div u=" please?
    Is "u" a class here?
    How does that translate to a CSS selektor? -->
<div u="slides" style="cursor: move;">


<!-- Here I can simply write ".p" as a CSS selektor?
    How does the CSS selektor then know it 
    has to do with "u=prototype"? -->
    <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">


        <!-- Here I can simply write ".i" as a CSS selektor?
        How does the CSS selektor then know it 
        has to do with "u=thumbnailtemplate"? -->
        <div u="thumbnailtemplate" class="i" style="position:absolute;"></div>
        <div class="o">
        </div>
    </div>
</div>

So far I have never come across div u= in general or div u=slides, prototype, thumbnailtemplate, etc.

For better understanding, can one simply assign letters to divs and then assign those letters functions with jQuery? Where in your code is slides, prototype, thumbnailtemplate referenced? I would like to learn about this technique please. Can you provide a link or reference to this please?

Thank you for any help.

By the way, I have looked at a ton of sliders and finally choose this one. I am just about to start development with it and Bootstrap 3.3.2, I hope it will all work out.

Very NICE work from what I can see on the demos. They ALL work on my smartphone out of the pocket, something most of the other sliders did not manage. Well done!

If you don't mind me saying this, the only thing I would change is provide a folder "CSS" with only the CSS rules for the arrow-, bullet- and thumbnail- navigators, including the inline styles of the span, div=u and generally all elements that have inline styles.

Apart from that solid work. Thank you!

Solution

What is "div u=" please?

Re: There are so many elements in the slider, the 'u' attribute is customize attribute, jssor js library read 'u' attribute to identify the usage of an element.

Is "u" a class here? How does that translate to a CSS selektor?

Re: 'u' is not a class. You can try $("div[u=slides]") to select the element in javascript. And you can add your own class as follows,

<div u="slides" class="yourclassname">

Here I can simply write ".p" as a CSS selektor?

Re: yes, you can. please use the following format to prevent conflicts from other sliders in the same page,

.jssort07 .p {
    /* css */
}
.jssort07 .pav {
    /* css when active */
}
.jssort07 .pdn {
    /* css when mouse down */
}
.jssort07 .p:hover {
    /* css when mouse over */
}

How does the CSS selektor then know it has to do with "u=prototype"?

Re: No need to think about it. The 'u=prototype' lets jssor js know it is the prototype element of thumbnails.

Here I can simply write ".i" as a CSS selektor?

Re: Yes you can. But please use the following format to avoid conflicts.

.jssort07 .p .i {
    /* css */
}
.jssort07 .pav .i {
    /* css when active */
}
.jssort07 .pdn .i {
    /* css when mouse down */
}
.jssort07 .p:hover .i {
    /* css when mouse over */
}

How does the CSS selektor then know it has to do with "u=thumbnailtemplate"?

Re: Please ignore it.