Na Man Te uh Slider Tawh Na pei Sah Nuom Uh Leh Blogger (FlexSlider)

 Blogger (FlexSlider)

Blogger Zang ULeh Nau Lawm Leh Pai Te aa ding aa 

Tammi Kang Khan Tha kia hia..
Blogger Tung a Slider Tawh Na Lim Te Uh Na Pei Sah Nuom Uh Leh..

Hei bang ci na thei nuom uh leh a nei a DEMO 1.2 Ah na en un..

Tamna DEMO pan en theih

• DEMO1
• DEMO2

A Bawl ding dan Pen>>

1. Blogger Dashboard Pan> Layout > Add a Gadget ah lut ding
2. A Ban ah> HTML/Javascript
3. A Nei a Code Teng Copy Tawh La ding in  paste Tawh Koih ding Hi>> 

Tam Na Code Te Zangh uN,

<style type="text/css">
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/


/* Browser Resets */

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
    outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* FlexSlider Necessary Styles
*********************************/

.flexslider {
    margin: 0;
    padding: 0;
}

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {
    width: 100%;
    display: block;
}

.flex-pauseplay span {
    text-transform: capitalize;
}


/* Clearfix for the .slides element */

.flexslider a.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.1);
    font-size: 14px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}

.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .slides {
    display: block;
}

* html .slides {
    height: 1%;
}


/* No JavaScript Fallback */


/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */

.no-js .slides > li:first-child {
    display: block;
}


/* FlexSlider Default Theme
*********************************/

.flexslider {
    margin: 0 0 60px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    zoom: 1;
}

.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.loading .flex-viewport {
    max-height: 300px;
}

.flexslider .slides {
    zoom: 1;
}

.carousel li {
    margin-right: 5px;
}


/* Direction Nav */

.flexslider li {
    border: 0 none !important;
    padding: 0 !important;
    text-indent: 0 !important;
}

.flex-direction-nav a {
    width: 30px;
    height: 30px;
    margin: -20px 0 0;
    display: block;
    background: url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    cursor: pointer;
    text-indent: -9999px;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.flex-direction-nav .flex-next {
    background-position: 100% 0;
    right: -36px;
}

.flex-direction-nav .flex-prev {
    left: -36px;
}

.flexslider:hover .flex-next {
    opacity: 0.8;
    right: 5px;
}

 .flexslider:hover .flex-prev {

 opacity: 0.8;
    left: 5px;
}

.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
    opacity: 1;
}

.flex-direction-nav .disabled {
    opacity: .3!important;
    filter: alpha(opacity=30);
    cursor: default;
}


/* Control Nav */

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}

.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.flex-control-paging li a:hover {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    cursor: default;
}

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

.flex-control-thumbs img {
    width: 100%;
    display: block;
    opacity: .7;
    cursor: pointer;
}

.flex-control-thumbs img:hover {
    opacity: 1;
}

.flex-control-thumbs .active {
    opacity: 1;
    cursor: default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 210,
            itemMargin: 0,
            minItems: 1,
            maxItems: 4
        });
    });
});
</script>
<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
        </li>
    </ul>
</div>

Theih Siam Ding Khat ah

http://project.dimpost.com/flexslider-carousel/images/slide1.jpg

Lai Teng Red Colour Ah Na koih Nuom Lim Code Te Koih Pih Ding Hi..

www.vangngaino.blogspot.com