Pusat Ilmu Secara Detil

Cara Membuat Headline News Berjalan Dengan OwlCarousel

Cara Membuat Headline News Berjalan Dengan OwlCarousel

example of owl carouse for headline news
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 :
 Contoh Tutorial Image Slideshow Lainnya
Image Slideshow dengan WowSlider
Membuat Berita Berjalan atau Horizontal Newsticker
Membuat Newsticker dengan Bootstrap
Bootstrap List Slider
Bootstrap Carousel Multi Column
Tutorial Bootstrap Slider
Tutorial Image Slideshow dengan menggunakan CoinSlider

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
        
    });
        
});


Share this:

Related Posts
Disqus Comments