jQuery CardSlider Plugin

• latest update: 07/15/2015
• by: hkeyjun
• website: http://codecanyon.net/user/hkeyjun/portfolio
• email: hkeyjun@gmail.com

1. Include jQuery and CardSlider files

To use CardSlider, you’ll need to include both jQuery  and CardSlider file to your page.

<!-- CardSlider stylesheet  -->
<link rel="stylesheet" href="/cardslider/cardslider.css"/>

<!-- jQuery library NOTE: do not need it,if your page already use jQuery  -->
<script src="/cardslider/jquery-1.11.3.min.js"></script>

<!-- CardSlider script file -->
<script src="/cardslider/jquery.cardslider.min.js"></script>

2. Set up the markup

<div id="demoslider" class="cardslider">

    <!-- first slide -->
    <div class="cs-slide">
         <div class="cs-description">
                 <h2 class="cs-desc-title">Item Title</h2>
                 <div class="cs-desc-content">
                         <!-- item description contents goes here -->
                 </div>
        </div>
        <div class="cs-media">
            <a href="#" class="cs-media-item"><img src="images/1.jpg" alt=""/></a>
            <a href="#" class="cs-media-item"><img src="images/2.jpg" alt=""/></a>
        </div>
    </div>

    <!-- second slide -->
    <div class="cs-slide">
        <!-- ... -->
    </div> 
    
    <!-- ...other slides -->
</div>

3.Configuring slides

You can configure slide effect by entering them in tow attributes called data-effect-in and data-effect-out on the slide element. There are six directions/effects that can be configured : "left" , "right" , "top", "bottom", "up", "down".

If the data-effect-in or data-effect-out attribute not be configured, CardSlider will randomly choose an effect at run time.

<div id="demoslider" class="cardslider">

    <!-- first slide -->
    <div class="cs-slide" data-effect-in="left" data-effect-out="right">
        <!-- ... -->
    </div>

</div>

You can also configure the images's layout in row or column. By default , the image under .cs-media will be laid out in a column. You can lay out tow images in a row , by add class "tow-in-row"  to .cs-media element like bellow:

<div id="demoslider" class="cardslider">
    <div class="cs-slide">
         <div class="cs-description">
                 <h2 class="cs-desc-title">Item Title</h2>
                 <div class="cs-desc-content">
                         <!-- item description contents goes here -->
                 </div>
        </div>
        <div class="cs-media tow-in-row">
            <a href="#" class="cs-media-item"><img src="images/1.jpg" alt=""/></a>
            <a href="#" class="cs-media-item"><img src="images/2.jpg" alt=""/></a>
        </div>
    </div>
    <!-- ...other slides -->
</div>

By default the skin of CardSlider is a "dark-background" skin , if you want use CardSlider with light background you can add class "lightskin" to the main CardSlider element.

<div id="demoslider" class="cardslider lightskin">
    <!-- ... -->
</div>

And i had also prepared a css class: "alternative-3d-style" , add it to the main CardSlider element will make the images titled in another direction.

<div id="demoslider" class="cardslider alternative-3d-style">
    <!-- ... -->
</div>

4.Initialize the plugin

Now you can initialize CardSlider  like bellow.

<script type="text/javascript">
    $(document).ready(function(){
        $('#demoslider').cardSlider();
    });
</script>

You can customize CardSlider options like bellow:

<script type="text/javascript">
    $(document).ready(function(){
        $('#demoslider').cardSlider({
            autoPlay:true,
            pauseOnHover:true,
            interval:4000
            // ...
        });
    });
</script>

Here is a list of available slider options.

The prev() and next() methods can be used to control sliders externally

//Init plugin
$('#demoslider2').cardSlider();

//Get CardSlider instance
var cardSliderObj = $('#demoslider2').data('cardSlider');

//Go to previous slide
cardSliderObj.prev();

//Go to next slide
cardSliderObj.next();

1. Change the height of the slider.

By default the height of CardSlider is setted to 600px. You can change it by add inline-style to the slider element like bellow:

<div id="demoslider" class="cardslider" style="height:800px">
    <!-- ... -->
</div>

Or configure it in you custom css file

#demoslider{
    height:800px;
}

You can also change it by modify cardslider.css

2. Set height of CardSlider according to screen size.

You can set the height of CardSlider use css media query, so it can have different heights according to screen size.

Like bellow:

/* Default height for screen under 768px*/
#demoslider{
    height:400px;
}
/* 768px and up */
@media (min-width: 768px) {
    #demoslider{
        height:500px;
    }
}

/* 992px and up */
@media (min-width: 992px) {
    #demoslider{
        height:600px;
    }
}

/* 1200px and up */
@media (min-width: 1200px) {
    #demoslider{
        height:700px;
    }
}

Please contact me, if you have any problem on using CardSlider. Here is my email : hkeyjun@gmail.com