1. 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?

Discussion in 'XenForo Development Discussions' started by Crazy-Achmet, Feb 6, 2012.

  1. Crazy-Achmet

    Crazy-Achmet Active Member

    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:

    HTML:
                        <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
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    Code:
    <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:

    Screen shot 2012-02-08 at 3.18.24 AM.png
     
    Crazy-Achmet likes this.

Share This Page