اضافة سلايدر شو ديناميكي عرض مواضيع حسب التسمية -owl coursal

زينو ثك
زينو ثك

مبرمج و مطور ويب مهتم في مجال بلوجر ونشر المكونات الإضافية(إضافات)


السلام عليكم من جديد في هذا المقال أو قد أسميه درس بحيث سأقدم لكم اضافة سلايدر شو اعتمادا بمكتبة owl coursal والتي هي مكتبة
غنية عن التعريف ان مطور ستعرف ما دور هذه المكتبة , ان كنت لاتعرف عنها سأحاول أن أختصر تعريفها لك .
مكتبة owl coursal هي مكتبة كـ : Bootstrap و materializecss ...الخ , تقدم لك سلايدر شو بأشكال و بخصائص مختلفة والتي قد
تسهل عليك في بنائها دون عنا ماعليك سوى تخصيص لكن المشكلة التي قد تواجهك وهي أن السلايدر شو اتجاهه ltr ليس rlt => والتي من اليمين الى اليسار لكن قمت بتعديل السلايدر وجعلته من ltr الى rtl وقد قمت بتطوير سلايدر شو ديناميكي بمعنى استخدمت json feeds api , لكي لا نطيل الشرح سأقدم لكم طريقة تركيب السلايدر في مدونتك .

شرح طريقة التركيب :

أولا ستذهب الى بلوجر ثم المظهر ثم ابحث عن /b:skin و الصق الكود التالي  فوقه مباشرة : 

:root{
 --color-owl-slider:#3d5afe;/*--[ لون أزرار السلايدر ]--*/
}
#DaynamicSlider {
    position: relative;
    overflow: hidden;
    margin:0 auto;
    padding: 0.1em;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#DaynamicSlider .customNavigation {
    padding: 1rem;
    display: block;
    margin: 0 auto;
    width: 100%;
}
#DaynamicSlider .customNavigation a.btn {
    text-align: center;
    display: inline-block;
    background: #fff;
    padding: 1px 7px;
    width: 37px;
    padding-top: 3px;
    -webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 29%);
            box-shadow: 0 0 5px 0 rgb(0 0 0 / 29%);
    border-radius: 4px;
}
#DaynamicSlider .customNavigation a.btn svg {
    fill: var(--color-owl-slider);
    width: 20px;
    height: 20px;
}
.post-summery {
    width: auto;
    background: #f8f8f8;
    padding: 0;height: 270px;
    margin:5px;-webkit-box-shadow: 0 0 5px 0 rgb(0 0 0 / 29%);box-shadow: 0 0 5px 0 rgb(0 0 0 / 29%);
}
.post-summery .post-img {
    width: auto;
    overflow: hidden;
    display: block;
}
.post-summery .post-img img {
    vertical-align: middle;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;
    background-size: cover;
    width: auto;
    height: auto!important;
}
.post-summery .post-infoo {
    padding:5px 1rem;
    width: 100%;
    overflow: hidden;
}
.post-summery .post-infoo svg {
    fill: #48525c;
    width: 15px;vertical-align: sub;
    height: 15px;margin: 0 5px;
}
.post-summery .post-img img:hover {
    -webkit-transform: rotate(2deg) scale(1.2);
        -ms-transform: rotate(2deg) scale(1.2);
            transform: rotate(2deg) scale(1.2);
}
.post-summery .post-infoo span.titlee {
    text-align: center;
    display: block;
    margin: 4px auto;
    font-size: 14px;margin-bottom: 10px;
    color: var(--color-owl-slider);line-height: 20px;
}
.post-summery .post-infoo .data,.post-summery .post-infoo .auther {
    display: inline-block;
    width: auto;
    margin: auto 5px;
    background: #eee;
    padding: 5px 11px;
    border: 1px dashed #48525c;
    border-radius: 30px;
    font-size: 12px;
    height: auto;
}
/*=====================================
= OwlCarousel css [dir=rtl]
=====================================*/
/*-----owl buttons------*/
.owl-carousel .owl-controls{margin-top:0;text-align:center;}
.owl-controls{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.owl-page,.owl-controls .owl-buttons div{cursor:pointer;}
.owl-carousel .owl-controls .owl-buttons{position:static;margin:0;padding:0;height:0;width:100%;z-index:9;}
.owl-carousel .owl-controls .owl-buttons div.owl-prev{right:0;}
.owl-carousel .owl-controls .owl-buttons div.owl-next{left:0;}
.owl-carousel .owl-controls .owl-buttons div{position:absolute;margin:0;padding:0;top:50%;z-index:9;display:inline-block;font-size:17px;overflow:hidden;}
.owl-carousel .owl-controls .owl-buttons div .fa{position:relative;width:38px;height:38px;line-height:38px;border:0;background-color:var(--color-owl-slider);color:#FFF;font-size:17px;text-align:center;}
/*----owl pagination-----*/
.owl-carousel .owl-controls .owl-pagination {pointer-events: none;margin: 10px;right: 50%;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;display: -webkit-inline-flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;bottom: 10px;z-index: 20;padding: 2px 15px;}
.owl-carousel .owl-controls .owl-pagination .owl-page{pointer-events:auto;position:relative;display:inline-block;}
.owl-carousel .owl-controls .owl-pagination .owl-page span{border-radius: 20px;pointer-events:auto;background:#ddd;opacity:1;width:10px;height:10px;margin:3px;display:inline-block;float:right;}
.owl-carousel .owl-controls .owl-pagination .owl-page.active span{background-color:var(--color-owl-slider);}
/*-----shah content------*/
.owl-carousel .owl-controls{margin-top:0;}
.owl-carousel{display:none;}
.owl-carousel,.owl-carousel .owl-wrapper,.owl-carousel .owl-wrapper-outer{position:relative;overflow:hidden;width:100%;}
.owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.owl-carousel .owl-item{float:right;}
/*----stat [ opacity ] 0.8----*/
.owl-carousel .owl-controls .owl-buttons div .fa:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";filter:alpha(opacity=0.8);opacity:0.8;}

لون الأزرار والسلايدر .لتغييره غير #3d5afe بأي لون تريده .

بعد تطبيقك للخطوة القبلية ننتقل للخطوة التالية وهي اضافة مكتبة owl-coursal المعدلة من طرفي للاتجاه rtl المكتبة مرفوعة في github للحصول على السكريبت من هنا . الأن سنقوم باضافة المكتبة للمدونة اذهب لمدونتك ثم المظهر ثم تعديل HTML ثم ابحث عن الوسم /body وألص الكود التالي فوقه مباشرة : 

<script>
//<![CDATA[
$(()=>{
var target = $("#target-posts").text().split("|"),
	resault= target[0],
    tpresualt  = target[1],
	url =`${window.location.origin}/feeds/posts/default/-/${tpresualt}?alt=json-in-script&max-results=${resault}`;
if ("recent" === tpresualt){url =`${window.location.origin}/feeds/posts/default?alt=json-in-script&max-results=${resault}`}
$.ajax({
type:"GET",
url:url,
dataType:"jsonp",
success:function(e){
/*القسم خاص بجلب المواضيع*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1e(F l="",i=0;i<1f;i++){F g=e.1g.1h,b$o=g[i].o.$t,b$v=g[i].v[4].z,b$q=g[i].1i$1j.1k.1l("1m-c","1n"),b$g=g[i].1o.$t.1p(0,10),b$G=g[i].1q[0].1r.$t;l+=`<h n="1s"><h n="b-1t"><h n="b-q"><a z="${b$v}"o="${b$o}"><q 1u="${b$q}"1v="${b$o}"1w=" 1x: 1y!H; 1z: 1A%!H; "/></a></h><h n="b-1B"><a z="${b$v}"o="${b$o}"><I n="1C">${b$o}</I></a><h n="g"><r J-K="L"n="u M-u"g-u="1D"g-N="O"P="Q"R="q"S="0 0 A A"T="U://V.W.X/Y/r"><w d="1E 1F 8 8 B 8 Z j j j j-13 j-1G 8 1H 1I 1J x.7-s.1 f-f f-x.7 0-f-s.1-f-f 0-x.7 s.1-f f-f x.7 0 f s.1 f 1K-1L.9 k.1M-1N.2-1O-3.1-2.3-4.9-5.9-4.9-9.1P-6.6 5.4-12 12-1Q.6 0 12 5.4 12 1R.1S.5 1T.1U.4 3.9 6.5 11.4 2.6 16.1V-8.2 11.1W-3.9 5.3-11.4 6.5-16.8 2.1X"14="17"></w></r>${b$g}</h><h n="1Y"><r J-K="L"n="u M-u"g-N="O"P="Q"R="q"S="0 0 1Z A"T="U://V.W.X/Y/r"><w d="22 23 8 0 B 0 Z j j j j-13 j-24 8 j 29 2a.2b-y.9 26.5-2c.1 C.4-18 C.2d-2e.1-15.9-18-C.2f-y.3 28.7-p p-p 11.1 0 27.5 11.4 p 11.4 2g.6 0 2h.8-11.4 p-11.4 y.3 0 p 28.7 p 2i.2j.6-27.2k-6.8-19.4-19.3-D.1-1a.6-D.1-20.5 0-1b.4 11.4-p 11.2l.6 2m 2n 2o-1c.3 0-2p.8 y.7-1a.6 D.2q.9 2r.6 1d 2s.4 1d 2t-B.1 s.9-f f-2u s.9 f 2v m.4-21.9 2w.6-2x.4 2y.2z 2A-1c.6 0-k E.4-k 2B.4 k k k k-E.4 k-k-E.4-k-k-2C 2D-1b.9 0-m-25.1-m-2E.1-m m-m m 25.1 m m-25.1 m-m 2F"14="17"></w></r>${b$G}</h></h></h></h>`}$("#2G #2H-2I ").2J(l);',62,170,'|||||||||||post||||216|data|div||248|88||56|class|title|64|img|svg|96||icon|link|path|118|35|href|512|119|42|82|39|var|auth|important|span|aria|hidden|true|small|prefix|fal|focusable|false|role|viewBox|xmlns|http|www|w3|org|2000|256s111||||111|fill|||currentColor|128|46|94|30|48|32|for|resault|feed|entry|media|thumbnail|url|replace|s72|s1600|published|substring|author|name|item|summery|src|alt|style|height|170px|width|100|infoo|titlee|clock|M256|8C119|248S393|256|8zm216|248c0|216zm|148|3l|81|59c|7V116c0|12h14c6|12v146|3l70|51|3c5|8l|3c|6z|auther|496|||M248|8C111|248S385|||||8zm128|421|6c|80|4s|92|4V416c0|36|52|64v13|6zm30|5c|4S204|320|184|320c|87|1C53|363|312|256c0|216s216|216c0|107|57|146|1zM248|120c|88s39|88zm0|144c|56s25|56z|DaynamicSlider|Daynamic|slider|html'.split('|'),0,{}))
/*قسم خاص بخصائص السلايدر*/
var owl = $("#Daynamic-slider");
 owl.owlCarousel({
      items : 3,/*كم يعرض من موضوع*/
      itemsDesktop : [1000,1], /*كم عدد المواضيع لعرضها في أجهزة الحاسوب*/
      itemsDesktopSmall : [900,1], /*كم يعرض من موضوع في أجهزة الحاسوب بمقاس 900*/
      itemsTablet: [600,1], 
      itemsMobile : false 
  }).trigger('owl.play',2000);/*سرعة الانتقال بين مقال و مقال ملاحظة كل 1000 تساوي 1 ثانية */
  $(".next").click(function(){owl.trigger('owl.next');}),
  $(".prev").click(function(){owl.trigger('owl.prev');}),
  $(".play").click(function(){owl.trigger('owl.play',2000);})
  $(".stop").click(function(){owl.trigger('owl.stop');});
}
});
});
 //]]>
</script>
<!--[owl-carousel]-->
<script src='https://cdn.jsdelivr.net/gh/zinothec/owl-carousel@main/owl.carousel-v1.3.3.js' type='text/javascript'/>

بعد تطبيقك لجميع الخطوات السابقة سنقوم ببعض الخصائص كـ تعديل السرعة الانتقال :

في السكريب مقسم لقسمين القسم الأول لجلب المواضيع أم القسم الثاني فهو لخصائص السلايدر كعدد عرض المواضيع و سرعة...الخ.
لقد وضعت في السكريبت comment أي تعليق بجانب كل كود وفهم مادور كل كود و كيكفية تعديل عليه .

نأتي بالخطوة الأخيرة وهي تخصيص مكان لعرض السلايدر اذهب الى التخطيط خاص بمدونتك ثم اختر مكان محدد لعرض السلايدر ثم أضف أداة ثم أختر HTML/JavaScript وألصق الكود التالي : 

<b:if cond='data:view.isHomepage'>
<div id="DaynamicSlider"><center>
<div class="customNavigation"> 
<a class="btn prev"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right" viewbox="0 0 16 16"> <path d="M6 12.796V3.204L11.481 8 6 12.796zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753z"/> </path></svg></a> 
<a class="btn play"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></path></path></svg></a> 
<a class="btn stop"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></path></path></svg></a> 
<a class="btn next">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left" viewbox="0 0 16 16"> <path d="M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z"/> </path></svg>
</a>
</div></center>
<div id="Daynamic-slider" class="owl-carousel owl-theme">
<div id='target-posts'>9|recent</div>
</div>
</div>
</b:if>

قم بالتغييرات التالية :
recent : تمثل عرض أخر مواضيع ويمكنك وضع اسم القسم الذي تريد عرضه ,
9 : يمثل عدد عرض المواضيع في السلايدر يمكنك تغييره كما تريد , لايجب أن يكون الرقم أكثر من مواضيعك أو من مواضيع القسم المحدد .

الأسئلة التي قد تراودك :

هل يمكن التعديل على السكريبت ؟
ان كنت مطور فلا بأس لكن قد تواجهك مشكلة أو ليست بمشكلة أن السكريبت مشفر فأقول لك لا داعي ستجد رابط التحميل في القائمة الجانبية بدون تشفير و نسخة مفتوحة المصدر طبعا يمكنك تعديل على أو تخصيصه أو حتى ادراجه في مشارعيك البرمجسة والمستقبلية .
أين أجد مصادر لتعلم استخدام مكتبة owl-coursal ?
هنالك مصادر كثيرة في الأنترنت كـ منصة YouTube و stackoverflow الخ... لكن أنت كمطور عربي ستواجهك مشكلة لأن في قوالبك ستستعمل الاتجاه rtl لذلك لا تقلق قمت بتعديل الأكواد .

هذ أكواد css خاصة بالمكتبة و معدلة طبعا 

/*=====================================
= OwlCarousel css [dir=rtl]
=====================================*/
/*-----owl buttons------*/
.owl-carousel .owl-controls{margin-top:0;text-align:center;}
.owl-controls{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.owl-page,.owl-controls .owl-buttons div{cursor:pointer;}
.owl-carousel .owl-controls .owl-buttons{position:static;margin:0;padding:0;height:0;width:100%;z-index:9;}
.owl-carousel .owl-controls .owl-buttons div.owl-prev{right:0;}
.owl-carousel .owl-controls .owl-buttons div.owl-next{left:0;}
.owl-carousel .owl-controls .owl-buttons div{position:absolute;margin:0;padding:0;top:50%;z-index:9;display:inline-block;font-size:17px;overflow:hidden;}
.owl-carousel .owl-controls .owl-buttons div .fa{position:relative;width:38px;height:38px;line-height:38px;border:0;background-color:var(--color-owl-slider);color:#FFF;font-size:17px;text-align:center;}
/*----owl pagination-----*/
.owl-carousel .owl-controls .owl-pagination {pointer-events: none;margin: 10px;right: 50%;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;display: -webkit-inline-flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;bottom: 10px;z-index: 20;padding: 2px 15px;}
.owl-carousel .owl-controls .owl-pagination .owl-page{pointer-events:auto;position:relative;display:inline-block;}
.owl-carousel .owl-controls .owl-pagination .owl-page span{border-radius: 20px;pointer-events:auto;background:#ddd;opacity:1;width:10px;height:10px;margin:3px;display:inline-block;float:right;}
.owl-carousel .owl-controls .owl-pagination .owl-page.active span{background-color:var(--color-owl-slider);}
/*-----shah content------*/
.owl-carousel .owl-controls{margin-top:0;}
.owl-carousel{display:none;}
.owl-carousel,.owl-carousel .owl-wrapper,.owl-carousel .owl-wrapper-outer{position:relative;overflow:hidden;width:100%;}
.owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.owl-carousel .owl-item{float:right;}
/*----stat [ opacity ] 0.8----*/
.owl-carousel .owl-controls .owl-buttons div .fa:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";filter:alpha(opacity=0.8);opacity:0.8;}

وهذه رابط المكتبة المعدلة :

<!--[owl-carousel]-->
<script src='https://cdn.jsdelivr.net/gh/zinothec/owl-carousel@main/owl.carousel-v1.3.3.js' type='text/javascript'/>

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


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

  • سكريبت سلايدر شو
  • اسم الملف : Slider-show-owl-coursal.js
  • حجم الملف : 3.00KB
معاينة تحميل