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.cssFile 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
});
});
0 Response to "Cara Membuat Headline News Berjalan Dengan OwlCarousel"
Posting Komentar