jQuery Carousel Slider untuk Blogger (FlexSlider) Responsive

Ini adalah responsif jQuery korsel slider. slider ini menakjubkan dikembangkan oleh flexslider.woothemes.com. Ini memiliki beberapa fitur yang sangat keren yang membuat Anda seperti itu. Fitur yang paling keren itu sepenuhnya responsif; Anda tidak perlu tegang tentang slider lebar / tinggi bahkan semua gambar lebar dan tinggi yang otomatis disesuaikan.

Dan juga Anda dapat mengatur minimum / maksimum jumlah gambar yang akan tampil di acara berbagai ukuran layar / browser. Jadi secara keseluruhan itu cukup korsel slider yang indah. Di sini adalah khusus untuk blogger / blogspot sehingga Anda hanya dapat menyalin dan menyisipkan kode untuk diinstal pada blog blogger Anda. Check out live demo dengan mengklik link di bawah.

DEMO

Mari Pasang jQuery Carousel Slider untuk Blogger Blog Anda

Pergi ke Blogger Dashboard> Tata Letak> Tambah Gadget
Pilih HTML / Javascript
Salin kode di bawah ini dan paste di atasnya.

<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3d2t2Vg7Njl5HQuwp_SXG_A4vl0-BNVcHKIo_3ixpXUi6kIfOc4kEpUXtMy5TCfgvmq0Oo_28OJRuWL_99RLGtfoVv_qHXXU4ny_hoi1vnxPoPbSshtQEFb-Eyldks7to3oyirQ86oIgj/s320/slide3.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZBCVDo2fBs6LJ5O-9p7mgqI151pp0HhkTFGgELDzXd4BeUpFqDdsZ9ihxPwkBMuWOqd_EPna75o71KTEGQst6MVI19GPrG5McncSxCvqlmoudhRr3r6VSehDt8fEqlB1Nmp0Rg-Os_z30/s320/slide4.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZBCVDo2fBs6LJ5O-9p7mgqI151pp0HhkTFGgELDzXd4BeUpFqDdsZ9ihxPwkBMuWOqd_EPna75o71KTEGQst6MVI19GPrG5McncSxCvqlmoudhRr3r6VSehDt8fEqlB1Nmp0Rg-Os_z30/s320/slide4.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3izBDXGudkgKlpdRdpFXEymDr2ZJXkbxAF8SqY8LbHPOCokA_LLDlSEjPvfywLxgLcyesm1pOASPQcmRhI0T9CVTnSGFstpGLDsMeuVbX45fiWFcZHIxfViyaxKzuxPOPiLaZkLj0_Xz0/s320/slide1.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYkbwNQnc5YXBCi_y-AVy7hyphenhyphenePTjCYroYKYYFACZQOwTnbQlXZZjfuRuAdn0QhR1bhi-aY6cCk491ZYMl6yLjsW5VkgPsflv_CgDSIrGCTvnNEBgJP9rWiPhIVwwgo7F6oteXH46W8cPPj/s320/slide2.jpg" />
        </li>
        <li>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3d2t2Vg7Njl5HQuwp_SXG_A4vl0-BNVcHKIo_3ixpXUi6kIfOc4kEpUXtMy5TCfgvmq0Oo_28OJRuWL_99RLGtfoVv_qHXXU4ny_hoi1vnxPoPbSshtQEFb-Eyldks7to3oyirQ86oIgj/s320/slide3.jpg" />
        </li>
    </ul>
</div>

4. Menyimpan, dan kita sudah selesai.

CATATAN:

Lupakan lebar dan tinggi itu akan menyesuaikan otomatis.
Mengganti URL gambar berwarna dengan URL gambar yang diunggah Anda sendiri (Anda dapat meng-upload gambar di blogspot, flickr dll)
Ada beberapa hal lain yang dapat mengubah, lihat di bawah. Saya kira saya tidak perlu menjelaskan bahwa karena mereka diberi nama seperti karena mereka.

    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4

jQuery Carousel Slider untuk Blogger (FlexSlider) Responsive

2 Responses to "jQuery Carousel Slider untuk Blogger (FlexSlider) Responsive"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel