How to use slider.js?


Well-known member

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">
First chapter                               
Lorem ipsum....
Second chapter                               
This is just a test
Third chapter                               
Foo Bar
                        <a class="next" href="#">next</a>
Is there anyone who could explain to me how to use the slider function for this one?

Thanks in advance ;)


Jake Bunce

XenForo moderator
Staff member
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 class="panel">
					<div class="baseHtml noticeContent">two</div>
				<li class="panel">
					<div class="baseHtml noticeContent">three</div>

	<div class="navContainer">
		<span class="navControls Nav JsOnly">
				<a id="n1" href="{$requestPaths.requestUri}#n1" class="current">
					<span class="arrow"><span></span></span>
				<a id="n2" href="{$requestPaths.requestUri}#n2" class="">
					<span class="arrow"><span></span></span>
				<a id="n3" href="{$requestPaths.requestUri}#n3" class="">
					<span class="arrow"><span></span></span>
You can use this in a XenForo template to create the scroller.

The result:

Screen shot 2012-02-08 at 3.18.24 AM.png