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/AVvXsEjCZuIzCwd6PeCEiw1IVoobEdyScbW7lIIv03m0Z1f7Fy9ClgGBQBryostXPCNZmPFoGDyQikmAvI-OiSxEAZD1ReLSRGawn-aJ1lBWv6S4JHjjYxmLjmcMDiC3fOg1UTCRaUQZgHErw6I/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEircKPFiy82ZQ6tzE64K14Di2FDhAp_szK5YjKVOy7bHOsn1QR3bjczXsmeDP5YTbplD_z-JPfG6pvPkRmdlvevjABVxmUDXScK1aLRrk9Yc2TCxwphdbMNYQh-L17D5yM0wUjaFyi0MEA/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVkC8DV9MyCeSvZwRHoTKyFD-VMKg3T9-X9nuQjAcgC4-wuno58iYM_CGBjh7PA6WRot_g4MLcGSTUNnoWCfnvFxPWdubXKKu_iznLMJKPa9ckAdO0BV5ranGnMmQ-qJGI1bJ7D0hfHlI/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr36TgAlLwU3cwkrD3rJmWwjfIjjDgo1JOXe8casJ44he_zwye5RgIGlsMMBEcPKnDb6WR-xrtZbFvKHGuyxgmF5IZBFzMOeLCv5UAeJmS0jTQuBQDRFqOC8hpSzzqihd-J-v-SGNOvAo/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/AVvXsEgd37iQYmPbMqciijEbRAEvMCHKtSm16pd0bDOpkQV5xtOlaMR89ACe3ACsi7GqWMLsrSbCk-dzjbtq7HeNXDoTgYrkB10Fde1Zj7Rj52mtTOJrwrCrw_M5VLHqJY3AQf-SSDHf9ZT7CrY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMitCcn_it5KL3cOKvaB4wCOeBJXXZw_MIZEOUXxqFZuPPPh5F84l2Utpxsvg3ljIGdMW4ZO0CpztKqcjm9CUeGCnGja5lyAKanh7zcdgdAshT7xLzurCpOga20aNQF4HXP59vn4OlyK4/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEqFdg-EXH8OGBDyMKkP_DQxmUJ11_BJmY58fPj9-_fUKGbbiJniILZ5QS-Nd1gy1YsvMBH0HdenkXCLa6l07IXHapJubKOc_6ylioybJ_hckpO-44mRYROkLAxj95XuOITJzwwxx_jc/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGpZ-tO3-7FlYMJ-YORE0ZnwHJd6vWEZTJy6AD-3H8IorOnGePrIzA_JlrioTc2nyWp_vET3hvHD57jPuXQIVd61kTfSb-oeLAzWV1Q7VlfPabrpHdER3UnVL16rd69dNVHIJgvqMMi5o/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHaLTsYiW_elGSgK5zUgEv0uBp6RMs9cMUFOv2V1zOVdth2yLzvhMLZA0VyDj0trDDdKhhIRPnaThmk3hAL67Crq3DxHNPsN9F0vmnZwOPqCISmhGzsshYAJbBGZuI-yjxIzPp73AXeF8/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB1OE3VD9rojLedoDCypzD3OAloAZv-p4wdgKTnbnVyx_XxGpzk_c15eb-nUUs9zzMpwwOmGZl2nWtZLjYoSqDQ_QOZCV280jXAuqX5UBTlJqkGqb9GwdeUKtaabVTvPjxd6_Gj7b227g/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-2KKk6z4aryO-ZWHQ8uO8tIO8MKyPScXeqVXz-rguF2FHdkbqH82AccU49ltywSzsj-aaahffaIo9JWaCi3-IVwK1XxJWyyAMp6N73kCsNZ2ifsFpQxJ6HQ9FVP2cznt8hFmstY1pdj0/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2q_T2BzGSNT9pAtQKkijiz_eDZQP7lsBed4OttgZQbH1aCpsOzes922NT2nOJRtVsqV-FUrfQGKd2b9GxonrUOKkHV-EISQCgkA1XO-2S1iNmQ-lbpJtaWlqOQuDpOPNVaYoeR_ux5k/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivx9f9c664ukm8B_UhDKtfGJ1w75oV_05d32Ffw84XWVmxehhyphenhyphenk9eWr6SPOxockYbBM3QoNxyT9WvqesyoFd1IkVI7jCDD6cMpvjEbe_-QWV5BgpVYN7LSrCLo57Jxf3d3KTPyExPXwho/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFBZlOzJSCrOdmv7OR94V_voX-s-7-PSzhT6x9mBwDDa13MVlZ7JdhPTxOHhbhHuszCOW95X_rIuB6YZWTcEWJs2wADv04VJvlBL-1rkNsYs_Wkx1p5GH8U-F7701pLVGpxe4p8n5VT4M/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZRjvxE-y3prIDL1maqGcGxqjjqB9Lbn9qogVBgb3RD9EouRwp7Au73h8yAD1SvW6UHTzXYNMEY5zHLCTKBQzcDridDnwAzS5j9LXLVn7tdTu1kcGEeSexU2VcUUe-2c83ppf4SUPiBs/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_oSyFfFC9fikpr2FcWim9ZWiUqDn4KlsOAS7Z7jyBCkvtWDrFlhdxz6Rr6dApE7ppWSl-U8MFzBqz-Kn9uxyp_EAci-knXe_TITcWvbHCNfaaCOjX-15ejF2PhJiz5qbI1Q-xLsuas50/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEqFdg-EXH8OGBDyMKkP_DQxmUJ11_BJmY58fPj9-_fUKGbbiJniILZ5QS-Nd1gy1YsvMBH0HdenkXCLa6l07IXHapJubKOc_6ylioybJ_hckpO-44mRYROkLAxj95XuOITJzwwxx_jc/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB1OE3VD9rojLedoDCypzD3OAloAZv-p4wdgKTnbnVyx_XxGpzk_c15eb-nUUs9zzMpwwOmGZl2nWtZLjYoSqDQ_QOZCV280jXAuqX5UBTlJqkGqb9GwdeUKtaabVTvPjxd6_Gj7b227g/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd37iQYmPbMqciijEbRAEvMCHKtSm16pd0bDOpkQV5xtOlaMR89ACe3ACsi7GqWMLsrSbCk-dzjbtq7HeNXDoTgYrkB10Fde1Zj7Rj52mtTOJrwrCrw_M5VLHqJY3AQf-SSDHf9ZT7CrY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_oSyFfFC9fikpr2FcWim9ZWiUqDn4KlsOAS7Z7jyBCkvtWDrFlhdxz6Rr6dApE7ppWSl-U8MFzBqz-Kn9uxyp_EAci-knXe_TITcWvbHCNfaaCOjX-15ejF2PhJiz5qbI1Q-xLsuas50/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/AVvXsEjCZuIzCwd6PeCEiw1IVoobEdyScbW7lIIv03m0Z1f7Fy9ClgGBQBryostXPCNZmPFoGDyQikmAvI-OiSxEAZD1ReLSRGawn-aJ1lBWv6S4JHjjYxmLjmcMDiC3fOg1UTCRaUQZgHErw6I/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEircKPFiy82ZQ6tzE64K14Di2FDhAp_szK5YjKVOy7bHOsn1QR3bjczXsmeDP5YTbplD_z-JPfG6pvPkRmdlvevjABVxmUDXScK1aLRrk9Yc2TCxwphdbMNYQh-L17D5yM0wUjaFyi0MEA/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVkC8DV9MyCeSvZwRHoTKyFD-VMKg3T9-X9nuQjAcgC4-wuno58iYM_CGBjh7PA6WRot_g4MLcGSTUNnoWCfnvFxPWdubXKKu_iznLMJKPa9ckAdO0BV5ranGnMmQ-qJGI1bJ7D0hfHlI/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr36TgAlLwU3cwkrD3rJmWwjfIjjDgo1JOXe8casJ44he_zwye5RgIGlsMMBEcPKnDb6WR-xrtZbFvKHGuyxgmF5IZBFzMOeLCv5UAeJmS0jTQuBQDRFqOC8hpSzzqihd-J-v-SGNOvAo/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/AVvXsEgd37iQYmPbMqciijEbRAEvMCHKtSm16pd0bDOpkQV5xtOlaMR89ACe3ACsi7GqWMLsrSbCk-dzjbtq7HeNXDoTgYrkB10Fde1Zj7Rj52mtTOJrwrCrw_M5VLHqJY3AQf-SSDHf9ZT7CrY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMitCcn_it5KL3cOKvaB4wCOeBJXXZw_MIZEOUXxqFZuPPPh5F84l2Utpxsvg3ljIGdMW4ZO0CpztKqcjm9CUeGCnGja5lyAKanh7zcdgdAshT7xLzurCpOga20aNQF4HXP59vn4OlyK4/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEqFdg-EXH8OGBDyMKkP_DQxmUJ11_BJmY58fPj9-_fUKGbbiJniILZ5QS-Nd1gy1YsvMBH0HdenkXCLa6l07IXHapJubKOc_6ylioybJ_hckpO-44mRYROkLAxj95XuOITJzwwxx_jc/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGpZ-tO3-7FlYMJ-YORE0ZnwHJd6vWEZTJy6AD-3H8IorOnGePrIzA_JlrioTc2nyWp_vET3hvHD57jPuXQIVd61kTfSb-oeLAzWV1Q7VlfPabrpHdER3UnVL16rd69dNVHIJgvqMMi5o/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHaLTsYiW_elGSgK5zUgEv0uBp6RMs9cMUFOv2V1zOVdth2yLzvhMLZA0VyDj0trDDdKhhIRPnaThmk3hAL67Crq3DxHNPsN9F0vmnZwOPqCISmhGzsshYAJbBGZuI-yjxIzPp73AXeF8/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB1OE3VD9rojLedoDCypzD3OAloAZv-p4wdgKTnbnVyx_XxGpzk_c15eb-nUUs9zzMpwwOmGZl2nWtZLjYoSqDQ_QOZCV280jXAuqX5UBTlJqkGqb9GwdeUKtaabVTvPjxd6_Gj7b227g/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-2KKk6z4aryO-ZWHQ8uO8tIO8MKyPScXeqVXz-rguF2FHdkbqH82AccU49ltywSzsj-aaahffaIo9JWaCi3-IVwK1XxJWyyAMp6N73kCsNZ2ifsFpQxJ6HQ9FVP2cznt8hFmstY1pdj0/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW2q_T2BzGSNT9pAtQKkijiz_eDZQP7lsBed4OttgZQbH1aCpsOzes922NT2nOJRtVsqV-FUrfQGKd2b9GxonrUOKkHV-EISQCgkA1XO-2S1iNmQ-lbpJtaWlqOQuDpOPNVaYoeR_ux5k/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivx9f9c664ukm8B_UhDKtfGJ1w75oV_05d32Ffw84XWVmxehhyphenhyphenk9eWr6SPOxockYbBM3QoNxyT9WvqesyoFd1IkVI7jCDD6cMpvjEbe_-QWV5BgpVYN7LSrCLo57Jxf3d3KTPyExPXwho/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFBZlOzJSCrOdmv7OR94V_voX-s-7-PSzhT6x9mBwDDa13MVlZ7JdhPTxOHhbhHuszCOW95X_rIuB6YZWTcEWJs2wADv04VJvlBL-1rkNsYs_Wkx1p5GH8U-F7701pLVGpxe4p8n5VT4M/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZRjvxE-y3prIDL1maqGcGxqjjqB9Lbn9qogVBgb3RD9EouRwp7Au73h8yAD1SvW6UHTzXYNMEY5zHLCTKBQzcDridDnwAzS5j9LXLVn7tdTu1kcGEeSexU2VcUUe-2c83ppf4SUPiBs/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_oSyFfFC9fikpr2FcWim9ZWiUqDn4KlsOAS7Z7jyBCkvtWDrFlhdxz6Rr6dApE7ppWSl-U8MFzBqz-Kn9uxyp_EAci-knXe_TITcWvbHCNfaaCOjX-15ejF2PhJiz5qbI1Q-xLsuas50/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEqFdg-EXH8OGBDyMKkP_DQxmUJ11_BJmY58fPj9-_fUKGbbiJniILZ5QS-Nd1gy1YsvMBH0HdenkXCLa6l07IXHapJubKOc_6ylioybJ_hckpO-44mRYROkLAxj95XuOITJzwwxx_jc/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB1OE3VD9rojLedoDCypzD3OAloAZv-p4wdgKTnbnVyx_XxGpzk_c15eb-nUUs9zzMpwwOmGZl2nWtZLjYoSqDQ_QOZCV280jXAuqX5UBTlJqkGqb9GwdeUKtaabVTvPjxd6_Gj7b227g/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd37iQYmPbMqciijEbRAEvMCHKtSm16pd0bDOpkQV5xtOlaMR89ACe3ACsi7GqWMLsrSbCk-dzjbtq7HeNXDoTgYrkB10Fde1Zj7Rj52mtTOJrwrCrw_M5VLHqJY3AQf-SSDHf9ZT7CrY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_oSyFfFC9fikpr2FcWim9ZWiUqDn4KlsOAS7Z7jyBCkvtWDrFlhdxz6Rr6dApE7ppWSl-U8MFzBqz-Kn9uxyp_EAci-knXe_TITcWvbHCNfaaCOjX-15ejF2PhJiz5qbI1Q-xLsuas50/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