Code Slider đẹp cho web - blog thời trang. Sau đây Bít Tuốt xin chia sẻ với các bạn Code Slider đẹp rất thích hợp cho các web thời trang hay blog thời trang. Các bạn xem demo tại đây
Cách tạo Silder này như sau:
Bước 1: Thêm dưới đây lên trên thẻ đóng </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/tessssssssblog/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/tessssssssblog/jquery.mousewheel.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/tessssssssblog/jquery.RotateImageMenu.js"></script>
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/tessssssssblog/style.css" />
Bước 2: Bạn thêm phần này vào chỗ bạn muốn hiển thị
<div class="rm_wrapper">
<div id="rm_container" class="rm_container">
<ul>
<li data-images="rm_container_1" data-rotation="-15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW7Gb7w_YcVQC9Q5hn0_1_AGN4HmIxIdFCPBwfBov_-hNiO5X6GF_hRRlRXCwW3tsRCwLAr9PU_b1afN6Jih8UoJ4UKlqvnAEPV4i06uMyNmFeT8L7xSD4rDZsLhiJ7YcvPAAf_FCalvg/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Dj6Bpcoz-7-WnGkIP2UNXyXqPzJ2L3dNyuI5Avk-zH6KN6uYW1pu1gy9wEHIDo-wW7stI5_rdsIW2jdzia3LNuwXu-GQcqrJG0ydBZrMr_Cyogdy_QFDwwQ_L_YgyCzpMsJEKLQ04Yw/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjuiqdNaerQRrpJRuRC_Xc2lj4DXo8DyZztDfps1QPm7wL-tXslonrq-tvEFRK_WDZW77fDGWldhlBHvUzsHw_nKtPSkTVq3v74eawBaWTCbP5FTjN8uBU6gAtak9vbhsZ_OOEC3k8Ho/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwzhqoHzQfUE4Ylez4fmWP9etpj8BsNViLlkpktipyg4bdKZjMbZpGoy-8v5p0E-IXHofat3m1HOO6wuUW_Lt0KzgpJws0cjDTh4edFsr4WS0hMlr2orcYmiIVKUkf_iV0uJdN3Xl94k/s640/15.jpg"/></li>
</ul>
<div id="rm_mask_left" class="rm_mask_left"></div>
<div id="rm_mask_right" class="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>Fashion Explosion 2012</h2>
<div style="display:none;">
<div id="rm_container_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimT8HfMH3_R1VkilRTJWkMCQUxjAtnszpeSLfuYjLShGVqzxP5LX0nwe4vBA4369rFY0hC77GhfyU8Aos5aj48Rz504y40KUWBMqIHvuU7SAiQf6uHQlDG4TsKMyH-MbjwAFhYekJIclM/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsd9wl_nWjYJ5Y9ftF1Zxxu4jxQJ8Ya1e3-48CfoCjmmytSSMZUVWkG8OdQYWE9UP-e4OKfVgYpH2X6q375CXtbHZQzqBuSMUNDrlWpLnFRe-i1ae9g7ooxQqAWqsQ1IS4WKqmuszvF8Q/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9zZSWsls0ZFAmL0xegolCbMrxS9li83tH7h55eLVIy1IhdDvkTO0rkAIUm0VfMfo7nSavrDR_c32fbxKQho-vGpZwr3zBXAvpGsDJypbrryf-bt0_hli5aYMfyPA9EgvSM6Z9CTqAXfU/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpJT9fWRN9tdg-J9I4z8Avez7jaXrj0J9ro9t3-JhAuX9VqKKtwfcmFvnKBfX73Pg0-TI6HPzlVxJ4yxAWDL8ImB_CXa9eKa08u5yFSghUM91YRwblRBeSGjMh3ze6GBbIRxFVssUNTI/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4gEnMdIzTvlg7LGn_dceT2gn70dDf1XuFjv_oFJ2jofLVQDObvzwe4olqXY7RMrQ-CKeug6i2EGYfdvayPyzu4g0VCxzZqum_YzJvKLRWPZot0Z4fyPbkkZ2dxBMoV54zKBm9u4wOovQ/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6zdkxsdZA3pzTBOhXsvrY59p_IU6B04B7FR2Ic0rfOCUZjHrT8PL-N2TBafmOjMXic-d63phZLF-beI_Ftjv4PHgkaVAC-iqX-499QkOtxV9pmfZp9CPLXn_Pbaew7k4gRM9fCQhCq4/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwobU34TuKvgRg9S8-Gtr8spq8c5ugK4-PVis0lfYGCADvbYlV_FNQX3Z-NKIksPF1VbMemd5T2QNhFNWCUOyEGEZ2bECiObYEElUTKGxCxF5If7cU8JamEmrfAUR08b0TmmPDRtHdMBs/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUcDS_ulPqiR69u5WsI3IghpPqKLXU2BqfULqAoLjACXz2BPk46Mlfdaucz4oi3gArMY-R-3DsxyysmwCguyl7CWtY9JoaUoobWK-OetwxnGS6ZRs_CDxWTTyV4ziV14HjES9Ubfv-seI/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIbfWD0z9BA5Rt9BGWPB_vYmhvp14nugOLFW98jiPwL4hZveWlXzHv-LkU8V7POzmCoQLfzxaTBjbEb5qY0i3Wnyf5fyacVWzmZtJ2APB9ZFWz7KbmnFgRFOxI4ITKa8pX1y3_DnFqz8/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibIlAYkACDTSsnQ7zAxR2W-KNNcED1Jb5oTQmKC3ycI_LTg9p2YSO5Y16uAwfkFUouta808DHfMOeeTQC62C14atPa-1f6PM1FVxmys2FHqV9u4eGmhBF5WPgshpjUSVxW59xyfqlI4Bk/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz31qtjSXAQBPSKfDrwH76JEKuWY_dXVg5VvMH6EYhnT0pDJF_9E7hNoix_IO9FjoMqiIiXVL_KsF7sOsCgh1XZfg2fflNWN3fPSwBeRQXwL16ioGOz737hZDZu_h94azsauhDlPovKpI/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv673Cs9nNkfCHEwGYC7Hf43d0RN1xEXBxFN5S_bbn-3_wp85YOnd5OFOoKxBGrDf37I0IM2JUyodq1G89UU6KDMitg43JiblvLKFEh7UwNY6ik8cZsLW8RBp5nyQtUSq8n9AN-SEpspY/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9zZSWsls0ZFAmL0xegolCbMrxS9li83tH7h55eLVIy1IhdDvkTO0rkAIUm0VfMfo7nSavrDR_c32fbxKQho-vGpZwr3zBXAvpGsDJypbrryf-bt0_hli5aYMfyPA9EgvSM6Z9CTqAXfU/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6zdkxsdZA3pzTBOhXsvrY59p_IU6B04B7FR2Ic0rfOCUZjHrT8PL-N2TBafmOjMXic-d63phZLF-beI_Ftjv4PHgkaVAC-iqX-499QkOtxV9pmfZp9CPLXn_Pbaew7k4gRM9fCQhCq4/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimT8HfMH3_R1VkilRTJWkMCQUxjAtnszpeSLfuYjLShGVqzxP5LX0nwe4vBA4369rFY0hC77GhfyU8Aos5aj48Rz504y40KUWBMqIHvuU7SAiQf6uHQlDG4TsKMyH-MbjwAFhYekJIclM/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv673Cs9nNkfCHEwGYC7Hf43d0RN1xEXBxFN5S_bbn-3_wp85YOnd5OFOoKxBGrDf37I0IM2JUyodq1G89UU6KDMitg43JiblvLKFEh7UwNY6ik8cZsLW8RBp5nyQtUSq8n9AN-SEpspY/s1600/2.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">Play</a>
<a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>
</div>
</div>
<div id="rm_container" class="rm_container">
<ul>
<li data-images="rm_container_1" data-rotation="-15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW7Gb7w_YcVQC9Q5hn0_1_AGN4HmIxIdFCPBwfBov_-hNiO5X6GF_hRRlRXCwW3tsRCwLAr9PU_b1afN6Jih8UoJ4UKlqvnAEPV4i06uMyNmFeT8L7xSD4rDZsLhiJ7YcvPAAf_FCalvg/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Dj6Bpcoz-7-WnGkIP2UNXyXqPzJ2L3dNyuI5Avk-zH6KN6uYW1pu1gy9wEHIDo-wW7stI5_rdsIW2jdzia3LNuwXu-GQcqrJG0ydBZrMr_Cyogdy_QFDwwQ_L_YgyCzpMsJEKLQ04Yw/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjuiqdNaerQRrpJRuRC_Xc2lj4DXo8DyZztDfps1QPm7wL-tXslonrq-tvEFRK_WDZW77fDGWldhlBHvUzsHw_nKtPSkTVq3v74eawBaWTCbP5FTjN8uBU6gAtak9vbhsZ_OOEC3k8Ho/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwzhqoHzQfUE4Ylez4fmWP9etpj8BsNViLlkpktipyg4bdKZjMbZpGoy-8v5p0E-IXHofat3m1HOO6wuUW_Lt0KzgpJws0cjDTh4edFsr4WS0hMlr2orcYmiIVKUkf_iV0uJdN3Xl94k/s640/15.jpg"/></li>
</ul>
<div id="rm_mask_left" class="rm_mask_left"></div>
<div id="rm_mask_right" class="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>Fashion Explosion 2012</h2>
<div style="display:none;">
<div id="rm_container_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimT8HfMH3_R1VkilRTJWkMCQUxjAtnszpeSLfuYjLShGVqzxP5LX0nwe4vBA4369rFY0hC77GhfyU8Aos5aj48Rz504y40KUWBMqIHvuU7SAiQf6uHQlDG4TsKMyH-MbjwAFhYekJIclM/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsd9wl_nWjYJ5Y9ftF1Zxxu4jxQJ8Ya1e3-48CfoCjmmytSSMZUVWkG8OdQYWE9UP-e4OKfVgYpH2X6q375CXtbHZQzqBuSMUNDrlWpLnFRe-i1ae9g7ooxQqAWqsQ1IS4WKqmuszvF8Q/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9zZSWsls0ZFAmL0xegolCbMrxS9li83tH7h55eLVIy1IhdDvkTO0rkAIUm0VfMfo7nSavrDR_c32fbxKQho-vGpZwr3zBXAvpGsDJypbrryf-bt0_hli5aYMfyPA9EgvSM6Z9CTqAXfU/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpJT9fWRN9tdg-J9I4z8Avez7jaXrj0J9ro9t3-JhAuX9VqKKtwfcmFvnKBfX73Pg0-TI6HPzlVxJ4yxAWDL8ImB_CXa9eKa08u5yFSghUM91YRwblRBeSGjMh3ze6GBbIRxFVssUNTI/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4gEnMdIzTvlg7LGn_dceT2gn70dDf1XuFjv_oFJ2jofLVQDObvzwe4olqXY7RMrQ-CKeug6i2EGYfdvayPyzu4g0VCxzZqum_YzJvKLRWPZot0Z4fyPbkkZ2dxBMoV54zKBm9u4wOovQ/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6zdkxsdZA3pzTBOhXsvrY59p_IU6B04B7FR2Ic0rfOCUZjHrT8PL-N2TBafmOjMXic-d63phZLF-beI_Ftjv4PHgkaVAC-iqX-499QkOtxV9pmfZp9CPLXn_Pbaew7k4gRM9fCQhCq4/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwobU34TuKvgRg9S8-Gtr8spq8c5ugK4-PVis0lfYGCADvbYlV_FNQX3Z-NKIksPF1VbMemd5T2QNhFNWCUOyEGEZ2bECiObYEElUTKGxCxF5If7cU8JamEmrfAUR08b0TmmPDRtHdMBs/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUcDS_ulPqiR69u5WsI3IghpPqKLXU2BqfULqAoLjACXz2BPk46Mlfdaucz4oi3gArMY-R-3DsxyysmwCguyl7CWtY9JoaUoobWK-OetwxnGS6ZRs_CDxWTTyV4ziV14HjES9Ubfv-seI/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIbfWD0z9BA5Rt9BGWPB_vYmhvp14nugOLFW98jiPwL4hZveWlXzHv-LkU8V7POzmCoQLfzxaTBjbEb5qY0i3Wnyf5fyacVWzmZtJ2APB9ZFWz7KbmnFgRFOxI4ITKa8pX1y3_DnFqz8/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibIlAYkACDTSsnQ7zAxR2W-KNNcED1Jb5oTQmKC3ycI_LTg9p2YSO5Y16uAwfkFUouta808DHfMOeeTQC62C14atPa-1f6PM1FVxmys2FHqV9u4eGmhBF5WPgshpjUSVxW59xyfqlI4Bk/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz31qtjSXAQBPSKfDrwH76JEKuWY_dXVg5VvMH6EYhnT0pDJF_9E7hNoix_IO9FjoMqiIiXVL_KsF7sOsCgh1XZfg2fflNWN3fPSwBeRQXwL16ioGOz737hZDZu_h94azsauhDlPovKpI/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv673Cs9nNkfCHEwGYC7Hf43d0RN1xEXBxFN5S_bbn-3_wp85YOnd5OFOoKxBGrDf37I0IM2JUyodq1G89UU6KDMitg43JiblvLKFEh7UwNY6ik8cZsLW8RBp5nyQtUSq8n9AN-SEpspY/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9zZSWsls0ZFAmL0xegolCbMrxS9li83tH7h55eLVIy1IhdDvkTO0rkAIUm0VfMfo7nSavrDR_c32fbxKQho-vGpZwr3zBXAvpGsDJypbrryf-bt0_hli5aYMfyPA9EgvSM6Z9CTqAXfU/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6zdkxsdZA3pzTBOhXsvrY59p_IU6B04B7FR2Ic0rfOCUZjHrT8PL-N2TBafmOjMXic-d63phZLF-beI_Ftjv4PHgkaVAC-iqX-499QkOtxV9pmfZp9CPLXn_Pbaew7k4gRM9fCQhCq4/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimT8HfMH3_R1VkilRTJWkMCQUxjAtnszpeSLfuYjLShGVqzxP5LX0nwe4vBA4369rFY0hC77GhfyU8Aos5aj48Rz504y40KUWBMqIHvuU7SAiQf6uHQlDG4TsKMyH-MbjwAFhYekJIclM/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv673Cs9nNkfCHEwGYC7Hf43d0RN1xEXBxFN5S_bbn-3_wp85YOnd5OFOoKxBGrDf37I0IM2JUyodq1G89UU6KDMitg43JiblvLKFEh7UwNY6ik8cZsLW8RBp5nyQtUSq8n9AN-SEpspY/s1600/2.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">Play</a>
<a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>
</div>
</div>
Chú ý: Bạn có thể thay đổi kick thước phù hợp trong file style.css nhé. Các bạn có thể down code về xem chi tiết tại đây
0 comments:
Post a Comment