• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How to use slider.js?


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