Raxus Slider 2.0.4

Usage & Documentation

Installation When starting using Raxus Slider, you should add this lines in your <head> tag. First, we puts jQuery file url (if you have one, then you don't need second one). Secondly, we put Raxus Slider .css & .js files urls like that.
            <!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- jQuery #end -->

<!-- for Raxus Slider -->
<link rel="stylesheet" href="css/raxus.css"> <!-- (13KB) -->

<script type="text/javascript" src="js/raxus-slider.min.js"></script> <!-- .min (9kb) (You can use 'raxus-slider.js' [15KB]) -->
<!-- for Raxus Slider #end -->
        
Usage For use Raxus Slider on your page, you should paste that codes where you want to see Raxus Slider and define your slider id to div of .raxus-slider like yourID. And your images should come into
<li class="slide"></li>. That li's determines your images line. Ok, let's set some styles.
            <div id="yourID" class="raxus-slider">

    <ul class="slider-relative">

        <li class="slide">
            <img src="img/content/1.jpg" alt="" /> <!-- your image -->
        </li>

        ...

        <li class="slide">
            <img src="img/content/12.jpg" alt="" /> <!-- your image -->
        </li>

    </ul>

</div>
        
Styles You can set your Raxus Slider's width, height value whatever you want from a few .css lines. Also you can change thumbnails width, height value with same way. Let's see our example.
            #yourID {
    width: 100%;
    height: 550px;
}
#yourID .mini-images li {
    width: 70px;
    height: 70px;
}
        
Options & Features Slider Options
All Raxus Slider features uses data attributes. All data attributes are optional. If you don't want use them or if you erase them data attributes, they uses their default settings. Let's see that features how to use.
            <div id="yourID" // your Id 

     class="raxus-slider" 
     // Raxus Slider classname — don't delete

     data-direction="vertical" 
     // Slide direction — Default: 'horizontal'

     data-arrows="show" 
     // Arrows show — Default: 'hide' — Other options: 'auto-hide'

     data-autoplay="10000" 
     // Slider auto-play — Default: 'false' — Other options: All Number

     data-fullscreen="show" 
     // Slider fullscrenn button — Default: 'hide'

     data-thumbnail="bottom" 
     // Thumbnail positions — Default: 'off' — Other options: 'left', 'right', 'top'

     data-keypress="true" 
     // Slider keyboard control — Default: 'false'

     data-dots="show">
     // Slider dots — Default: 'hide' 

     data-loop="false">
     // Slider looping — Default: 'true'

     data-bgcolor="#000000">
     // Slide area background color — Default: '#111111' — Other options: Unlimited colors and 'transparent'

     data-thumbbgcolor="#ffffff">
     // Slider thumbnail area background color — Default: '#222222' — Other options: Unlimited colors and 'transparent' 
            
     ...

</div>
        
Video Option
You can put video to easily in your slide area from Youtube and Vimeo. Just paste video url like 'http://www.youtube.com/watch?v=WzV6mXIOVl4' or 'http://vimeo.com/84216271'.
            <li class="slide">
    <img src="#yourimgurl" data-videourl="http://www.youtube.com/watch?v=WzV6mXIOVl4" />
</li>
        
Custom Thumbnail Option
If your slider's data-thumbnail attribute option is open ('left', 'right', 'top', 'bottom') then Raxus Slider set thumbnails image content automatically. But if you want use different images in thumbnails area, then you can define custom url for each image. You can do that in this way.
            <li class="slide">
    <img src="#yourimgurl" data-thumbnailurl="#yourdifferentimageurl" />
</li>
        
Captions
You can put animated captions each slide. You should put two divs in <li class="slide"></li> for this. And you can add link that caption.
            <li class="slide">
    <img src="img/content/1.jpg" alt="" />
    <a href="#link"> // if you don't want, just delete it
        <span class="text">
            <strong>Breaking Bad</strong>
            <small>American crime drama television series created and produced by Vince Gilligan.</small>
        </span>
    </a>
</li>
        
Caption Animations
Captions are animated div. And you can select animation direction which you want. There is 4 direction class-name; .ani-left, .ani-top, .ani-right, .ani-bottom. If you don't write any direction class-name then default animation direction sets as .ani-left.
            <li class="slide">
    <img src="img/content/1.jpg" alt="" />
    <a href="#link"> // if you don't want, just delete it
        <span class="text ani-top">
            <strong>Breaking Bad</strong>
            <small>American crime drama television series created and produced by Vince Gilligan.</small>
        </span>
    </a>
</li>
        
Custom Image Ratios
Image ratio is important issue. Raxus Slider have 3 model for this. 'fix-width', 'fix-height', 'fit'. And you can use them to all images in the slider or you can use for single slide area. But there is no special ratio for your images, no need to add any class your slider. Raxus Slider locates your image to right area. And you can see ratio classnames and their views at the bottom.
            <div id="yourID" class="raxus-slider fix-height"> // It sets all image ratios in the slider
    <ul class="slider-relative">

        <li class="slide fix-width"> // it sets only this image ratio ratio
            <img src="img/content/1.jpg" alt="" /> <!-- your image -->
        </li>

    </ul>
</div>
        

Changelog

v2.0.4 v2.0.3 v2.0.2 v2.0.1 v2.0 v1.4 v1.3 v1.2 v1.1 v1.0

You Like It?