Cara Membuat Slide Show Image Dan Keterangan Menggunakan JQuery Slider Keren Di Blog

Dalam Posting ini kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag html saja. 

Pada pertemuan kali ini saya akan berbagi Slder Image dengan dengan menggunakan Jquery atau disebut dengan javasript.  dengan dropdown lain dari pada yang lain. kamu juga dapat melihat sendiri hasilnya setelah didowload atau lihat sendiri pada link Demo.juga dapat didowload pada link download. berikut ini saya jelaskan tag html dan cssnya 

Baiklah berikut ini tag html yang dapat membangun Slide Image nya :

Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK

Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste. lihat hasilnya..

css

.ei_menu{
 background :#696969;
 width:100%;
 overflow:hidden;
}
.ei_menu ul{
 height:350px;
 margin-left:50px;
 position:relative;
 display:block;
 width:1300px;
}
.ei_menu ul li{
 float:left;
 width:75px;
 height:350px;
 position:relative;
 overflow:hidden;
 border-right:2px solid #111;
}
.ei_preview{
 width:75px;
 height:350px;
 cursor:pointer;
 position:absolute;
 top:0px;
 left:0px;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyKaIWkhf2gCWkl3R0JDEdkGL3J9q3LqlO82yyyNmpeACfAHFpc0_lu55xP4E3Z7OuzvRLiW-oUUNh0utnwWk7a6kn1TJhwVoupyal7ZsrwIYMKsg8ZgWPuuCPtVyP1ndLtfmr9AYYQ4Yo/s1600/bw.jpg) no-repeat top left;
}
.ei_image{
 position:absolute;
 left:75px;
 top:0px;
 width:75px;
 height:350px;
 opacity:0.2;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielcyC7Uwtihq7RFGxbRcmDeF2QPpIMmkgpclfKDDr9GawJKCFTQL2Ge4QCp44I8fkE0_MuVFmf12THA9H4CRdEZoz35h2Jknt-4exSSvluUOPDOeL_TlQ-W-AgDkxEqkzN1l_evJYgb4E/s1600/color.jpg) no-repeat top left;
}
.pos1 span{
 background-position:0px 0px;
}
.pos2 span{
 background-position:-75px 0px;
}
.pos3 span{
 background-position:-152px 0px;
}
.pos4 span{
 background-position:-227px 0px;
}
.pos5 span{
 background-position:-302px 0px;
}
.pos6 span{
 background-position:-377px 0px;
}
.ei_descr{
 position:absolute;
 width:278px;
 height:310px;
 border-right:7px solid #f0f0f0;
 padding:20px;
 left:75px;
 top:0px;
 background:#fff;
}
.ei_descr h2{
 font-family: 'Rock Salt', arial, serif;
 font-size:26px;
 color:#333;
 padding:10px;
 text-shadow:0px 0px 1px #fff;
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjaEaMrpYGmUlhZSa0DGfDmpRqOfhzziNMi2XwZb4itHdsAY53lgveo6hELiqQKQL_BpXayGBlaAbmGQ3JuYZPJCkisVj3-hv57zVFGoBjYAVnOvzP3vX7bT7G9zLknvOBsImF1QhuNAin/s1600/stripe_light.gif) repeat top left;
}
.ei_descr h3{
 font-family: 'Raleway', arial, serif;
 color:#fff;
 text-shadow:0px 0px 1px #000;
 font-style:normal;
 padding:10px;
 background:#333;
}
.ei_descr p{
 color:#000;
 padding:10px 5px 0px 5px;
 line-height:18px;
 font-size:11px;
 font-family: Arial;
 text-transform:uppercase;
}

ul.trigger_list{
 position:absolute;
 right:20px;
 top:145px;
}
ul.trigger_list li{
 float:left;
 line-height:53px;
 color:#ddd;
 font-style:italic;
}
ul.trigger_list li a{
 font-family: 'Rock Salt', arial, serif;
 display:block;
 background:#000;
 color:#ddd;
 line-height:35px;
 padding:5px 10px;
 margin:3px;
 border-radius:5px 5px 5px 5px;
 text-shadow:1px 1px 1px #000;
}
ul.trigger_list li a:hover{
 background:#222;
 color:#fff;

}

html

<div id="ei_menu" class="ei_menu">
 <ul>
<li>
   <a href="#" class="pos1">
    <span class="ei_preview"></span>
    <span class="ei_image"></span>
    </a>
     <div class="ei_descr">
      <h2>
Gary</h2>
<h3>
Vocals</h3>
<p>
A wonderful serenity has taken possession of my
      entire soul, like these sweet mornings of
      spring which I enjoy with my whole heart.
      </p>
<p>
I am alone, and feel the charm of existence in
      this spot, which was created for the bliss of
      souls like mine.
      </p>
</div>
</li>
<li>
   <a href="#" class="pos2">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
David</h2>
<h3>
Guitar</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
<li>
   <a href="#" class="pos3">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
Andrew</h2>
<h3>
Bass</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
<li>
   <a href="#" class="pos4">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
Sean</h2>
<h3>
Drums</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
<li>
   <a href="#" class="pos5">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
Marc</h2>
<h3>
Guitar</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
<li>
   <a href="#" class="pos6">
   <span class="ei_preview"></span>
   <span class="ei_image"></span>
   </a>
    <div class="ei_descr">
    <h2>
Matt</h2>
<h3>
Guitar</h3>
<p>
A wonderful serenity has taken possession of my
    entire soul, like these sweet mornings of
    spring which I enjoy with my whole heart.
    </p>
<p>
I am alone, and feel the charm of existence in
    this spot, which was created for the bliss of
    souls like mine.
    </p>
</div>
</li>
</ul>
</div>

jquery

<script type="text/javascript" src="https://doc-0s-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/ttart0rh1bvcv80ftu185katleiaflc6/1404216000000/11363352952214392690/11363352952214392690/0B9OR40LPow7oNm1EUXpzX29tdnc?e=download&h=16653014193614665626&nonce=pvubcbftc46c6&user=11363352952214392690&hash=ef0l7vnfg11luvpsammr9t5uoropf8fu"></script>
<script type="text/javascript" src="https://doc-14-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/e9meb0fbeio596t3ajfrelq5ttkucddc/1404216000000/11363352952214392690/11363352952214392690/0B9OR40LPow7odkpQOTV2UlFqcVU?h=16653014193614665626&e=download"></script>
<script type="text/javascript">
$(function() {
var $menu  = $('#ei_menu > ul'),
$menuItems  = $menu.children('li'),
$menuItemsImgWrapper= $menuItems.children('a'),
$menuItemsPreview = $menuItemsImgWrapper.children('.ei_preview'),
totalMenuItems  = $menuItems.length,
 
ExpandingMenu  = (function(){
   /*
@current
set it to the index of the element you want to be opened by default,
or -1 if you want the menu to be closed initially
    */
var current    = -1,
   /*
@anim
if we want the default opened item to animate initialy set this to true
   */
anim    = true,
  /*
checks if the current value is valid -
between 0 and the number of items
  */
validCurrent  = function() {
return (current >= 0 && current < totalMenuItems);
},
init    = function() {
/* show default item if current is set to a valid index */
if(validCurrent())
configureMenu();
initEventsHandler();
},
configureMenu  = function() {
/* get the item for the current */
var $item = $menuItems.eq(current);
/* if anim is true slide out the item */
if(anim)
slideOutItem($item, true, 900, 'easeInQuint');
else{
/* if not just show it */
$item.css({width : '400px'})
.find('.ei_image')
.css({left:'0px', opacity:1});
/* decrease the opacity of the others */
$menuItems.not($item)
 .children('.ei_preview')
 .css({opacity:0.2});
}
},
initEventsHandler = function() {
/*
when we click an item the following can happen:
1) The item is already opened - close it!
2) The item is closed - open it! (if another one is opened, close it!)
*/
$menuItemsImgWrapper.bind('click.ExpandingMenu', function(e) {
var $this  = $(this).parent(),
idx  = $this.index();
if(current === idx) {
slideOutItem($menuItems.eq(current), false, 1500, 'easeOutQuint', true);
current = -1;
}
else{
if(validCurrent() && current !== idx)
slideOutItem($menuItems.eq(current), false, 250, 'jswing');
current = idx;
slideOutItem($this, true, 250, 'jswing');
}
return false;
});
},
/* if you want to trigger the action to open a specific item */
openItem   = function(idx) {
        $menuItemsImgWrapper.eq(idx).click();
},
/*
opens or closes an item
note that "mLeave" is just true when all the items close,
in which case we want that all of them get opacity 1 again.
"dir" tells us if we are opening or closing an item (true | false)
*/
slideOutItem  = function($item, dir, speed, easing, mLeave) {
var $ei_image = $item.find('.ei_image'),

itemParam = (dir) ? {width : '400px'} : {width : '75px'},
imageParam = (dir) ? {left : '0px'} : {left : '75px'};

/*
if opening, we animate the opacity of all the elements to 0.1.
this is to give focus on the opened item..
*/
if(dir)
/*
alternative:
$menuItemsPreview.not($menuItemsPreview.eq(current))
 .stop()
 .animate({opacity:0.1}, 500);
*/
$menuItemsPreview.stop()
.animate({opacity:0.1}, 1000);
else if(mLeave)
$menuItemsPreview.stop()
.animate({opacity:1}, 1500);

/* the <li> expands or collapses */
$item.stop().animate(itemParam, speed, easing);
/* the image (color) slides in or out */
$ei_image.stop().animate(imageParam, speed, easing, function() {
/*
if opening, we animate the opacity to 1,
otherwise we reset it.
*/
if(dir)
$ei_image.animate({opacity:1}, 2000);
else
$ei_image.css('opacity', 0.2);
});
};

return {
init   : init,
openItem : openItem
};
})();
   
/*
call the init method of ExpandingMenu
*/
ExpandingMenu.init();
 
/*
if later on you want to open / close a specific item you could do it like so:
ExpandingMenu.openItem(3); // toggles item 3 (zero-based indexing)
*/
});
</script>

Adapun File nya dapat dilihat hasilnya  dan dapat juga diunduh berikut di bawah ini :

Demo                                  Unduh