شاشة الإنتظار

لغة القالب

سلايدر صور خفيف سهل الإستخدام

Admin
الخميس, ديسمبر 29, 2022

 معظم أدوات السلايدشو تعتمد على مكتبات ضخمه لكي تعمل ويحدث غالباً تعارض بينها وبين ملفات في القالب , إضافة انها تتطلب توزيع في القالب لتعمل بشكل مضبوط ولا تصلح للإستخدام مباشرة في آداة أو موضوع 

لكن السلايدر الذي معنا اليوم هو يعتبر خفيف وسهل الإستخدام ولا يتطلب توزيع في القالب ولن يتعارض مع معظم القوالب

سلايدر خفيف سهل الإستخدام

أضف الكود في صفحة أو موضوع أو آداة HTML/JavaScript
<style> 
#cnmuSSlid{width:100%;margin:0 auto 20px;background-color:#fff;height:500px;overflow:hidden;position:relative;}  
@keyframes cnmuSSlid-key-next{0%{left:100%;}100%{left:0;}}
@keyframes cnmuSSlid-key-left{0%{left:0;}100%{left:-100%;}}
@keyframes cnmuSSlid-key-previous{0%{left:-100%;}100%{left:0;}}
@keyframes cnmuSSlid-key-right{0%{left:0;}100%{left:100%;}}
#cnmuSSlid  ul,#cnmuSSlid li{list-style:none;margin:unset;padding:unset;}
#cnmuSSlid li::before,#cnmuSSlid li::after{display:none;}
#cnmuSSlid  ul  li{position:absolute;left:100%;top:0;width:100%;height:100%;visibility:hidden;animation-timing-function:ease-in-out;animation-fill-mode:forwards;}
#cnmuSSlid  ul  li.active{visibility:visible;left:0;}
#cnmuSSlid  ul  li.left{animation-name:cnmuSSlid-key-left;}
#cnmuSSlid  ul  li.next{animation-name:cnmuSSlid-key-next;}
#cnmuSSlid  ul  li.right{animation-name:cnmuSSlid-key-right;}
#cnmuSSlid  ul  li.previous{animation-name:cnmuSSlid-key-previous;}
#cnmuSSlid ul li a{margin:0!important;padding:0!important;display:block;width:100%;height:100%;}
#cnmuSSlid ul li img{display:block;height:100% !important;width:100% !important;max-width:100% !important;}
#cnmuSSlid ul li strong{position:absolute;bottom:0;font-weight:normal;color:#fff;padding:20px 10px;box-sizing:border-box;width:100%;text-align:center;background-color:rgba(0,0,0,.7);}
#cnmuSSlid button{position:absolute;top:calc(50% - 24px);border:0;background-color:#fff;opacity:.7;width:48px;cursor:pointer;height:48px;line-height:48px;font-size:24px;border-radius:100%;transition:all .4s ease;color:#000;}
#cnmuSSlid  button:hover{opacity:1;}
.BTlef{left:10px;}
.BTRig{right:10px;}
@media screen and (max-width : 600px) {#cnmuSSlid{height:300px;}}  
@media screen and (max-width : 400px) {#cnmuSSlid{height:260px;}}    
</style>

<div id="cnmuSSlid">
<ul>

<li>
<a href="#">  
<img src="*">
<strong>العنوان الظاهر على الصورة</strong>  
</a>  
</li>

</ul>
  
<button class="BTlef">❯</button>
<button class="BTRig">❮</button>
</div>

<script type="text/javascript">
//<![CDATA[
function cnmuSSlids(o){"use strict";var time=o.time||500,autoTime=o.autoTime||5e3,selector=o.selector,width_height=o.width_height||100/70,cnmuSSlids=document.querySelectorAll(selector),i;function css(elm,prop,val){elm.style[prop]=val;prop=prop[0].toUpperCase()+prop.slice(1);elm.style["webkit"+prop]=elm.style["moz"+prop]=elm.style["ms"+prop]=elm.style["o"+prop]=val}function anonimFunc(cnmuSSlid){var buttonLeft=cnmuSSlid.children[2],buttonRight=cnmuSSlid.children[1],ul=cnmuSSlid.children[0],li=ul.children,activeIndex=0,isAnimate=false,i,s;ul.style.paddingTop=100/width_height+"%";for(i=0;i<li.length;i+=1){css(li[i],"animationDuration",time+"ms")}li[activeIndex].classList.add("active");function left(){if(isAnimate){return}clearTimeout(s);isAnimate=true;var nextIndex=activeIndex<li.length-1?activeIndex+1:0;li[nextIndex].classList.add("next");li[activeIndex].classList.add("left");li[nextIndex].classList.add("active");setTimeout(function(){li[activeIndex].classList.remove("active");li[activeIndex].classList.remove("left");li[nextIndex].classList.remove("next");li[nextIndex].classList.add("active");activeIndex=nextIndex;isAnimate=false;s=setTimeout(left,autoTime)},time)}function right(){if(isAnimate){return}clearTimeout(s);isAnimate=true;var nextIndex=activeIndex>0?activeIndex-1:li.length-1;li[nextIndex].classList.add("previous");li[activeIndex].classList.add("right");li[nextIndex].classList.add("active");setTimeout(function(){li[activeIndex].classList.remove("active");li[activeIndex].classList.remove("right");li[nextIndex].classList.remove("previous");li[nextIndex].classList.add("active");activeIndex=nextIndex;isAnimate=false;s=setTimeout(right,autoTime)},time)}buttonLeft.addEventListener("click",left);buttonRight.addEventListener("click",right);s=setTimeout(right,autoTime)}for(i=0;i<cnmuSSlids.length;i+=1){anonimFunc(cnmuSSlids[i])}}
var cnmuSSlids=new cnmuSSlids({selector:"#cnmuSSlid",time:500,autoTime:3000,width_height:350/250});
//]]>
</script>

الإستخدام

رقم 500 بالأحمر عدله بالإرتفاع الذي تريده
رقم 3000 بالأزرق هذه سرعة السلايدر عدلها بما تريد كل 1000 تساوي ثانية واحده يعني هذا الرقم يعني ثلاث ثوان
الكود الأخضر هو كود الصورة ويحتوي على :
رمز # هو الرابط المراد فتحه عند الضغط عليها
رمز * هو رابط الصورة
وطبعا عدل الجملة المكتوبه بما تريد
كرر الكود الأخضر من بدايته لنهايته لتحصل على صورة جديدة

معاينة


تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. أزال المؤلف هذا التعليق.

    ردحذف
  2. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. أهلا بك أخي الكريم
      1- طالما تدوين , بلوجر أفضل أما لو ستحتاج برمجيات بيع أو شراء او أمور اخرى غير التدوين حينها ووردبريس أفضل
      2- امتلاكك دومين مدفوع يعتبر حل لمسالة الملكية لانك ممكن تأخذ نسخة من المدونة حتى لو حذفت تستطيع انشاء واحده على نفس الدومين بنفس المحتوى لكن في أمر الملكية ووردبريس أفضل لكن تكلفتها اعلى , طالما مدونتك لا تخالف قوانين جوجل حتى لو حذفت بالخطأ تستطيع استعادتها , مدونتي لها 10 سنوات حذفت مرة بالخطأ واستعدتها وهناك مئات من مدونات ووردبريس أغلقت وانتهت من على الإنترنت بسبب التكاليف في حين مدونتي ما تزال تعمل ولله الحمد
      3- واحده في البداية بعد سنة على الأقل يمكنك حينها ان تفكر في واحده أخرى حتى تضمن ان لديك وقت كافي لإنشاء أكثر من واحده وادارتها
      والعفو أخي الكريم وأتمنى ان اكون قد اجبتك وبالتوفيق

      حذف
  3. السلام عليكم استاذ
    والله صراحة هذا ما أحب
    بارك الله فيك وجزاك الله خيرا
    هل يظهر في صفحة المواضيع ، حبذا لا يظهر، سأجربه

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      مرحباً يا غالي
      هذا الموضوع سيفيدك في الأمر
      https://www.cnmu.info/2022/03/Hide-Widgets.html

      حذف
  4. جربته رووووعة لكن السلايد يظهر على المواضيع فكيف أقوم بإلغائه على المواضيع فقط أستاذي الغالي ؟
    ما أروعك ♥

    ردحذف
    الردود
    1. تفضل يا غالي هذا الموضوع به شرح وتوضيح لهذا الأمر
      https://www.cnmu.info/2022/03/Hide-Widgets.html
      موفق ان شاء الله أخي الحبيب

      حذف
  5. الردود
    1. التلقائي أكواده تكون أكبر , وتحتاج توزيع في القالب ويشكل كثيراً تعارض في بعض القوالب
      لذلك انا لا أصنح بالسلايدرات التلقائية كإضافة ولكن ان تكون في أصل بنية القالب هذا يزيل التعارض او الثقل لان المصمم يضع السلايدر في حسبانه وقت التكويد
      انا تكلمت عن هذا سابقاً في الموضوع التالي
      https://www.cnmu.info/2019/09/Blogger-Widgets.html
      هذا السلايدر مناسب أكثر للتركيب على أى قالب دون اثقاله ويمكن استخدامه لأى شئ ليس فقط أن يكون للمواضيع

      حذف
  6. ما شاء الله استاذ عمرو اضافة مميزة دائما تبهرنا بمواضيعك المميزة علي كن مدون

    ردحذف
    الردود
    1. سعيد أن الإضافة أعجبتك أستاذ علي بالتوفيق يا غالي

      حذف

عدد المواضيع