سلايد شو متحرك احترافي محول بروابط دائمة
السلام عليكم ورحمة الله وبركاته
اقدم لكم سلايدر شو احترافي
صورة للسلايدر
طريقة التركيب
يضاف الكود الاتي الى أي مكان يقبل html
تشكيلات عامة - اعلانات خاصة - قوالب تومبلايت
يضاف الجافا بقالب overall_footer_end
ببدايته
الكود:نسخ الكود
اما الكلاسات دة يضاف كما شرحنا بالمكان الذي ترغبون فيه
الكود:نسخ الكود
ثم تضيف ورقة css
الكود:نسخ الكود
ومن ثم تذهب عناصر اضافية
إدارة أكواد Javascript
وتنشأ عنصر جديد
الصفحات جميع الصفحات
العنوان أي شئ
وتضع الجافا الموجود بالمرفقات وانشر
دمتم سالمين
السلام عليكم ورحمة الله وبركاته
اقدم لكم سلايدر شو احترافي
صورة للسلايدر
طريقة التركيب
يضاف الكود الاتي الى أي مكان يقبل html
تشكيلات عامة - اعلانات خاصة - قوالب تومبلايت
يضاف الجافا بقالب overall_footer_end
ببدايته
الكود:نسخ الكود
الكود:
<script type="text/javascript">$(document).ready(function() { $('#foo1').carouFredSel({ auto: {pauseDuration: 5000, delay: 375}, prev: '#foo1_prev', next: '#foo1_next', pagination: "#foo1_pag", });$('#foo2').carouFredSel({ auto: {pauseDuration: 5000, delay: 375}, prev: '#foo2_prev', next: '#foo2_next', pagination: "#foo2_pag", }); });</script> <script type="text/javascript" language="javascript"> $(function() { $('#foo2').carouFredSel({ auto: true, prev: '#prev2', next: '#next2', pagination: false, mousewheel: true, swipe: { onMouse: true, onTouch: true } }); }); </script>اما الكلاسات دة يضاف كما شرحنا بالمكان الذي ترغبون فيه
الكود:نسخ الكود
الكود:
<br /><div class="slider-sh"><div class="br-cl"></div><div class="titel-slide"><strong>.:: حصريات المنتدى ::.</strong></div><div class="br-cl"></div> <div style="width: 980px;margin: 0px auto;height: 190px;overflow: hidden;"><div class="image_carousel"> <div id="foo1"> <!-- المجموعة الأولى --> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <a href="#"><img src="https://i.servimg.com/u/f37/16/46/77/76/toon1410.png" alt="اسم الموضوع" width="220"height="150"></a> <!-- نهاية المجموعة الأولى --> </div> <div class="clearfix"></div> <a class="prev" id="foo1_prev" href="#"><span>prev</span></a> <a class="next" id="foo1_next" href="#"><span>next</span></a> <div class="pagination" id="foo1_pag"></div></div></div> </div> ثم تضيف ورقة css
الكود:نسخ الكود
الكود:
.titel-slide { background: #222 none repeat scroll 0 0; display: block; height: 28px; margin: 0 auto; padding-top: 12px; text-align: center; width: auto;}.titel-slide strong { color: #fff; font-family: arial,sans-serif; font-size: 16px; line-height: 1; margin-right: -55px;}.titel-slide i { color: #fff; display: inline-block; float: right; font-family: "Batch"; font-size: 21px; font-style: normal; font-weight: bolder; height: 28px; line-height: 0.7; margin-top: -12px; padding-top: 12px; text-align: center; width: 40px;} .image_carousel { padding-right: 3px; position: relative;}.image_carousel a { display: block; float: left;}.image_carousel img { background-color: #fff; border: 1px solid #ccc; display: block; float: left; margin: 5px; padding: 6px;}.image_carousel img:hover { border: 1px solid #ddd; box-shadow: 0 1px 5px #555;}.image_carousel:hover > a.prev { left: 20px; opacity: 1; overflow: visible;}.image_carousel:hover > a.next { opacity: 1; overflow: visible; right: 20px;}a.prev, a.next { cursor: pointer; opacity: 0; overflow: hidden; transition: all 0.5s ease 0s;}a.prev { background-image: url("https://i.servimg.com/u/f37/16/46/77/76/left10.png"); background-repeat: no-repeat; display: block; height: 40px; left: -32px; position: absolute; top: 90px; width: 40px;}a.next { background-image: url("https://i.servimg.com/u/f37/16/46/77/76/right10.png"); background-repeat: no-repeat; display: block; height: 40px; position: absolute; right: -32px; top: 90px; width: 40px;}a.prev:hover, a.next:hover { opacity: 0.7 !important;}a.prev span, a.next span { display: none;}.pagination { text-align: center;}.pagination a { display: inline-block; float: none; height: 15px; margin: 0 5px 0 0; width: 15px;}.pagination a.selected { background-color: #5490cc; background-position: -25px -300px; cursor: default;}.pagination a span { display: none;} .titel-slide, .pagination a, a.prev, a.next, .nav-tab { background-color: #444;}.slider-sh { background: #222 none repeat scroll 0 0; border: 1px solid #222; margin: auto; }ومن ثم تذهب عناصر اضافية
إدارة أكواد Javascript
وتنشأ عنصر جديد
الصفحات جميع الصفحات
العنوان أي شئ
وتضع الجافا الموجود بالمرفقات وانشر
دمتم سالمين
