How to use slider.js?

[FloV]

Hey,

Kier noticed in this post that it will be easy to use the slider function for own purposes.

I would like to have a DIV container with list elements, where i can scroll through with a left and right button.

Here is how my code looks right now:

                    <div class="gallery-txt">
                        <a class="prev" href="#">prev</a>
                        <ul class="gallery-list">
                            <li>
First chapter                               
Lorem ipsum....
                            </li>
                            <li>
Second chapter                               
This is just a test
                            </li>
                            <li>
Third chapter                               
Foo Bar
                            </li>
                        </ul>
                        <a class="next" href="#">next</a>
                    </div>

Is there anyone who could explain to me how to use the slider function for this one?

Thanks in advance

Florian

 

[Jake Bunce]

Here is the default code for displaying notices in a scroller, but reduced to a hard-coded form:

<xen:require css="panel_scroller.css" />

<div class="PanelScroller" id="Notices" data-vertical="" data-speed="400" data-interval="4000">
	<div class="scrollContainer">
		<div class="PanelContainer">
			<ol class="Panels">
				<li class="panel">
					<div class="baseHtml noticeContent">one</div>
				</li>
				<li class="panel">
					<div class="baseHtml noticeContent">two</div>
				</li>
				<li class="panel">
					<div class="baseHtml noticeContent">three</div>
				</li>
			</ol>
		</div>
	</div>

	<div class="navContainer">
		<span class="navControls Nav JsOnly">
				<a id="n1" href="{$requestPaths.requestUri}#n1" class="current">
					<span class="arrow"><span></span></span>
					1</a>
				<a id="n2" href="{$requestPaths.requestUri}#n2" class="">
					<span class="arrow"><span></span></span>
					2</a>
				<a id="n3" href="{$requestPaths.requestUri}#n3" class="">
					<span class="arrow"><span></span></span>
					3</a>
		</span>
	</div>
</div>

You can use this in a XenForo template to create the scroller.

The result: