Advertisement

Home / CSS / Efeck Gambar / JQuery / Membuat efek chop slider versi 2

Saturday, June 7, 2014

Membuat efek chop slider versi 2

By Unknown
On
ads

Efek chop slider - sebelum nya saya udah pernah membahas mengenai chop slider disini (dengan tampilan yang sederhana) namun untuk yang posting kali ini udah saya Update dan Tampilan nya juga sedikit menarik dari yang sebelum nya,..
Demo nya kurang lebih seperti gambar dibawah ini :



Simak langkah2 dibawah ini:

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style> 
@charset "utf-8";
p { margin:10px 0; }
h1, h2, h3, h4, h5, h6 { margin:0 0 10px; }
h5 { text-transform:uppercase; }
img { border:none; }
a {
 text-decoration:underline;
 color:#3c0d0d;
 outline:none;
}
h2 {
 margin:15px 0;
}
ul li {
 margin:5px 0;
}
.wrapper {
 position:relative;
 margin-left:auto;
 margin-right:auto;
 width:960px;
 height:300px;
 display:block;
 padding-top:150px;
 padding-bottom:120px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheff3kk1VOJzUv4_-LbjVxNuCfhd2K_N_TOxiLejZ3YZUC59SFR_XkkQCR079SOczjFIi5djusrP74nju8HGvnrewKX7QKYIbS42TmyOa7bmkjqhcUKsyajwioq3DNWscWj4qRHcou0f0B/s1600/podium.png) no-repeat bottom;
 z-index:2;
}
.wrapper2 {
 position:relative;
 margin-left:auto;
 margin-right:auto;
 margin-top:20px;
 width:960px;
 height:300px;
 display:block;
 z-index:2;
 text-align:center;
 padding-bottom:50px;
}
.wrapper2 a {
 display:inline-block;
 padding:0px 5px;
 background:#fff;
 border:1px solid #ccc;
 border-radius:3px;
 text-decoration:none;
 margin:0px 5px; 
}
.wrapper2 .active-transition {
 background:#222;
 color:#fff; 
}
/*---------- Slider ----------- */

/*---------- Left and Right Triggers ----------- */
#slide-prev {
 position:absolute;
 width:21px;
 height:33px;
 bottom:39px;
 left:26px;
 z-index:4;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz0iHStdT3Ttwfh8b0hgWdRufaQUC2KOZ_JhmeJEDJYDJSO-EtpVGUJDoSfiGPXY7KzN1eRAbER5uJ_p503oYEu6ssEFxC_J7acxsYvyyid4WC2ai2GsZztIa_iPSFRGL0WDkDwMpY2JXk/s1600/sl-control.png) left top no-repeat;
}
#slide-next {
 position:absolute;
 width:21px;
 height:33px;
 bottom:39px;
 right:26px;
 z-index:4;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz0iHStdT3Ttwfh8b0hgWdRufaQUC2KOZ_JhmeJEDJYDJSO-EtpVGUJDoSfiGPXY7KzN1eRAbER5uJ_p503oYEu6ssEFxC_J7acxsYvyyid4WC2ai2GsZztIa_iPSFRGL0WDkDwMpY2JXk/s1600/sl-control.png) left bottom no-repeat;
}

/*---------- Shadow, just for styling ----------- */
.s-shadow-b{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPOil9aAlTt1zoTlJUiSuKxH9CT3yMdlELTyft1YqX9pbGFCpx7ZkmYqcwgn68DE3K6VjZr9_IgNoa68lHtLBlRZMcuF72Afcf2L4jsGnNbQl3Jpo2QdDenileSkopMuQD5hgHchNTFYCf/s1600/shadow.png) no-repeat top;
 width:876px;
 height:55px;
 position:absolute;
 left:42px;
 bottom:60px;
 z-index:1;
}
/*---------- Main Slider Container----------- */
#slider {
 width:900px;
 height:300px;
 margin-left:auto;
 margin-right:auto;
 position:relative;
 z-index:2;
 display:block;
}
/* Every slide must be hidden by default */
.slide { display:none; }

/* 
   And only the slide with "cs-activeSlide" class must be visible!
   !Reserved Class name. Required class! 
*/
.cs-activeSlide { display:block; }

/* Container with caption's text. Must be hidden */
.slide-descriptions {
 display:none;
}

/* Container with caption, must be hidden by default */
.caption {
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYMmPh0jlM93GLOmlwBR-rnqfcLyzVCyFENfv5io4NZ_HBmZCRKzYQH1Xrrgbr6l_I_Kuh5I-XS6LDnjNPVLa3m6wls0hRtIqkpjvDo1LRte098jnM0ih3yUmRnOvCcY5YrFoqe8RdWi-6/s1600/deskripsi-bg.png") repeat scroll 0 0 transparent;
    color: #FFFFFF;
    display: none;
    height: 260px;
    padding: 20px;
    position: absolute;
    right: 30px;
    top: 150px;
    width: 180px;
    z-index: 3;
}
.full-3D {
 right: 40px;
    top: 580px;
    width: 840px;
 height:20px;
}
/* Container with Pagination buttons */
.pagination {
 bottom: 50px;
    left: 345px;
    margin-top: 50px;
    position: absolute;
    text-align: center;
}
.slider-pagination {
 display:inline-block;
 width:15px;
 height:10px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXfF1231hihBCvwQRkgcL4KTYOTc7MYNNWiXQLmspGMp7ZVo_wGKVHuGP6isA5qg0sG4biZHRC8mreRSBAkZTc_bLfJfNK4nIqIVZuFMtfag6-9t3XMcJf6rbWNQ7febCdJHKt0t9rKPW/s1600/navi.png) no-repeat left bottom;
 margin:0 10px;
 cursor:pointer;
 position:relative;
 z-index:200;
}
/* This is a required class for the "Active" pagination button. ! Reserved Class Name ! */
.cs-active-pagination {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXfF1231hihBCvwQRkgcL4KTYOTc7MYNNWiXQLmspGMp7ZVo_wGKVHuGP6isA5qg0sG4biZHRC8mreRSBAkZTc_bLfJfNK4nIqIVZuFMtfag6-9t3XMcJf6rbWNQ7febCdJHKt0t9rKPW/s1600/navi.png) no-repeat left top;
}

/* Multiple SLiders */
.slider-2 {
 padding-top:0;
 margin-top:20px;
}
#slider-1, #slider-2 {
 width:900px;
 height:300px;
 margin-left:auto;
 margin-right:auto;
 position:relative;
 z-index:2;
 display:block;
}
.cs-activeSlide-2 {
 display:block
}
.cs-active-pagination-2 {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXfF1231hihBCvwQRkgcL4KTYOTc7MYNNWiXQLmspGMp7ZVo_wGKVHuGP6isA5qg0sG4biZHRC8mreRSBAkZTc_bLfJfNK4nIqIVZuFMtfag6-9t3XMcJf6rbWNQ7febCdJHKt0t9rKPW/s1600/navi.png) no-repeat left top;
}

5. Tekan Ctrl+F cari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head>
<script src="http://yourjavascript.com/3222016443/jquery-latest-min.js"></script>
<script src="http://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="http://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script>
jQuery(function(){
    $("#slider").chopSlider({
        /* slide element */
        slide : ".slide",
        /* controlers */
        nextTrigger : "a#slide-next",
        prevTrigger : "a#slide-prev",
        hideTriggers : true,
        sliderPagination : ".slider-pagination",
        /* captions */
        useCaptions : true,
        everyCaptionIn : ".sl-descr",
        showCaptionIn : ".caption",
        captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
        /* autoplay */
        autoplay : true,
        autoplayDelay : 5000,
        /* for Browsers that support 3D transforms */
        t3D : csTransitions['3DFlips']['random'], /* all will be picked up randomly */
        t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
        noCSS3 : csTransitions['noCSS3']['random'],
        mobile : csTransitions['mobile']['random'],
        onStart: function(){},
        onEnd: function(){}
    })
})</script>

Penerapannya:

Masukan kode HTML di bawah ini ke dalam postingan blog sobat atau bisa juga di dalam gadget HTML/Javascript

     <div class="wrapper">
        <div class="s-shadow-b"></div>
        <a id="slide-next" href="#"></a>
        <a id="slide-prev" href="#"></a>
        <div id="slider">
          <div class="slide cs-activeSlide"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirfi0KnZP0F00q4-RxzeBpd-z9eAtYq2-7WaEm_5mawTR2q2C-QDOklZRAl-SeicsgtSwGw_-IoUpFI6dUEfOzuUxk2iOETc-2ORiAMu8VSs-AOGl-rDoPzHz6dizWMDQ50tOt23NprUe9/s1600/BIE_demo1.jpg" width="900" height="300" alt="photo #1" /> </div>
          <div class="slide"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_4SIaGS_m2h1XvbapmZx9J4tYRcyzaw8K1C4pP5yCFKWSjQ_oHJJ8R63sqAVlqgWmqHhRTNI-d4y2CZofrz2MUGpinq_MQyOT7Nvzj6aWQfzskJF9Q3jwI5Fc7FjNhdQ235EHn27p_kf/s1600/BIE_demo2.jpg" width="900" height="300" alt="photo #2" /> </div>
          <div class="slide"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg11mdcQl0FCzpgG8i2A70M-28vutg-SJx25485vtWEGOo_JH59jsm-RaKPpy-40GgfdAIHfCKjKA4F-79ovX2cU3jblNaQr3c-JiUBpKp-zf_3MmXsb-TuTJYGLfKp5ma86HGvm0o0jdDN/s1600/BIE_demo3.jpg" width="900" height="300" alt="photo #3" /> </div>
          <div class="slide"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyKsIgQKPXqD97C8NaKt8Dvd53Fb1xch4FsfhLGEF9QuF0tp9qwAN5JNnPox12CA_EO0HEYvT480giKoJkr11T4VSgpe-ICdDUoNurCFKH4ox3PMzlHyJjloFO3422Zc9tz9rcYU0XjEvY/s1600/BIE_demo4.jpg" width="900" height="300" alt="photo #4" /> </div>
          <div class="slide"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj3OOKS00v6jtlOaYTG-3KedJ359uhM8bpLorPSY16tPnVv0rBg2bvrRLJGyfC84qrp4JX_9NNhbhQuE7iBFkycWwfUyH1WnMJBY9Gyox9w2-CuSh7nE3WUCramBtcTiSPCeEGCVPGazBO/s1600/BIE_demo5.jpg" width="900" height="300" alt="photo #5" /> </div>
          <div class="slide"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfpM1l6pSEpYrl0PPJ_c87ZTQMB-U4oRYzIsUtRa8n0TlFHqk5CQpwXNq4-Ujpu3Y23CbRFWywxtr-GHG5lyCq-bOvYW2Fpl-gWLnZFbttWJ5L07LFTvYOxWAAFwbrtowq1c_DRdTaevWs/s1600/BIE_demo6.jpg" width="900" height="300" alt="photo #6" /> </div>
          <div class="slide"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_jejof3pFyOmugw959ot3leL5WTSY3xmrfXrQeMEu-qxcIptH5V0oFIMaSuPyVYKTOpGXkXqdxw1xVWtLaomkaFz5mnZa6B9arsYThAkc548YEb9GQBTCUw2nm5o-WjZ0Yy6W09NTOzG/s1600/BIE_demo7.jpg" width="900" height="300" alt="photo #7" /> </div>

  </div>
      <div class="pagination">
         <span class="slider-pagination"></span>
         <span class="slider-pagination"></span>
         <span class="slider-pagination"></span>
         <span class="slider-pagination"></span>
         <span class="slider-pagination"></span>
         <span class="slider-pagination"></span>
         <span class="slider-pagination"></span>
  </div>
       <div class="slide-descriptions">
         <div class="sl-descr">Disini deskripsi gambar anda.</div>
         <div class="sl-descr">Disini deskripsi gambar anda.</div>
         <div class="sl-descr">Disini deskripsi gambar anda.</div>
         <div class="sl-descr">Disini deskripsi gambar anda.</div>
         <div class="sl-descr">Disini deskripsi gambar anda.</div>
         <div class="sl-descr">Disini deskripsi gambar anda.</div>
         <div class="sl-descr">Disini deskripsi gambar anda.</div>
  </div>
       <div class="caption"></div>
       </div>


Note: Untuk link gambar nya bisa sobat ubah sesuai dengan URL gambar ke sukaan sobat,..
selamat mencoba dan semoga berhasil,...
Baca juga chop slider versi 1 disini !!!

Membuat efek chop slider versi 2 Rating: 4.5 Diposkan Oleh: Unknown
ads

Subscribe to: Post Comments (Atom)

Advertisement

 

Top