Dalam tutorial berikut kita akan membuat sebuah slider gambar asimetris dengan sedikit twist: saat menggeser gambar kita akan sedikit memutar mereka dan menunda geser dari setiap elemen. Bentuk yang tidak biasa slider yang dibuat oleh beberapa penempatan elemen dan penggunaan perbatasan tebal. Kami juga akan menambahkan opsi autoplay dan fungsi roda mouse. Kami akan menggunakan Plugin Transformasi 2D jQuery untuk memutar gambar dan jQuery roda mouse Plugin oleh Brandon Harun untuk kontrol roda mouse. Foto-foto indah yang oleh Andrew dan Lili dan Anda dapat melihat Profil Behance mereka di sini: http://www.behance.net/AndrewLili Gambar dilisensikan dengan lisensi Creative Commons Attribution-Noncommercial 3.0 Unported License. Allrighty! Mari kita mulai dengan HTML! CSS ::
. Rm_wrapper {
width: 1160 px;
margin: 0 auto; } . rm_container h2 { background: url transparan (http://tympanus.net/Tutorials/RotatingImageSlider/images/lines.png) ulangi kiri atas, padding: 10px ; 0px 1px # fff } . rm_container ul { ; 1170px: lebar } rm_container ul. solid # fff; box-shadow: 0 0 2px # ddd;-moz-box-shadow: 0 0 2px # ddd;-webkit-box-shadow: 0 0 2px # ddd, border-width: 50px 30px 0px 30px; latar belakang -color: # fff; } rm_container ul li img {. position: absolute; top:; 0px :; 0px kiri } rm_mask_right, rm_mask_left {.. position: absolute; height: 110px; background: # fff; width: 530px; bottom :-30px; kiri: a { position: absolute; top: 200px; width: 38px; height: 87px; kursor: pointer; opacity: 0.7; } rm_nav a: hover {. opacity: 1.0; } . rm_nav a.rm_next { background: url transparan (http :/ / tympanus.net / Tutorial / RotatingImageSlider / images / next.png) no-ulangi kiri atas, kanan: 0px; } rm_nav a.rm_prev {. background: url transparan (http://tympanus.net/Tutorials/RotatingImageSlider / images / prev.png) no-ulangi kiri atas, kiri: 0px; } . rm_controls { position: absolute; top: 0px; kiri: 40px-; height: 20px; } . rm_controls a: hover { opacity: 1.0; } rm_controls a.rm_play {. background: url transparan (http://tympanus.net/Tutorials/RotatingImageSlider/images/play.png) pusat tidak mengulang-kiri; } . rm_controls a.rm_pause { display: none; background: url transparan (http://tympanus.net/Tutorials/RotatingImageSlider/images/pause.png) pusat tidak mengulang-kiri; }
SCRIPT ::
Tambahkan Bisnis src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"> </ script>
<jenis skrip = "text / javascript "
type = "text / javascript"
type = "text / javascript" src = "http://tympanus.net/Tutorials/RotatingImageSlider/js/jquery.mousewheel.js"> </ script>
HTML ::
<div class="content">
<div class="rm_wrapper">
<div id="rm_container" class="rm_container">
<ul>
<li data-images="rm_container_1" data-rotation="-15"> <img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/1.jpg"/> </ li>
<li data-images="rm_container_2" data-rotation="-5"> <img src = "http://tympanus.net/Tutorials/RotatingImageSlider/images/2.jpg" /> </ li>
<li data-images="rm_container_3" data-rotation="5"> <img src = "http: / / tympanus.net/Tutorials/RotatingImageSlider/images/3.jpg "/> </ li>
<li data-images="rm_container_4" data-rotation="15"> <img src = "http://tympanus. net/Tutorials/RotatingImageSlider/images/4.jpg "/> </ li>
</ ul>
<div id="rm_mask_left" class="rm_mask_left"> </ div>
<div id = "" class = "rm_mask_right rm_mask_right "> </ div>
<div id="rm_corner_left" class="rm_corner_left"> </ div>
<div id="rm_corner_right" class="rm_corner_right"> </ div>
<h2> Mode Explosion 2013 </ h2>
<div style="display:none;">
<div id="rm_container_1">
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/1.jpg"/>
<img src = "http :/ / tympanus.net/Tutorials/RotatingImageSlider/images/5.jpg "/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/6.jpg"/>
<img src = "http :/ / tympanus.net/Tutorials/RotatingImageSlider/images/7.jpg "/>
</ div>
<div id="rm_container_2">
<img src = "http://tympanus.net/Tutorials/RotatingImageSlider/images/ 2.jpg "/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/8.jpg"/>
<img src = "http://tympanus.net/Tutorials/RotatingImageSlider/images/ 9.jpg "/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/10.jpg"/>
</ div>
<div id="rm_container_3">
<img src = "http: / / tympanus.net/Tutorials/RotatingImageSlider/images/3.jpg "/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/11.jpg"/>
<img src = "http: / / tympanus.net/Tutorials/RotatingImageSlider/images/12.jpg "/>
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/13.jpg"/>
</ div>
<div id = "rm_container_4">
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/4.jpg"/>
<img src = "http://tympanus.net/Tutorials/RotatingImageSlider/images/14 jpg "/>.
<img src="http://tympanus.net/Tutorials/RotatingImageSlider/images/15.jpg"/>
<img src = "http://tympanus.net/Tutorials/RotatingImageSlider/images/16 . jpg "/>
</ div>
</ div>
</ div>
<div class="rm_nav">
<a id="rm_next" href="#" class="rm_next"> </ a>
<a id = "rm_prev" href = "#" class = "rm_prev"> </ a>
</ div>
<div class="rm_controls">
<a id="rm_play" href="#" class="rm_play"> Bermain </ a>
<a id="rm_pause" href="#" class="rm_pause"> Jeda </ a>
</ div>
</ div>
</ div>
Contoh Rotating Slider Dengan jQuery & CSS3 Plugin!
Tidak ada komentar:
Posting Komentar
Salam Sukses