Memasang Image Dan Description Slider Dengan JQuery

Ini juga merupakan postingan request dari sobat bloger. (sebelumnya trims ya para sobat bloger yang mau share ma ane). Slider ini tak kalah menariknya dengan slider yang ane pasang pada home ane. Dengan tampilan yang menarik sobat bisa memodifikasinya sendiri.

Gimana, jika sobat-sobat yang lain mau, silahkan ikutin step-stepnya.

Ini scriptnya css :

<style type='text/css'>
<!--
/**
* Slideshow style rules.
*/
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(https://lh4.googleusercontent.com/-hMJTVtWPWRs/Tmzf96AMCLI/AAAAAAAABb4/J-Q6m9W5bXo/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}

/**
* Slideshow controls style rules.
*/
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(https://lh4.googleusercontent.com/-kBxAqd8BFtU/Tmzf-J4z64I/AAAAAAAABb8/5TqVcgswv1U/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(https://lh3.googleusercontent.com/-8zk4afeD6BA/Tmzf_CnmmgI/AAAAAAAABcA/BadvNOxRpbs/control_right.jpg) no-repeat 0 0;
}
#pageContainer {
margin:0 auto;
width:960px;
}
#pageContainer h1 {
display:block;
width:960px;
height:114px;
background:transparent url(https://lh4.googleusercontent.com/-c75w7khaj-4/TmzgBfRyg_I/AAAAAAAABcM/l3gKNvqujoc/s912/bg_pagecontainer_h1.jpg) no-repeat top left;
text-indent: -10000px;
}
.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#ccc;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
}
</style>

Ini Javascriptnyanya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $(&#39;.slide&#39;);
var numberOfSlides = slides.length;

// Remove scrollbar in JS
$(&#39;#slidesContainer&#39;).css(&#39;overflow&#39;, &#39;hidden&#39;);

// Wrap all .slides with #slideInner div
slides
  .wrapAll(&#39;&lt;div id=&quot;slideInner&quot;&gt;&lt;/div&gt;&#39;)
  // Float left to display horizontally, readjust .slides width
.css({
    &#39;float&#39; : &#39;left&#39;,
    &#39;width&#39; : slideWidth
  });

// Set #slideInner width equal to total width of all slides
$(&#39;#slideInner&#39;).css(&#39;width&#39;, slideWidth * numberOfSlides);

// Insert controls in the DOM
$(&#39;#slideshow&#39;)
  .prepend(&#39;&lt;span class=&quot;control&quot; id=&quot;leftControl&quot;&gt;Clicking moves left&lt;/span&gt;&#39;)
  .append(&#39;&lt;span class=&quot;control&quot; id=&quot;rightControl&quot;&gt;Clicking moves right&lt;/span&gt;&#39;);

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$(&#39;.control&#39;)
  .bind(&#39;click&#39;, function(){
  // Determine new position
currentPosition = ($(this).attr(&#39;id&#39;)==&#39;rightControl&#39;) ? currentPosition+1 : currentPosition-1;

// Hide / show controls
  manageControls(currentPosition);
  // Move slideInner using margin-left
  $(&#39;#slideInner&#39;).animate({
    &#39;marginLeft&#39; : slideWidth*(-currentPosition)
  });
});

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
  // Hide left arrow if position is first slide
if(position==0){ $(&#39;#leftControl&#39;).hide() } else{ $(&#39;#leftControl&#39;).show() }
// Hide right arrow if position is last slide
  if(position==numberOfSlides-1){ $(&#39;#rightControl&#39;).hide() } else{ $(&#39;#rightControl&#39;).show() }
}
});
</script>

Ini Script Htmlnya :

<div id="pageContainer">
<!-- Slideshow HTML -->
<div id="slideshow">
  <div id="slidesContainer">
    <div class="slide">
      <h2>Judul Post 1</h2>
      <p><a href="#/"><img src="urlimage1.jpg" alt="" width="215" height="145" /></a>
  ISI DEKRIPSI IMAGE 1
 </p>
    </div>
    <div class="slide">
      <h2>Judul Post 2</h2>
      <p><a href="#"><img src="urlimage2.jpg" width="215" height="145" alt="" /></a>
  ISI DEKRIPSI IMAGE 2
      <p>
    </div>
    <div class="slide">
      <h2>Judul Post 3</h2>
      <p><a href="#"><img src="urlimage3.jpg" width="215" height="145" alt="" /></a>
  ISI DEKRIPSI IMAGE 2
 </p>
    </div>
    <div class="slide">
      <h2>Judul Post 4</h2>
      <p><a href="#"><img src="urlimage4.jpg" width="215" height="145" alt="" /></a>
  ISI DEKRIPSI IMAGE 2
 </p>
    </div>
  </div>
</div>
</div>

Cara pemasanganya :

1. Login ke akun blog sobat,
2. Pilih Rancangan --> Edit Html,
3. Cari kode </head>,
4. Masukan script css di atas kode no.3,
5. Masukan script javascript di atas kode no 3,
   
6. Nah tinggal pemasangan script html, untuk pemasangan slider ini ada dua cara. Pada tambah gadged dan pada Edit Html,
7. Jika sobat akan memasang pada Add Gadged sobat pindah pada Edit Laman disini sobat mungkin akan mengedit script css untuk mengatur ukuran sldiernya,
8. Setelah itu klik Add Gadged dan pilih Html/Javascript lalu pastekan script html dan simpan.
9. Jika sobat ingin meletakanya di Edit Html silahkan sobat sesuaikan di mana letaknya asalkan di dalam tag <body> dan pastekan script html dan simpan.

Gimana, Semoga bermanfa'at bagi sobat......

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.

---

---