Tutorial : Cute Dot Circle Slider


Assalamualikum semua. Hari ni rajin pula Yura nak buat tutorial. Cute Dot Circle Slider ni apa ya? Ok cuba tengok gambar di bawah. Anda nampak tak ada dot kecil warna merah tu?
Cuba anda slide kannya ke bawah. Tara!! New picture appear!!.




Ok mari mulakan.

  • Blogger > Layout > Add a Gadget > Copy semua code di bawah!

<style>
  #rotatescroll { /* is the rectangle container */
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* is the rectangle containing the images */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview { /* is the list with the images */
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { /* each item of the list */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { /* the image with the circle overlapping the list */
    background: transparent url(http://4.bp.blogspot.com/-Ot8KEdqWA58/Um59McoG1bI/AAAAAAAAEgY/ZzK7Qidizrg/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { /* the red circle that allows us to navigate */
    background:transparent url(http://1.bp.blogspot.com/-SY8PG9E-_ZQ/Um59McKv1vI/AAAAAAAAEgc/tEDJm6soGfE/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { /* the points indicating the position of each image */
    background: transparent url(http://3.bp.blogspot.com/-O0kN8rvZGSE/Um59MRdOpHI/AAAAAAAAEgQ/XCiipR_fCKM/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { /* are hidden by default */
    display: none;
  }
 #rotatescroll .viewport ul.overview li img {
   width: 100%;
   min-height: 260px;
   margin-top: 20px;
   padding:0;
   border:0;
 }
</style>

<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="http://data.whicdn.com/images/194295665/superthumb.webp" /></li>
      <li><img src="http://data.whicdn.com/images/194294534/superthumb.webp" /></li>
      <li><img src="http://data.whicdn.com/images/194296079/superthumb.webp" /></li>
      <li><img src="http://data.whicdn.com/images/194295581/superthumb.webp" /></li>
      <li><img src="http://data.whicdn.com/images/194296219/superthumb.webp" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#rotatescroll').tinycircleslider({
interval: true,
snaptodots: true
});
});
</script>
  • Save > Preview Blog!
  • Yura hightlight tu boleh tukar dengan URL gambar anda tau . Selamat mencuba :D

1 comment

Awak mehla komen? satu komen pun jadilah :')