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/AVvXsEi0_tgL1JoD1vbyQRKHamSiXSjHlhtxAzDyZtx4l6gtjeuSnqWoxfWb2UOE53LxKcd5E79DG1YRPxo92oZOU97-fEiEjRRMzJO5kzIOtNDhUf2Bq8RJZ3MMV5OIFk5zssYzlfVRmULKaIQ/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKI0Ij-GQYj8OTpcFm1ml-MkeSZXHi4fghjCuZi6JqvIXWy0dpBZkdct4oqT_StPBI0T5myizKe6KqeylvgFryH3KPoFGOQpQOJFiIo8r6ZLoscajf74iLU5yOyovCbqdkwwmXvytovLo/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPe-U9_FIXF3fHK7USUu6yX0Ucvctlm64nT_X5KbOjpZwuo-CT2HtkjM-LSsjKZOPqC_KufC4GJlMRq0xggfMm9pXQZJY0MZN9iNtiTSJdDverRbR-sH1zC3oWbd6e8pZM7wgmSP24orI/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYRo_tkmXoCj0XUOmlkJl3WE-ob1U8vwaWH0-sGDT_BN6cBtdT88CoetCKKpbai4x5vfV3RQuJ606K1c2z0yCznheQKiTJ-Zr7S5_BDQR0W6H8OCddEh7xgW1xfVClK8Ju4PEqwinxaU/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/AVvXsEhqdmXZ9BJsRW6fpzyj_32WXhzuPEmIJ6fQiIf8zhZjgrd9Qn29JMy5ux3F_Xgj3D0Q3QWrnge7ABELC8DZvuoYPjx63uA0fse2lgO9jPBu49J_l1xmNF09nI72wXc7JcbFckobWFIK3KM/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTXsx_vav1nU1X4RA6oYxsdCKRf79IXKwoC7BNBhEv6f61ddmqR9x_cb1BMowI-4vsOmxFZ16C7geJk6bkEboCAZ7aFnF7uy8bTHzMd7eTPKnd6OI03d9aEKUBZ2EaWrV1wa1Z2c-VUsw/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyH-FP6kwTNBgRR6Ooiq8wJ-l3tDPxQDMiw58zAl04flk5JFJA7Y61oVR__qhHxiBWPYw_6aeTUJK_0sEkC2BRcI06OnExCTsMeKmNE4YDw_QzqDROtjn4pSqL23o_bwchmDb-CpKoIpE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMfmPpVBZiSUsGNOaFkqJnTC2tpKnO9gSyGXlA82SG-MVNeq10cAe2r9HH4gkyCt_lrzYbRlieip0LIQlOQOmzTCVVmbgpklPabw34c9_l-mLjPuBUDKlEc3t9tjrIYC-bNris05FU3A/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipokhU408CBnPYeOu63-l0dtwGVHL7MlUav87M9uTZ2F2JPM-REMYUJToTdNO67uZ92DPGR5BgRdXh4C-hVIfD1lLA1S2YMy16RKtyvthGSnvHrJ31UojAxRLKQoAfj278XrsFzsaGHtg/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSsEFRq3MbmP3AJJszZ9NdArv7H56IP_EtrIP0vpYX453hK6caUhp-xTPsecrNkP0-EPSUfpQG2on_VFAughxpwPBspUT241fOLrhGlvg-IQVyGh12tHngTIw3ANTqs_MkXDHOqCyRhPE/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtbHWnp4guhx6nnLg-TkcbV4NRUaZBXOYO-M_2VCzh7OavOFXxMN7YlbfsfmYlGE8nR6s5QPrMjc2LemRU9eOz_czpDpaXIJVlxHs1rjtUfp7bdKvQLtQ2xmI7Rz4YSJwLTh5PFSYkBYs/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU3tBrCNI4y3-dOw05KW-Cr23cMzORlnOvZLruJkFRJDgqTjcLqZYguVDfGQ7VVwOAEulNTgt6ICNQNw8qTQfB-asMbXzrY-Yb2dTdvww9VSgqwQcoMYvqk4MMzb8NYtozhJ-1r4ofWTI/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFf9WGK80Oehp3wmBFHEsKtvvpt1gc18U5-qHMhpvcWr_kjrPogeB57liJTDQ2LawJgwWlWRhCibF0hCy_w3NSYUodnkoD-b1_bQfOq7stBaMgwaUOyOC_a7NYIX04oN6roYtsOD-RVk/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIE4kiSSeoFmXAMG4oafvjVGf2-tuXPzJLiG_2jtqRx3UMsSab5CIaerHDG40flv6IatqM_B2X1p7a4gd6lDMdttZKoxnYc50NTZqRExfJ86jQSGo7_iu3a62rNuXqQWbox57XHvoKG0E/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsVVrarxQwVoFeuQiYcZonMENuZ43jW46tElCXIRJwIe51LArUNj_j51ar0VCjUMYE5fvzBuxyK9P5mfulcGwZ_RJFUuXffJYSMpauYI0QEP9MC7vGCnY0Om-xYcfj2coY4lTEoUCDRk/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuD_68pKeJSHwnJYM7oiQe2x4ztqiPoGEdjAE9gQZC4ALZJMfkUxTqyGTpjnsFdGg3eZMSvLKWNGNZEhJbsHCzd4NH-hp5nFqA5tIIp93xo5BpJQ7Qg5YsxzGlU163wImLuhS6ezgNSX4/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyH-FP6kwTNBgRR6Ooiq8wJ-l3tDPxQDMiw58zAl04flk5JFJA7Y61oVR__qhHxiBWPYw_6aeTUJK_0sEkC2BRcI06OnExCTsMeKmNE4YDw_QzqDROtjn4pSqL23o_bwchmDb-CpKoIpE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSsEFRq3MbmP3AJJszZ9NdArv7H56IP_EtrIP0vpYX453hK6caUhp-xTPsecrNkP0-EPSUfpQG2on_VFAughxpwPBspUT241fOLrhGlvg-IQVyGh12tHngTIw3ANTqs_MkXDHOqCyRhPE/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdmXZ9BJsRW6fpzyj_32WXhzuPEmIJ6fQiIf8zhZjgrd9Qn29JMy5ux3F_Xgj3D0Q3QWrnge7ABELC8DZvuoYPjx63uA0fse2lgO9jPBu49J_l1xmNF09nI72wXc7JcbFckobWFIK3KM/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuD_68pKeJSHwnJYM7oiQe2x4ztqiPoGEdjAE9gQZC4ALZJMfkUxTqyGTpjnsFdGg3eZMSvLKWNGNZEhJbsHCzd4NH-hp5nFqA5tIIp93xo5BpJQ7Qg5YsxzGlU163wImLuhS6ezgNSX4/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/AVvXsEi0_tgL1JoD1vbyQRKHamSiXSjHlhtxAzDyZtx4l6gtjeuSnqWoxfWb2UOE53LxKcd5E79DG1YRPxo92oZOU97-fEiEjRRMzJO5kzIOtNDhUf2Bq8RJZ3MMV5OIFk5zssYzlfVRmULKaIQ/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKI0Ij-GQYj8OTpcFm1ml-MkeSZXHi4fghjCuZi6JqvIXWy0dpBZkdct4oqT_StPBI0T5myizKe6KqeylvgFryH3KPoFGOQpQOJFiIo8r6ZLoscajf74iLU5yOyovCbqdkwwmXvytovLo/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPe-U9_FIXF3fHK7USUu6yX0Ucvctlm64nT_X5KbOjpZwuo-CT2HtkjM-LSsjKZOPqC_KufC4GJlMRq0xggfMm9pXQZJY0MZN9iNtiTSJdDverRbR-sH1zC3oWbd6e8pZM7wgmSP24orI/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLYRo_tkmXoCj0XUOmlkJl3WE-ob1U8vwaWH0-sGDT_BN6cBtdT88CoetCKKpbai4x5vfV3RQuJ606K1c2z0yCznheQKiTJ-Zr7S5_BDQR0W6H8OCddEh7xgW1xfVClK8Ju4PEqwinxaU/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/AVvXsEhqdmXZ9BJsRW6fpzyj_32WXhzuPEmIJ6fQiIf8zhZjgrd9Qn29JMy5ux3F_Xgj3D0Q3QWrnge7ABELC8DZvuoYPjx63uA0fse2lgO9jPBu49J_l1xmNF09nI72wXc7JcbFckobWFIK3KM/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTXsx_vav1nU1X4RA6oYxsdCKRf79IXKwoC7BNBhEv6f61ddmqR9x_cb1BMowI-4vsOmxFZ16C7geJk6bkEboCAZ7aFnF7uy8bTHzMd7eTPKnd6OI03d9aEKUBZ2EaWrV1wa1Z2c-VUsw/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyH-FP6kwTNBgRR6Ooiq8wJ-l3tDPxQDMiw58zAl04flk5JFJA7Y61oVR__qhHxiBWPYw_6aeTUJK_0sEkC2BRcI06OnExCTsMeKmNE4YDw_QzqDROtjn4pSqL23o_bwchmDb-CpKoIpE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbMfmPpVBZiSUsGNOaFkqJnTC2tpKnO9gSyGXlA82SG-MVNeq10cAe2r9HH4gkyCt_lrzYbRlieip0LIQlOQOmzTCVVmbgpklPabw34c9_l-mLjPuBUDKlEc3t9tjrIYC-bNris05FU3A/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipokhU408CBnPYeOu63-l0dtwGVHL7MlUav87M9uTZ2F2JPM-REMYUJToTdNO67uZ92DPGR5BgRdXh4C-hVIfD1lLA1S2YMy16RKtyvthGSnvHrJ31UojAxRLKQoAfj278XrsFzsaGHtg/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSsEFRq3MbmP3AJJszZ9NdArv7H56IP_EtrIP0vpYX453hK6caUhp-xTPsecrNkP0-EPSUfpQG2on_VFAughxpwPBspUT241fOLrhGlvg-IQVyGh12tHngTIw3ANTqs_MkXDHOqCyRhPE/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtbHWnp4guhx6nnLg-TkcbV4NRUaZBXOYO-M_2VCzh7OavOFXxMN7YlbfsfmYlGE8nR6s5QPrMjc2LemRU9eOz_czpDpaXIJVlxHs1rjtUfp7bdKvQLtQ2xmI7Rz4YSJwLTh5PFSYkBYs/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU3tBrCNI4y3-dOw05KW-Cr23cMzORlnOvZLruJkFRJDgqTjcLqZYguVDfGQ7VVwOAEulNTgt6ICNQNw8qTQfB-asMbXzrY-Yb2dTdvww9VSgqwQcoMYvqk4MMzb8NYtozhJ-1r4ofWTI/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFf9WGK80Oehp3wmBFHEsKtvvpt1gc18U5-qHMhpvcWr_kjrPogeB57liJTDQ2LawJgwWlWRhCibF0hCy_w3NSYUodnkoD-b1_bQfOq7stBaMgwaUOyOC_a7NYIX04oN6roYtsOD-RVk/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIE4kiSSeoFmXAMG4oafvjVGf2-tuXPzJLiG_2jtqRx3UMsSab5CIaerHDG40flv6IatqM_B2X1p7a4gd6lDMdttZKoxnYc50NTZqRExfJ86jQSGo7_iu3a62rNuXqQWbox57XHvoKG0E/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZsVVrarxQwVoFeuQiYcZonMENuZ43jW46tElCXIRJwIe51LArUNj_j51ar0VCjUMYE5fvzBuxyK9P5mfulcGwZ_RJFUuXffJYSMpauYI0QEP9MC7vGCnY0Om-xYcfj2coY4lTEoUCDRk/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuD_68pKeJSHwnJYM7oiQe2x4ztqiPoGEdjAE9gQZC4ALZJMfkUxTqyGTpjnsFdGg3eZMSvLKWNGNZEhJbsHCzd4NH-hp5nFqA5tIIp93xo5BpJQ7Qg5YsxzGlU163wImLuhS6ezgNSX4/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyH-FP6kwTNBgRR6Ooiq8wJ-l3tDPxQDMiw58zAl04flk5JFJA7Y61oVR__qhHxiBWPYw_6aeTUJK_0sEkC2BRcI06OnExCTsMeKmNE4YDw_QzqDROtjn4pSqL23o_bwchmDb-CpKoIpE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSsEFRq3MbmP3AJJszZ9NdArv7H56IP_EtrIP0vpYX453hK6caUhp-xTPsecrNkP0-EPSUfpQG2on_VFAughxpwPBspUT241fOLrhGlvg-IQVyGh12tHngTIw3ANTqs_MkXDHOqCyRhPE/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdmXZ9BJsRW6fpzyj_32WXhzuPEmIJ6fQiIf8zhZjgrd9Qn29JMy5ux3F_Xgj3D0Q3QWrnge7ABELC8DZvuoYPjx63uA0fse2lgO9jPBu49J_l1xmNF09nI72wXc7JcbFckobWFIK3KM/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuD_68pKeJSHwnJYM7oiQe2x4ztqiPoGEdjAE9gQZC4ALZJMfkUxTqyGTpjnsFdGg3eZMSvLKWNGNZEhJbsHCzd4NH-hp5nFqA5tIIp93xo5BpJQ7Qg5YsxzGlU163wImLuhS6ezgNSX4/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
Không có nhận xét nào:
Đăng nhận xét