Beranda > Pemrograman Javascript, web, web design > Membuat Content Slider – Jquery

Membuat Content Slider – Jquery

content slider

Content slider ini merupakan modifikasi dari artikel “Create Featured Content Slider Using jQuery UI“. Pada content slider tersebut data di masukkan kedalam script.

Pada artikel ini saya mencoba memodifikasi sedikit menggunakan PHP dan MySQL sebagai tempat menyimpan data untuk Content slider ini.

File “index.php”

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; dir=”ltr”>
<head profile=”http://gmpg.org/xfn/11″&gt;
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Featured Content Slider Using jQuery – Web Developer Plus Demos</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<script type=”text/javascript” src=”js/jquery.min.js” ></script>
<script type=”text/javascript” src=”js/jquery-ui.min.js” ></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});
</script>
</head><body><?php
$dbhost = ‘localhost’;
$dbuser = ‘root’;
$dbpass = ”;
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
$semua = ”;
$semua2 = ”;
$fragment=0;
if(! $conn )
{
die(‘Could not connect: ‘ . mysql_error());
}
$sql = ‘SELECT * FROM mobil’;mysql_select_db(‘slider’);
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
die(‘Could not get data: ‘ . mysql_error());
}while($row = mysql_fetch_array($retval, MYSQL_ASSOC))
{
$fragment=$fragment+1;
$teks1 = “<li class=\”ui-tabs-nav-item\” id=\”nav-fragment-“.$fragment.”\”><a href=\”#fragment-“.$fragment.”\”><img src=\”images/image”.$fragment.”-small.jpg\” alt=\”\” /><span><b>”.$row[‘merek’].”</b></span><br><span>”.$row[‘ket1’].”</span></a></li>”;
$semua = $semua.$teks1;$teks2=”<div id=\”fragment-“.$fragment.”\” class=\”ui-tabs-panel\” style=\”\”>”;
$teks3=”<img src=\”images/image”.$fragment.”.jpg\” alt=\”\” />”;
$teks4=”<div class=\”info\” >”;
$teks5=”<h2><a href=\”#\” >”.$row[‘judul’].”</a></h2>”;
$teks6=”<p>”.$row[‘keterangan’].”</p>”;
$teks7=”</div></div>”;$semua2=$semua2.$teks2.$teks3.$teks4.$teks5.$teks6.$teks7;}
echo “<div id=\”featured\” >”;
echo “<ul class=\”ui-tabs-nav\”>”;
echo $semua;
echo “</ul>”;echo $semua2;
echo “</div>”;mysql_close($conn);
?></body>
</html>

File “style.css”

#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px; overflow:hidden;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px; height:250px;
overflow:auto;
overflow-x:hidden;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:0px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px; text-decoration:none;
color:#333;  background:#fff;
line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected, #featured li.ui-tabs-active{
background:url(‘images/selected-item.gif’) top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a, #featured ul.ui-tabs-nav li.ui-tabs-active a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
bottom:0; left:0;
height:70px;
background: url(‘images/transparent-bg.png’);
}
#featured .ui-tabs-panel .info a.hideshow{
position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#featured .info h2{
font-size:1.2em; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0; font-weight:normal;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}

File “Mobil.sql”

— phpMyAdmin SQL Dump
— version 3.5.2.2
http://www.phpmyadmin.net

— Inang: 127.0.0.1
— Waktu pembuatan: 10 Okt 2013 pada 13.48
— Versi Server: 5.5.27
— Versi PHP: 5.4.7SET SQL_MODE=”NO_AUTO_VALUE_ON_ZERO”;
SET time_zone = “+00:00”;/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;–
— Basis data: `slider`
—- ———————————————————-
— Struktur dari tabel `mobil`
–CREATE TABLE IF NOT EXISTS `mobil` (
`id` int(3) NOT NULL AUTO_INCREMENT,
`merek` varchar(25) NOT NULL,
`ket1` varchar(50) NOT NULL,
`judul` varchar(50) NOT NULL,
`keterangan` varchar(250) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;–
— Dumping data untuk tabel `mobil`
–INSERT INTO `mobil` (`id`, `merek`, `ket1`, `judul`, `keterangan`) VALUES
(1, ‘Toyota Kijang Inova’, ‘Mobil keluarga terbaik’, ‘Mobil Sejuta Umat’, ‘Toyota Kijang Innova adalah mobil keluarga terbaik indonesia yang di design luas dan diberi kemudahan  kebutuhan.’),
(2, ‘Toyota Camry’, ‘Toyota Camry overview’, ‘Mobil Mewah’, ‘Toyota Camry overview with photos and videos. Learn more about the 2013 Toyota Camry with Kelley Blue Book expert reviews.’),
(3, ‘Honda Jazz’, ‘Honda Jazz menawan’, ‘Mobil Terjangkau’, ‘Features, gallery, reviews, finance and accessories. Request a brochure or book a test drive today!’),
(4, ‘Daihatsu All New Xenia’, ‘Xenia terbaru’, ‘Mobil keluarga’, ‘Mobil Daihatsu All New Xenia Hadir Dengan Desain Exterior baru yang dinamis’);/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Untuk file-file js dan image disimpan dalam folder masing-masing.

Download File Source disini.

  1. 20 Oktober 2014 pukul 12:16 am

    When some one searches for his required thing, thus he/she needs to be
    available that in detail, so that thing is maintained over here.

  2. 20 Oktober 2014 pukul 8:37 am

    I do not know whether it’s just me or if everyone else experiencing issues with your site.
    It looks like some of the written text on your posts are running off the
    screen. Can somebody else please provide feedback and let me know
    if this is happening to them too? This might be a problem with my internet browser because I’ve had this happen before.
    Thanks

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: