Cara Membuat Responsive Image Slider dengan jQuery dan CSS3

Publish Date : 29-09-2016 , dibaca 12982 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial malam ini kita akan membahas Cara Membuat Slider Baner Responsive dengan Jquery dan CSS, Slider memang identik dengan desain website, memiliki animasi dan pergerakan yang menyenangkan mata, ini tugas dari Web Desaigner, bukan web Programer yang identik sama system dan coding programnya, , Dan kita ketahui perkembangan zaman yang sudah ke era modern sekarang ini dimana website dapat di akses dengan perangkat mobile, hp, android, tablet, smartphone, memberikan perkembangan tersendiri terhadap dunia website, dimana desain dari website harus responsive agar lebih SEO, dan user Friendly

Untuk Source code Slider Responsive dengan Jquery dan Css ini dapat anda download pada artikel ini, Ok... back to point.. langsung saja kita mulai pembahasan membuat slider responsive dengan jquery dan Css

Cara Membuat Responsive Slider :

Simpan beberapa gambar, dalam kasus ini 3 buah gambar, di dalam folder img
Buat folder js , yang digunakan untuk menyimpan file jquery
Download jQuery library dan FlexSlider , dan simpan di dalam folder js , yang sudah kita buat diatas
Buat file index.html ,

Kita buat File Index.HTML untuk menampilkan Gambar nya :

<!DOCTYPE html><html lang="en">
<meta charset="utf-8">
<head>
<title>Membuat Slider Responsive suckittrees.com</title>
</head>
<body>
<div class="flex-container">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <a href="#"><img src="img/slide1.jpg" /></a>
            </li>
            <li>
                <img src="img/slide2.jpg" />
            </li>
            <li>
                <img src="img/slide3.jpg" />
                <p>Designing The Well-Tempered Web</p>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Include kan jQuery library dan FlexSlider plugin.Silahkan download pada link tersebut , dan panggil dengan code dibawah ini , letakkan di atas code tag </body>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script>
    $(document).ready(function () {
        $('.flexslider').flexslider({
            animation: 'fade',
            controlsContainer: '.flexslider'
        });
    });
</script>

Ok.. kita gabungkan, sehingga code nya menjadi :

Index.html

<!DOCTYPE html><html lang="en">
<meta charset="utf-8">
<head>
<title>Membuat Slider Responsive suckittrees.com</title>
</head>
<body>
<div class="flex-container">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <a href="#"><img src="img/slide1.jpg" /></a>
            </li>
            <li>
                <img src="img/slide2.jpg" />
            </li>
            <li>
                <img src="img/slide3.jpg" />
                <p>Designing The Well-Tempered Web</p>
            </li>
        </ul>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script>
    $(document).ready(function () {
        $('.flexslider').flexslider({
            animation: 'fade',
            controlsContainer: '.flexslider'
        });
    });
</script>
</body>
</html>

Langkah selanjutnya kita berikan style berikut ini :

/* 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 a img { outline: none; border: none; }

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

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}

.flexslider .slides img {
    width: 100%;
    display: block;
    max-width:568px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

/* Clearfix for the .slides element */
.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }



/* Theme Styles */
.flexslider {
    position: relative;
    zoom: 1;
    padding: 10px;
    background: #ffffff;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
    box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}

/* Edit it if you want */
.flex-container {
    min-width: 150px;
    max-width: 568px;
}

.flexslider .slides { zoom: 1; }



/* Direction Nav */
.flex-direction-nav a {
    display: block;
    position: absolute;
    margin: -17px 0 0 0;
    width: 35px;
    height: 35px;
    top: 50%;
    cursor: pointer;
    text-indent: -9999px;
    z-index: 9999;

    background-color: #82d344;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
    background-image: -webkit-linear-gradient(top, #82d344, #51af34);
    background-image: -moz-linear-gradient(top, #82d344, #51af34);
    background-image: -o-linear-gradient(top, #82d344, #51af34);
    background-image: linear-gradient(to bottom, #82d344, #51af34);
}

.flex-direction-nav a:before {
    display: block;
    position: absolute;
    content: '';
    width: 9px;
    height: 13px;
    top: 11px;
    left: 11px;
    background: url(../img/arrows.png) no-repeat;
}

.flex-direction-nav a:after {
    display: block;
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 35px;
}

.flex-direction-nav .flex-next {
    right: -5px;

    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.flex-direction-nav .flex-prev {
    left: -5px;

    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

.flex-direction-nav .flex-next:before { background-position: -9px 0; left: 15px; }
.flex-direction-nav .flex-prev:before { background-position: 0 0; }

.flex-direction-nav .flex-next:after {
    right: 0;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #31611e;
}

.flex-direction-nav .flex-prev:after {
    left: 0;
    border-bottom: 5px solid transparent;
    border-right: 5px solid #31611e;
}



/* Control Nav */
.flexslider .flex-control-nav {
    position: absolute;
    width: 100%;
    bottom: -40px;
    text-align: center;
    margin: 0 0 0 -10px;
}

.flex-control-nav li {
    display: inline-block;
    zoom: 1;
}

.flex-control-paging li a {
    display: block;
    cursor: pointer;
    text-indent: -9999px;
    width: 12px;
    height: 12px;
    margin: 0 3px;
    background-color: #b6b6b6 \9;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    -webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
    -moz-box-shadow: inset 0 0 0 2px #b6b6b6;
    box-shadow: inset 0 0 0 2px #b6b6b6;
}

.flex-control-paging li a.flex-active {
    background-color: #82d344;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
    background-image: -webkit-linear-gradient(top, #82d344, #51af34);
    background-image: -moz-linear-gradient(top, #82d344, #51af34);
    background-image: -o-linear-gradient(top, #82d344, #51af34);
    background-image: linear-gradient(to bottom, #82d344, #51af34);

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}



/* Captions */
.flexslider .slides p {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 5px;
    margin: 0;

    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 20px;
    color: white;

    background-color: #222222;
    background: rgba(0,0,0, .9);

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}