--> Skip to main content
Home Pemrograman Web Cara Membuat Headline News Berjalan Dengan OwlCarousel

Cara Membuat Headline News Berjalan Dengan OwlCarousel


Pernahkan anda melihat sebuah portal berita yang menyajikan headline news dengan animasi berjalan ?. Sebenarnya hal tersebut adalah implementasi dari image slide / image slideshow yang telah ditambah beberapa item, seperti : caption/text, kategori, date/time dsb.

Pada tutorial sebelumnya, kita telah banyak membahas beberapa contoh implementasi dari image slideshow. Untuk membuat imageslideshow sendiri, ada banyak alternatif librari css dan js yang dapat kita gunakan, misal menggunakan : Flexslider, Coinslider, Bootstrap Carousel, WowSlider, Owl Carousel dll.

Silhakan Contoh Tutorial Sebelumnya tentang Image Slideshow :

Dalam tutorial Image Slideshow kali ini, kita akan menjadikan image slideswhow menjadi sebuah Headline News yang dilengkapi dengan Judul dan Kategorinya, disini kita menggunakan librari Owlcarousel.

Berikut ini adalah output yang akan kita buat, seperti ditunjukkan oleh Gambar.1 dibawah ini :


(Gambar.1)


Langkah-langkahnya

1. Create file main.css
File ini bertujuan untuk membentuk area tampilan gambar beserta judul dan kategori seperti yang terlihat pada Gambar.1 :
.section {
    margin-bottom:30px;
}

#main-slider{
    height:450px;
    overflow:hidden;
}

a:focus, 
a:hover {
    text-decoration: none;
    outline: none;
    color: #9c9c9c;
}

.feature-post .post-content {
    /*position:absolute;*/
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    padding:25px 35px;
    z-index:1;
    color:#fff; 
    border-radius: 0 0 3px 3px;
    padding-top:100%;
    
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;

}

.feature-post:hover .post-content { 
    
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.13) 18%, rgba(0,0,0,0.33) 36%, rgba(0,0,0,0.74) 70%, rgba(0,0,0,0.91) 100%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.13) 18%,rgba(0,0,0,0.33) 36%,rgba(0,0,0,0.74) 70%,rgba(0,0,0,0.91) 100%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.13) 18%,rgba(0,0,0,0.33) 36%,rgba(0,0,0,0.74) 70%,rgba(0,0,0,0.91) 100%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

.feature-post .entry-title a, 
.feature-post .entry-title a:hover
{
    color:#fff;
}

.post {
    overflow:hidden;
    border-radius:3px;
    padding-top:30px;
    background-color:#fff;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}


.post.feature-post {
    background-color:inherit;
}

.post .entry-title {
    font-size:18px;
    text-transform:capitalize;
    
}

.catagory {
    position:absolute;
    top:20px;
    right:20px;
    z-index:2;
}

.catagory a{
    color: #fff;
    display: block;
    padding: 3px 12px;
    font-size: 12px;
    text-transform: uppercase;
    background-color:#ed1c24;
}

.feature-post img {
    border-radius:3px;
}

.post img, .post-content, .entry-title {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#main-slider .owl-item, 
#main-slider .feature-post{
    height:450px;
    border-radius:0;
    margin-top:0;
}

#main-slider .feature-post .entry-title{
    font-size:20px;
    line-height:25px;
}

#main-slider .feature-post .post-content{
    border-radius:0;
} 

.post-content i {
    margin-right:5px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.entry-title a {
    color:#000;



2. Create file index.html
Dalam file ini kita akan memanggil librari css dan js. Pada file index.html secara umum kita menggunakan Bootstrap, akan tetapi untuk rancangan tampilan gambar beserta judul dan kategori kita menggunakan css dari main.css.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="ilmu-detil.blogspot.com">
    <title>HeadliNews Dengan OwlCarousel</title>
    <!-- Bagian css -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/ilmudetil.css">
    <link href="assets/css/owl.carousel.css" rel="stylesheet">
    <link href="assets/css/main.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">
            Pusat Ilmu Secara Detil</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="clr1 active"><a href="index.html">Home</a></li>
                <li class="clr2"><a href="">Programming</a></li>
                <li class="clr3"><a href="">English</a></li>
            </ul>
        </div>
    </div>
</nav>
</br></br></br></br>
    
<div class="container" style="margin-top:40px"> 
    <div class="section" id="main-slider">
        <div class="post feature-post" style="background-image:url(images/girl.jpg); background-size:cover;">
            <div class="post-content">
                <div class="catagory"><a href="#">Fashion</a></div>
                <h2 class="entry-title">
                    <a href="">Pertunjukan Fashion Show bertema Tropical Dress</a>
                </h2>
            </div>
        </div>
        <div class="post feature-post " style="background-image:url(images/education.jpg); background-size:cover;">
            <div class="post-content">
                <div class="catagory"><a href="#">Education</a></div>
                <h2 class="entry-title">
                    <a href="">Tips untuk memotivasi semangat belajar anak-anak sejak dini</a>
                </h2>
            </div>
        </div><!--/post-->
        <div class="post feature-post" style="background-image:url(images/music.jpg); background-size:cover;">
            <div class="post-content">
                <div class="catagory"><a href="#">Music</a></div>
                <h2 class="entry-title">
                    <a href="">Pertunjukan Internasional pemain musik biola berlangsung tiga hari </a>
                </h2>
            </div>
        </div><!--/post-->
        <div class="post feature-post" style="background-image:url(images/technology.jpg); background-size:cover;">
            <div class="post-content">
                <div class="catagory"><a href="#">Technology</a></div>
                <h2 class="entry-title">
                    <a href="">Bagaiman memilih Laptop yang sesuai dengan kebutuhan anda</a>
                </h2>
            </div>
        </div><!--/post-->
        <div class="post feature-post" style="background-image:url(images/bussiness.jpg); background-size:cover;">
            
            <div class="post-content">
                <div class="catagory"><a href="#">Bussiness</a></div>
                <h2 class="entry-title">
                    <a href="">Hal-hal yang harus diperhatikan dalam berkomunikasi dengan kolega</a>
                </h2>
            </div>
        </div><!--/post-->      
        <div class="post feature-post" style="background-image:url(images/sport.jpg); background-size:cover;">
            <div class="post-content">
                <div class="catagory"><a href="#">Sport</a></div>
                <h2 class="entry-title">
                    <a href="">Pertarungan sengit Basket akan menentukan siapa sang juara</a>
                </h2>
            </div>
        </div>
    </div>
    
</div>  
    <script src='assets/js/jquery.js'></script>
    <!--<script src="assets/js/bootstrap.min.js"></script>-->
    
    <script src="assets/js/owl.carousel.min.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>

3. Creat file main.js
Pada file ini kita akan mendefinisikan berapa banyak gambar (item) yang muncul untuk load pertama. Kemudian mengeset autoplay agar headlinenews tersebut dapat berjalan (memainkan animasi bergerak).
jQuery(function ($) {
    
    $("#main-slider").owlCarousel({ 
        items : 4,
        pagination  : false,
        navigation  : false,
        autoPlay    : true,
        stopOnHover : true
        
    });
        
});

Live Preview Download

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar