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/AVvXsEg2Vx8ujWi-lwErUUGjIAGs_isP9ia_wyKvgShgDs_WFQ6PMQPk7t-l5h3ttcf5y4Pa00Yd_3di-emTN9RLO2A-YthbqLxGxxV7u75utmqDhtxWOcf03ujKLL5o7gPz1SOD2l1nkDTaLFY/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBwf_HxTITb_c4kY6a-LF5LVDfQU14c-rmwaxLd6QWybljtxF4-rWsyyKQZx0S8yQII3X1_uBCQ73cIKukbyWtKqHFl7LtmtnfHDu_E-N4FFk2JyzhvFNJOilkPzOwYxGiCBVpC-l6qEw/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4D7S-a3Fm6zzICDPTW-fV8SL4GNrsONiLIchijsB1hh2tFeUZKtSVXw4DXnBLlxdsTdFubwGmRXIuEKC500w4WC7JyTSkRBHkMwIS2cl-wABHyTEdrLzkhZbYgiZc0UrN8gJA6L3kCs/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZx2gB8Mqokb52hSrUqoTX8GH2S-p4IiDzvL7Fvc1-1S7Dw3isT7jcQmfwjrWZ2lglCdGyqR-759gJFIEiLGbSBuSu8kUDNaDVcGz2hqWPlBD-4aih8PgkhvP7jS0hITflRmgmCpGVCg/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/AVvXsEhth6HnJoLmH8gOBotDKPWoWvxoZqa2aQEUJra8ZacJ9HfhShaPJgolIn0tpEC-vLkFkoiocNpeuTwXX-cAPnv5tlfx9njsU8cGhnpCHS9_hJLg5wFttElUIahKJEYsU4lNf_1_lB1wLoY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqmEcaLfOh4IW2eVowJtdLusjkDFS4TIVgHYv2omEcSaNmchNaPiYmrFUXC-MfuHktAO2DTDaJQBqMbV8sfsbHZ7CXHtsuBBWa8dRxZch5s4FwNzR7xb7Id_SHWxyLSfRfxQ_joZmaIb4/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiks9zKvHwb90l0Cp1B1Nz0KIw6RVTny6G3ZAqV3WwfrJRnoQpMzCSc_rTG7Vkoq-xU5iUyLhJBZc_1JTbyOleng2aGRrUowmY1EGHixdK6f-toTIDXQfs95SPqoLl6pPL2sign43gYuGE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEBytZKPBZcvxmxHK4VPEh54x09Ju-cj-aAYQaq3_4XBFPVMFMs1YqBH6VUSMjq17Byg-v9q_0AMDAFOauASLGY8uwZYYSFQSeqgiSoMuZwj2avkP4NTYxbU2qT1eyaSCqBsn1vYB_pw/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rr9WGqji1uRWGK-TP133ZhB4x82MgSdcEvki2tTkTYo3PDCSs3bfadV6mFOsDBwF7sK0lCRs7q0jKEMCy1xudnlh-ZKOUxk0w6wNSOYZO8-Rna_G3zskp0rfZ2r0Q1DJ1yRhEw8camY/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnTLEpzURNRB703j_QI4Aqk6k6_fMAeass0KWY_R-OG9XcxtNX04NDUIYlhlC6zAWih9m0uHwX8jRNkuxrb_uCpGXcWj-5tbyLv0mQLlgLKQJn7b4vPT9HG5sTKdv-sxwnoMOA34MuRA/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZfrFMC1rl_3SHPtzCzk3ZHo3YBhZhw31xkU-_V2K2UFcR2_PUkUePBm6kaRS131JCFCDsM7WJGkB6kn4-_7dW-fVhfG6eYB0Jy5yf_c5RCKocPYswJIKR_BUtTSwOTKHXUkCxICZQms/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZCsWRp23PTp-EEgMyrqHaeuV6PHAz0to-WT5reXZk960nZNG3020XLznA9PPtqoscHFxMW-4q0p3Xc3coHUTXmLqFZ0eNaQylqPXTDso7WwqXnnMLzRzpX_qfViwqClM5gJnoDKefEk/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIA49PpB3vY2afefeldMdNx8KUtbY-VWu0HrC8UnsI7Hl71u9g1QAhvBu0n_E4qkWrehq9QOVyUFbMc8SRFIqkUI0zLKGQ8toWfQ8RUFPfY_c4QJtDS7-knkybqz4wwcOBXQ4OsT4aIJM/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhprarHCTVsU1TtzPMjgbJ_bXDfqZUxWgHWxQdFBmpd5LhAX6KXcrCdGfVdvUpK9741RGvpah6wFaW-e3Kyyphg-cDCSQNGs-Yy5QOxcDKs08DaDp98SmS8XswwHWTx-tAhaMigJOO-ps/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLYXvSrxr1Eg1NAsOUwtwswjRZ5ptEHheoDe6LlGH9cjtOt6tmZL0mdlS_VGl1fe5V1z2JkNQCsSb_vfEj8SQKPmvm2OuiHSBjIA_S1T_E1Xn1dH_zsFTkzztEb8urjbI4PbppfF7rpU8/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNV8Oo8-94tAk2p1aCoj0vagWZ35AnxrJeWRAzYXLeLLKK54TdzOqm2WTpkab3l8jkKo3F3B9Q4rcixI8ToGpptAKhAfspGVGxtmm0qaC-snQfbJZ3-yafi8CYaI1YeOod0uAa1K9WFdo/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiks9zKvHwb90l0Cp1B1Nz0KIw6RVTny6G3ZAqV3WwfrJRnoQpMzCSc_rTG7Vkoq-xU5iUyLhJBZc_1JTbyOleng2aGRrUowmY1EGHixdK6f-toTIDXQfs95SPqoLl6pPL2sign43gYuGE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnTLEpzURNRB703j_QI4Aqk6k6_fMAeass0KWY_R-OG9XcxtNX04NDUIYlhlC6zAWih9m0uHwX8jRNkuxrb_uCpGXcWj-5tbyLv0mQLlgLKQJn7b4vPT9HG5sTKdv-sxwnoMOA34MuRA/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth6HnJoLmH8gOBotDKPWoWvxoZqa2aQEUJra8ZacJ9HfhShaPJgolIn0tpEC-vLkFkoiocNpeuTwXX-cAPnv5tlfx9njsU8cGhnpCHS9_hJLg5wFttElUIahKJEYsU4lNf_1_lB1wLoY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNV8Oo8-94tAk2p1aCoj0vagWZ35AnxrJeWRAzYXLeLLKK54TdzOqm2WTpkab3l8jkKo3F3B9Q4rcixI8ToGpptAKhAfspGVGxtmm0qaC-snQfbJZ3-yafi8CYaI1YeOod0uAa1K9WFdo/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/AVvXsEg2Vx8ujWi-lwErUUGjIAGs_isP9ia_wyKvgShgDs_WFQ6PMQPk7t-l5h3ttcf5y4Pa00Yd_3di-emTN9RLO2A-YthbqLxGxxV7u75utmqDhtxWOcf03ujKLL5o7gPz1SOD2l1nkDTaLFY/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBwf_HxTITb_c4kY6a-LF5LVDfQU14c-rmwaxLd6QWybljtxF4-rWsyyKQZx0S8yQII3X1_uBCQ73cIKukbyWtKqHFl7LtmtnfHDu_E-N4FFk2JyzhvFNJOilkPzOwYxGiCBVpC-l6qEw/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4D7S-a3Fm6zzICDPTW-fV8SL4GNrsONiLIchijsB1hh2tFeUZKtSVXw4DXnBLlxdsTdFubwGmRXIuEKC500w4WC7JyTSkRBHkMwIS2cl-wABHyTEdrLzkhZbYgiZc0UrN8gJA6L3kCs/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZx2gB8Mqokb52hSrUqoTX8GH2S-p4IiDzvL7Fvc1-1S7Dw3isT7jcQmfwjrWZ2lglCdGyqR-759gJFIEiLGbSBuSu8kUDNaDVcGz2hqWPlBD-4aih8PgkhvP7jS0hITflRmgmCpGVCg/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/AVvXsEhth6HnJoLmH8gOBotDKPWoWvxoZqa2aQEUJra8ZacJ9HfhShaPJgolIn0tpEC-vLkFkoiocNpeuTwXX-cAPnv5tlfx9njsU8cGhnpCHS9_hJLg5wFttElUIahKJEYsU4lNf_1_lB1wLoY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqmEcaLfOh4IW2eVowJtdLusjkDFS4TIVgHYv2omEcSaNmchNaPiYmrFUXC-MfuHktAO2DTDaJQBqMbV8sfsbHZ7CXHtsuBBWa8dRxZch5s4FwNzR7xb7Id_SHWxyLSfRfxQ_joZmaIb4/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiks9zKvHwb90l0Cp1B1Nz0KIw6RVTny6G3ZAqV3WwfrJRnoQpMzCSc_rTG7Vkoq-xU5iUyLhJBZc_1JTbyOleng2aGRrUowmY1EGHixdK6f-toTIDXQfs95SPqoLl6pPL2sign43gYuGE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEBytZKPBZcvxmxHK4VPEh54x09Ju-cj-aAYQaq3_4XBFPVMFMs1YqBH6VUSMjq17Byg-v9q_0AMDAFOauASLGY8uwZYYSFQSeqgiSoMuZwj2avkP4NTYxbU2qT1eyaSCqBsn1vYB_pw/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rr9WGqji1uRWGK-TP133ZhB4x82MgSdcEvki2tTkTYo3PDCSs3bfadV6mFOsDBwF7sK0lCRs7q0jKEMCy1xudnlh-ZKOUxk0w6wNSOYZO8-Rna_G3zskp0rfZ2r0Q1DJ1yRhEw8camY/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnTLEpzURNRB703j_QI4Aqk6k6_fMAeass0KWY_R-OG9XcxtNX04NDUIYlhlC6zAWih9m0uHwX8jRNkuxrb_uCpGXcWj-5tbyLv0mQLlgLKQJn7b4vPT9HG5sTKdv-sxwnoMOA34MuRA/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZfrFMC1rl_3SHPtzCzk3ZHo3YBhZhw31xkU-_V2K2UFcR2_PUkUePBm6kaRS131JCFCDsM7WJGkB6kn4-_7dW-fVhfG6eYB0Jy5yf_c5RCKocPYswJIKR_BUtTSwOTKHXUkCxICZQms/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZCsWRp23PTp-EEgMyrqHaeuV6PHAz0to-WT5reXZk960nZNG3020XLznA9PPtqoscHFxMW-4q0p3Xc3coHUTXmLqFZ0eNaQylqPXTDso7WwqXnnMLzRzpX_qfViwqClM5gJnoDKefEk/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIA49PpB3vY2afefeldMdNx8KUtbY-VWu0HrC8UnsI7Hl71u9g1QAhvBu0n_E4qkWrehq9QOVyUFbMc8SRFIqkUI0zLKGQ8toWfQ8RUFPfY_c4QJtDS7-knkybqz4wwcOBXQ4OsT4aIJM/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhprarHCTVsU1TtzPMjgbJ_bXDfqZUxWgHWxQdFBmpd5LhAX6KXcrCdGfVdvUpK9741RGvpah6wFaW-e3Kyyphg-cDCSQNGs-Yy5QOxcDKs08DaDp98SmS8XswwHWTx-tAhaMigJOO-ps/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLYXvSrxr1Eg1NAsOUwtwswjRZ5ptEHheoDe6LlGH9cjtOt6tmZL0mdlS_VGl1fe5V1z2JkNQCsSb_vfEj8SQKPmvm2OuiHSBjIA_S1T_E1Xn1dH_zsFTkzztEb8urjbI4PbppfF7rpU8/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNV8Oo8-94tAk2p1aCoj0vagWZ35AnxrJeWRAzYXLeLLKK54TdzOqm2WTpkab3l8jkKo3F3B9Q4rcixI8ToGpptAKhAfspGVGxtmm0qaC-snQfbJZ3-yafi8CYaI1YeOod0uAa1K9WFdo/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiks9zKvHwb90l0Cp1B1Nz0KIw6RVTny6G3ZAqV3WwfrJRnoQpMzCSc_rTG7Vkoq-xU5iUyLhJBZc_1JTbyOleng2aGRrUowmY1EGHixdK6f-toTIDXQfs95SPqoLl6pPL2sign43gYuGE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnTLEpzURNRB703j_QI4Aqk6k6_fMAeass0KWY_R-OG9XcxtNX04NDUIYlhlC6zAWih9m0uHwX8jRNkuxrb_uCpGXcWj-5tbyLv0mQLlgLKQJn7b4vPT9HG5sTKdv-sxwnoMOA34MuRA/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth6HnJoLmH8gOBotDKPWoWvxoZqa2aQEUJra8ZacJ9HfhShaPJgolIn0tpEC-vLkFkoiocNpeuTwXX-cAPnv5tlfx9njsU8cGhnpCHS9_hJLg5wFttElUIahKJEYsU4lNf_1_lB1wLoY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNV8Oo8-94tAk2p1aCoj0vagWZ35AnxrJeWRAzYXLeLLKK54TdzOqm2WTpkab3l8jkKo3F3B9Q4rcixI8ToGpptAKhAfspGVGxtmm0qaC-snQfbJZ3-yafi8CYaI1YeOod0uAa1K9WFdo/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 nhận xét:
Đăng nhận xét