<section>
	<h1 class="blue" data-id="#custom/content-slider"> Content Slider</h1>
	
	<div class="help-content">
		<!-- #section:custom/content-slider -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Content sliders are based on Bootstrap modal boxes
			</li>
			
			<li>
				You just need to add <code>.aside</code> class and one of the following values to <code>data-placement</code> attribute of modal element:
				<br />
				<code>top</code>
				<code>bottom</code>
				<code>right</code>
				<code>left</code>
				<br />
				
<pre data-language="html">
 <div class="modal aside" data-placement="top">
   ...
 </div>
</pre>
and call the following function:
<pre data-language="javascript">
 $('.aside').ace_aside();
</pre>
			</li>
			
			<li>
				The following options are also available both as function parameters or data attributes:
				<ul>
					<li><code>placement</code></li>
					<li><code>backdrop</code> if "false" there will be no backdrop,
					if "invisible" backdrop will become invisible, otherwise visible</li>
					<li><code>fixed</code> whether slider should be fixed or not</li>
					<li><code>background</code> whether background should be dark or white</li>
					<li><code>offset</code> whether slider should be below navbar or cover it</li>
					<li><code>body_scroll</code> determines if body scroll is allowed when slider is visible</li>
					<li><code>transition</code> disables or enables CSS3 transition of sliders</li>
					<li><code>scroll_style</code> specifies scrollbar style if it's expected</li>
				</ul>
<pre data-language="html">
 <div class="modal aside" data-placement="top" data-offset="true" data-background="true" data-body-scroll="false">
   ...
 </div>
</pre>
or
<pre data-language="javascript">
 $('.aside').ace_aside({
    placement: 'top',
    offset: true,
    background: true,
    body_scroll: false
 });
</pre>
			</li>
			
			<li>
				Like modals, you can use any button to toggle sliders but
				there is also an integrated(attached) button option you can use
				by inserting after <code>.modal-content</code>:
<pre data-language="html">
<div class="modal-content">
 ...
</div>
<button type="button" data-toggle="modal" data-target="#target-modal" class="aside-trigger btn btn-info btn-app btn-xs ace-settings-btn">
  <i class="ace-icon fa bigger-110 icon-only fa-plus" data-icon2="fa-minus" data-icon1="fa-plus"></i>
</button>
</pre>
			</li>

 		  </ul>
		</div>
		<!-- /section:custom/content-slider -->
	</div>
	
	
</section>