7/31/2018

settings_overscan print announcement
أهلا أصدقائي .. في هذا البرنامج التعليمي الخاص  بمكتبة OwlCarousel.js  والذي هو عبارة عن سلسلة من الدروس المبسطة التي سبق وشرحنا في السلسلة الأولة الخاصة بالإصدار 1.3.3 المواضيع التالية:

  1. -سلسلة دروس مكتبة OwlCarousel.js الإصدار 1.3.3
  2. -الدرس الأول // مكتبة OwlCarousel.js  الإصدار [1.3.3] تتيح لك إنشاء شريط تمرير دائري رائع الاستجابة.
  3. -الدرس الثاني // تركيب سلايدر شو تلقائي featured-slider بإستخدام مكتبة OwlCarousel-js الإصدار [1.3.3]
  4. -الدرس الثالث // تركيب أداة مقالات ذات صلة related article بإستخدام مكتبة OwlCarousel-js الإصدار [1.3.3]
  5. -الدرس الرابع // تركيب سلايدر مستعرض مواضيع ديناميكي Dynamic Slider بإستخدام مكتبة OwlCarousel-js الإصدار [1.3.3]

عليك مراجعتها حتى تتوسع عندك المدارك حول هذا المكون بصفة عامة وخصوصا الدرس الأول .





كما يعلم من تابعوا السلسلة الأولة كان الإصدار المستهدف في تلك الشروحات هو 1.3.3 والحمد لله كان عند حسن ظن الكثيرين  بدون تمييز لكن ليس بعد الآن بوجود الإصدار 2.3.4 الإحترافي نظرا لبنيته البرمجية و لما يحتويه هذا الأخير من ميزات نذكر منها أنه قابل للتخصيص بالكامل أكثر من 60 خيار معلمات. سهل للمستخدمين المبتدئين وأكثر قوة للمطورين المتقدمين..كما انه صمم خصيصا لتعزيز تجربة التصفح المحمول. يدعم السحب على الماوس بشكل رائع وعلى سطح المكتب أيضًا!..دعم للمتصفحات القديمة كما يمكنك فصل المكونات الإضافية التي لن تستخدمها في مشروعك أو إنشاء مكونات جديدة تناسب احتياجاتك..والمزيد تجده في الواجهة الرسمية للإصدار Owl Carousel 2


لمن لايعرف مكتبة Owl Carousel؟

تم اختيار Owl Carousel باعتباره المكوِّن المساعد jQuery رقم واحد من قبل مئات المطورين...الغرض من هذه المكتبة الرائعة حقن عنصر الإنزلاق في الأدوات والإضافات المراد تهيئتها أو إظهارها على شكل سلايدر شو  متحرك أي أن هذه المكتبة  تتيح لك إنشاء شريط تمرير دائري رائع الاستجابة..الآن حان الوقت لإصدار جديد يأتي مع الكثير من الميزات الجديدة .

support / jquery.OwlCarousel   1.3.3

  • 6+IE
  • 5+Chrome
  • 4+Firefox
  • 4+Safari
  • 10+Opera
  • all Browser
  • 2.2+android
  • all touch


لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب


close
حذاري!!..عليك حذف الأكواد القديمة الخاصة بالإصدار 1.3.3 هذا في حال قمت بتركيبه أو أي إصدار من هذا النوع .. قم بحذف أكواد .js و كذلك أكواد .css حتى لايقع أي تعارض.

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css التالي ..

  • 
    /*=====================================
    = OwlCarousel css
    =====================================*/
    /**
     * Owl Carousel v2.3.4
     * Copyright 2013-2018 David Deutsch
     * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
     */
    .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{overflow: hidden;display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button, .owl-carousel .owl-dots button{background:0 0;color:inherit;border:none;padding:0;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
    
    /** owl.theme.default.min.css**/
    .owl-bar,.owl-carousel .owl-dots,.owl-carousel .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-carousel .owl-nav{margin-top:10px}
    .owl-carousel .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;}.owl-carousel .owl-nav .disabled{opacity:.5;cursor:default}.owl-carousel .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-carousel .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-carousel .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px;-o-border-radius:30px;-ms-border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;}.owl-carousel 
    .owl-dots .owl-dot.active span,.owl-carousel .owl-dots .owl-dot:hover span{background:#f79029}
    .owl-bar .button{font-size: 35px;margin: 0 5px;color: #d6d6d6;cursor: pointer;line-height: 1em;}
    .owl-bar .button:hover, .owl-bar .button.active{color:#f79029}
    
    /** owl.my.theme **/
    /*----- buttons-----------*/
    .owl-carousel .owl-nav{margin-top:0;text-align:center;}
    .owl-carousel .owl-nav button.owl-prev{right:0;}
    .owl-carousel .owl-nav button.owl-next{left:0;}
    .owl-carousel .owl-nav [class*=owl-] {background: none;background-color: transparent !important;z-index: 9;position: absolute;margin: 0;top: 50%;overflow: hidden;}
    .owl-carousel .owl-nav button .fa{position:relative;overflow: hidden;width:40px;height:40px;line-height:40px;border:0;background-color:#f79029;color:#FFF;font-size:17px;text-align:center;}
    /*-----transition:all 0.5s---------*/
    .owl-carousel .owl-nav button .fa{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-ms-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;}
    /*-----translateY(-50%)---------*/
    .owl-carousel .owl-nav button{-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}
    /*-----translate-X--(-300px)---------*/
    .owl-carousel i.fa.fa-angle-left{-webkit-transform:translateX(-300px);-moz-transform:translateX(-300px);-o-transform:translateX(-300px);-ms-transform:translateX(-300px);t
    transform:translateX(-300px);transform:translateX(-300px);}
    /*-----translate-X--(300px)---------*/
    .owl-carousel i.fa.fa-angle-right{-webkit-transform:translateX(300px);-moz-transform:translateX(300px);-o-transform:translateX(300px);-ms-transform:translateX(300px);transform:translateX(300px);}
    /*-----translate-Y--(0)---------*/
    .owl-carousel:hover .owl-nav button .fa, .owl-carousel .owl-nav button:focus .fa,.owl-carousel .owl-nav button:hover .fa:after{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
    /*-----border-radius--(100%)---------*/
    .owl-carousel .owl-nav button .fa{border-radius:100%;-o-border-radius:100%;-ms-border-radius:100%;-moz-border-radius:100%;-webkit-border-radius:100%;}
    /*-----box-shadow--(prim)---------*/
    .owl-carousel .owl-nav button .fa{-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.26);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.26);-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.26);-o-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.26);-ms-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.26);}
    

    الكود #f79029 المحدد بهذا اللون هو اللون الرئيسي للأزرار قم بتغييره بمايناسب لون قالبك تجده مكرر ثلاث مرات
  • قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js' type='text/javascript'/> 
    

    الكود هو مكتبة للميزة OwlCarousel.js مستضاف في موقع خارجي جيد حتى لا نثقل على القالب بالأكواد - المرجع من هنا -
    في حالة لم يعمل ضعه اسفل <head> مع اكواد المكتبات والخطوط الخاصة بك  كما أنك تستطيع تحميل ملف المكتبة كنسخة إحتياطية على جهازك من خلال أداة التحميل في القائمة الجانبية ستجد عند إنتهاء التحميل داخل المجلد js ملفين لنفس المكتبة فقط الفرق في الملف الأول مضغوط بإسم owl.carousel.min.js والثاني بدون ضغط بإسم owl.carousel.js بالإضافة إلى نفس ملف الأنماط (الستايل) تجده داخل المجلد css
  •  الآن قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود.js التالي ..

  • 
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
      $('.owl-carousel').owlCarousel({
                      items: 4,       //عدد العناصر التي تريد رؤيتها على الشاشة.
                      margin: 0,       //الهامش اليمين (px) على البند.
                      loop:true,        //حلقة اللانهاية. تكرار العناصر الأخيرة والأولى للحصول على حلقة تمرير دائرية.
                      center:false,       //عنصر المركز. يعمل بشكل جيد مع حتى عدد فردي من العناصر.
                      mouseDrag:true,       //تمكين السحب الماوس.
                      touchDrag : true,     //المس السحب ممكن
                      nav: true,       //إظهار أزرار التالي / السابق.
                      dots: false,        //إظهار التنقل في النقاط.
                      autoplay:true,       //التشغيل التلقائي.
                      autoplayTimeout: 5000, //مهلة الفاصل الزمني التلقائي.
                      autoplayHoverPause:true, //mouse hover Stop يتوقف التشغيل التلقائي عند تمرير الفأرة
                      rtl:true,               //دعم الإتجاه العربي
                      responsive:{ //عدد العناصر التي تريد رؤيتها على مختلف الشاشات .
                         0:{
                         items:1,
                         loop:true
                         },
                         520:{
                         items:2,
                         loop:true
                         },
                         992:{
                         items:3
                         },
                         1200:{
                         items:3
                         },
                         1400:{
                         items:4
                         }
                      },
            navText: ['<i class="catch fa fa-angle-right"></i>','<i class="catch fa fa-angle-left"></i>'],
    });//owl-carousel end
    });
    //]]>
    </script>
    

    الكود هو ترتيب المعلمات للميزة OwlCarousel.js أي من خلاله سنستطيع التحكم في خصائص العرض وطريقة التمرير بكل سهولة مع العلم أن هناك عدة إعدادات لايمكن حصرها في تدوينة واحدة لكن بإذن الله سنريكم في الأجزاء القادمة مزيد من الميزات وضوابط العرض كما يمكنك مراجعة ذلك من خلال زيارة صفحة المعاينة الرسمية لهذا الإصدار OwlCarousel/demos  أما مانعرضه في الكود السابق يعتبر الإعدادات الإفتراضية للمعلمات والتي سنشرح خصائصها على النحو التالي ...
    التعديل على الكود
    الكود items المحدد بهذا اللون خاص بعدد العناصر المراد إظهارها في حالة العرض العادي للشاشة الكبيرة 4 تعني أربع مواضيع تستطيع الزيادة أو الإنقاص بشرط تعديل نفس الرقم الموجود في responsive الخاص بالشاشات الأخرى.
    الكود margin المحدد بهذا اللون يعمل على التحكم في مساحة الحافة أي البعد بين الموضوع والآخر القيمة 0 تعني معطل إذا وضعت مثلا الرقم 5 تعني حافة بقياس 5px  .
    الكود loop المحدد بهذا اللون خاص بعقدة التمرير حلقة اللانهاية. تكرار العناصر الأخيرة والأولى للحصول على حلقة تمرير دائرية. العلامة true تعني تشغيل والعلامة false تعني إيقاف .
    الكود center المحدد بهذا اللون عنصر المركز. يعمل بشكل جيد مع حتى عدد فردي من العناصر. العلامة true تعني تشغيل والعلامة false تعني إيقاف .
    الكود mouseDrag المحدد بهذا اللون تمكين السحب بالماوس. العلامة true تعني تشغيل والعلامة false تعني إيقاف.
    الكود touchDrag المحدد بهذا اللون تمكين اللمس للسحب. العلامة true تعني تشغيل والعلامة false تعني إيقاف.
    الكود nav المحدد بهذا اللون خاص بإظهار زر التمرير الأيمن والأيسر العلامة true تعني تشغيل والعلامة false تعني إيقاف.
    الكود dots المحدد بهذا اللون إظهار التنقل من خلال النقاط أو أزرار ترقيم الصفحات العلامة true تعني تشغيل والعلامة false تعني إيقاف.
    الكود autoplay المحدد بهذا اللون يعمل على سماح تحرك السلايدر العلامة true تعني تشغيل والعلامة false تعني إيقاف.
    الكود autoplayTimeout المحدد بهذا اللون خاص بمدة تمرير المحتوى في حالة التشغيل...القيمة 5000 تعتبر جيدة وسلسة تستطيع الزيادة أو الإنقاص بما يناسبك.
    الكود autoplayHoverPause المحدد بهذا اللون يعمل على توقيف تمرير المحتوى عند مرور زر الفأرة العلامة true تعني تشغيل والعلامة false تعني إيقاف.
    الكود rtl المحدد بهذا اللون دعم الإتجاه العربي العلامة true تعني تشغيل والعلامة false تعني إيقاف شاهد المثال من هنا.
    الكود responsive المحدد بهذا اللون خاص بالتجاوب أي عدد العناصر أو المواضيع المراد عرضها في كل شاشة جهاز على سبيل المثال
    القيمة 0 تعني أبعاد الشاشة أي بدءا من أصغر شاشة وصولا إلى شاشات بعرض 520px (عدد المواضيع التي يتم عرضها في هذا الإطار هي 1) لاحظ أنه يوجد علامة loop:true داخل حاوية هذا الإطار بما معناه أضهر كذلك حلقة اللانهاية.. تستطيع حذفها او ادخال علامات أخرى.
    مثال آخر القيمة 1400 تعني أبعاد الشاشة أي من جهاز laptop وصولا إلى شاشات سطح المكتب (عدد المواضيع التي يتم عرضها في هذا الإطار هي 4) نفس الفكرة بالنسبة لبقية الإعدادات.
    الكود navText المحدد بهذا اللون يحمل أيقونات زر التمرير الأيمن والأيسر تستطيع إستعمال بدائل أخرى مثلا..
    أزرار تحتوي على نص تكون العلامة بالشكل التالي
    
     navText: ['التالي','السابق'] 
    

    أزرار تحتوي على أيقونات fontawesome كون العلامة بالشكل التالي
    
     navText: ['<i class="catch fa fa-angle-right"></i>','<i class="catch fa fa-angle-left"></i>'] 
    

    أزرار تحتوي على أيقونات بصيغة svg تكون العلامة بالشكل التالي
    
     navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>','<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'] 
    


    close
    حذاري!!..عند مراجعتك للمواضيع السابقة صحيح أنك ستجد الفكرة واحدة بين كل الإصدارات لكن لاتقم بإستعمال معلمات الإصدار القديم 1.3.3 على هذه المكتبة لأنها مختلفة في أغلبها لاحظ وقارن بينهما



مشروع بسيط يظهر إمكانيات مكتبة OwlCarousel.js الإصدار [2.3.4]


add_commentإرسال تعليق

  1. السلام عليكم صديقي .. كيف حالك .. إذا سمحت ممكن ان تقوم بعمل لي سكريبت خاص ب postbylabel سلايدر ولكن يعمل بتسمية .
    col-xl-6 وشكراً لكَ سلفاً

    ردحذف
    الردود
    1. مرحبا بك أخي العزيز ABOUHILAL BADR =(
      لقد سبق وشرحنا هذا الموضوع في السلسلة الخاصة بمكتبة owlcarousel.js
      طلبك ستجده في المرجع التالي ==> إضغط هنا
      تأكيد / يمكن تخصيص هذا السلايدر ليعمل على إظهار مواضيع على حسب التسميات من خلال وضع ( 10/التسمية )

      حذف
    2. ألسلام عليكم صديقي ... شكراً لتذكيري بهذه المقالة =(
      ---> سؤال هل من الممكن ربط قاعدة بيانات sign up و sign in في بلوجر ؟
      وشكراً لإهتمامك :guitarist:

      حذف
    3. مرحبا..هذا السؤال صعب الإجابة عليه :Q لماذا؟؟؟؟
      1-إفتراضيا هذا مستحيل لأن بلوجر ليست مصممة لإنشاء قاعدة بيانات تسجيل الدخول/ مايعرفه اغلب المدونين هو عن طريق نموذج إضافة مؤلفين..حسنا.
      2-برمجيا مع كل الإحتمالات والخدمات المتوفرة أجل يمكن ذلك / مثلا عن طريق منصة google app script يمكن تحقيق المستحيل / تكمن الفكرة في صنع نموذج تسجيل دخول عادي ثم نربطه بقاعدة بيانات التطبيق ليسمح لنا بالولوج إلى منصة المستخدم التى نقوم نحن بتصميمها ونضع فيها ميزات وهدايا الخ..ربما يبدوا هذا ضربا من الخيال لكن صدقني في ما اقول ..ترقب التدوينة القادمة حول ما يمكن عمله من خلال منصة google app script. ;)

      حذف
    4. حقاً رأي مقنع جميل وجود مدونة مثلك في عالمنا العربي بالتوفيق لك ;)

      حذف
    5. عيد مبارك عليك اخي عبد القادر ننتظر هدية العيد :imhere: :rolled:

      حذف
  2. موضوع رائع لكن هل من الممكن جعله يعمل من خلال التسميات ؟

    ردحذف
    الردود
    1. طلبك ستجده في المرجع التالي ==> إضغط هنا
      تأكيد / يمكن تخصيص هذا السلايدر ليعمل على إظهار مواضيع على حسب التسميات من خلال وضع ( 10/التسمية )

      حذف