سلايدر تلقائي متجاوب بتمرير عمودي

السلام عليكم
ورحمة الله تعالى
وبركاته

في هذه التدوينة أجببت أن أقدم

لكم سلايدر يعمل بتمرير عمودي

بحثت عنه كثيرا لكن لم أجده لذا قمت ببرمجته بنفسي

وأحببت مشاركته معكم

معاينة

طريقة التركيب

1. قم بتحرير القالب
2. ثم ابحث عن الوسم ]]></b:skin>
3. وضع الأكواد التالية فوقه

• /*=====================================
• = Slick Slider widget css
• =====================================*/
• .isw-DySlider {
•     position: relative;
•     overflow: hidden;
•      padding: 0;
• }
• .slider-thumb img {
•     width: 100%;
• }
• .slider-content p.ssummary {
•     display: none;
• }
• .slider-thumb {
•     height: 200px;
•     overflow: hidden;
•     position: relative;
• }
• .slider-bottom {
•     position: absolute;
•     bottom: 0;
•     width: 100%;
•     text-align: right;
•     color: #fff;
•     padding:5%;
•     box-sizing: border-box;
• }
• .slider-thumb a:before {
•     content: no-close-quote;
•     position: absolute;
•     left: 0;
•     bottom: 0;
•     width: 100%;
•     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOEvMSWmpRXEVXDYCI9vZ_ObcDTq599DEEKaGa4DpPhP4cFjoJ2yrUYeqQFztaEecFZLAXcQxmkY8i80KTfB9QtkPVlcE-_Rzjh7OdnEN_QGFENuJCwZKLSGxBFj5vggtxPrK9_6A40N0/s1600-r/metabg.png) repeat-x;
•     background-size: 100% 100%;
•     height: 100%;
• }
• a.tagslider {
•     background: #c71212;
•     padding: 0 8px;
•     border-radius: 10px;
•     display: inline-block;
• }
• .slider-title {
•     font-size: 1.3rem;
•     font-weight: 800;
•     margin-top: 8px;
• }
• .slider-content .date {
•     color: #aba7a7;
•     font-family: sans-serif;
•     font-size: 12px;
• }
• .date:before {
•     content: "\f017";
•     font-family: fontawesome;
•     float: right;
•     padding-left: 5px;
• }
• .slider-content .postAuthor:before {
•     content: "\f007";
•     font-family: fontawesome;
•     float: right;
•     padding-left: 5px;
•     font-size: 10px;
•     color: #aba1a1;
•     margin-top: 4px;
• }
• .slider-content .postAuthor {
•     float: right;
•     font-size: 14px;
• }
• /*=====================================
• = Slick Slider css
• =====================================*/
• /* Slider */
• button.slick-arrow {
•     border: none;
•     background: #d62424;
•     color: #fff;
•     width: 13%;
•     padding: 12px 0;
•     margin-right: 2%;
• }
• .slick-slider
• {
•     position: relative;
• 
  
•     display: block;
•     box-sizing: border-box;
• 
  
•     -webkit-user-select: none;
•        -moz-user-select: none;
•         -ms-user-select: none;
•             user-select: none;
• 
  
•     -webkit-touch-callout: none;
•     -khtml-user-select: none;
•     -ms-touch-action: pan-y;
•         touch-action: pan-y;
•     -webkit-tap-highlight-color: transparent;
• }
• 
  
• .slick-list
• {
•     position: relative;
• 
  
•     display: block;
•     overflow: hidden;
• 
  
•     margin: 0;
•     padding: 0;
• }
• .slick-list:focus
• {
•     outline: none;
• }
• .slick-list.dragging
• {
•     cursor: pointer;
•     cursor: hand;
• }
• 
  
• .slick-slider .slick-track,
• .slick-slider .slick-list
• {
•     -webkit-transform: translate3d(0, 0, 0);
•        -moz-transform: translate3d(0, 0, 0);
•         -ms-transform: translate3d(0, 0, 0);
•          -o-transform: translate3d(0, 0, 0);
•             transform: translate3d(0, 0, 0);
• }
• 
  
• .slick-track
• {
•     position: relative;
•     top: 0;
•     left: 0;
• 
  
•     display: block;
• }
• .slick-track:before,
• .slick-track:after
• {
•     display: table;
• 
  
•     content: '';
• }
• .slick-track:after
• {
•     clear: both;
• }
• .slick-loading .slick-track
• {
•     visibility: hidden;
• }
• 
  
• .slick-slide
• {
•     display: none;
•     float: left;
• 
  
•     height: 100%;
•     min-height: 1px;
• }
• [dir='rtl'] .slick-slide
• {
•     float: right;
• }
• .slick-slide img
• {
•     display: block;
• }
• .slick-slide.slick-loading img
• {
•     display: none;
• }
• .slick-slide.dragging img
• {
•     pointer-events: none;
• }
• .slick-initialized .slick-slide
• {
•     display: block;
• }
• .slick-loading .slick-slide
• {
•     visibility: hidden;
• }
• .slick-vertical .slick-slide
• {
•     display: block;
•     position:relative;
•     height: auto;
• 
  
•     border: 1px solid transparent;
• }
• .slick-arrow.slick-hidden {
•     display: none;
• }

1. ثم ابحث عن الوسم </body>
2. وضع الأكواد التالية فوقه

• <script type='text/javascript'>
• //<![CDATA[
• $("#IsweebSlider .widget").each(function(){
• var e=$(this),
•     t=e.find(".widget-content").text(),
•     l=t.split("/"),
•     i=l[0],r=l[1],
•     n=Math.floor(Math.random()*i+1);
• if(t.match("recentpost"))
• var o="/feeds/posts/default?alt=json-in-script&max-results="+i;
• else if(t.match("randompost"))
• var o="/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+i;
• else var o="/feeds/posts/default/-/"+r+"?alt=json-in-script&max-results="+i;
• $.ajax({
• type:"GET",
• url:o,
• dataType:"jsonp",
• success:function(e){
• for(var t="<button type='button' class='top-arrow' style='display: inline-block;'><i class='fa fa-chevron-up'></i></button><button type='button' data-role='none' class='bottom-arrow' aria-label='Next' role='button' style='display: inline-block;' aria-disabled='false'><i class='fa fa-chevron-down'></i></button><ul class='isw-DySlider isw-carousel'>",l="",i=0;i<e.feed.entry.length;i++){
• for(var r=e.feed.entry[i],
• postAuthor=r.author[0].name.$t,
• uriauthor=r.author[0].uri.$t,
• date=r.published.$t.substring(0,10),
• n=r.title.$t,
• o=0;o<r.link.length;o++){
• if("replies"==r.link[o].rel&&"text/html"==r.link[o].type){r.link[o].title,r.link[o].href}if("alternate"==r.link[o].rel){
• var f=r.link[o].href;break}}
• var p,h=r.content.$t,u=$("<p>").html(h).text(),m=u.substring(0,180)+"...",
• v=r.category[0].term;
• try{p=0==i?r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault"):r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault")}catch(g){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),p=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0DBemkOKpTfMTm3a4P7lHba7yccFyu4ygenrUa5HsyHyD-kHLvfeX_mhFG8GgyBl0nQ30gY01r2Y2SwkNDo7y_8oXyHTWawZ8xgt5UyFFzqvNzX7rJOU3fngsZ1iEJP6OMLPhVgbJFpU/s1600/90.jpg"}
• l+='<li class="recent-slider"><div class="slideto">',
• l+='<div class="slider-content">',
• l+='<div class="slider-thumb"><a href='+f+'><img class="slidep-img traslider" src="'+p+'" title="'+n+'" alt="'+n+'"/></a></div>',
• l+='<div class="slider-bottom">',
• l+='<div class="slider-tag"><a class="tagslider" href="/search/label/'+v+'">'+v+"</a></div>",
• l+='<div class="slider-title"><a class="slider-titlea" href='+f+">"+n+"</a></div>",
• l+='<div class="slider-faq traslider">',
• 
  
• l+='<p class="ssummary">'+m+"</p>",           //| 
• //0==i&&(l+='<p class="ssummary">'+m+"</p>"), //| 
•                                               //|
• l+='<div class="date">'+date+"</div>", 
• l+='<a class="postAuthor" href='+uriauthor+' target="_blank" rel="nofollow">'+postAuthor+"</a>", 
• l+="</div>",
• l+="</div>",
• l+="</div></div></li>"}
• l+="</ul>",
• t+=l,
• $("#IsweebSlider .widget-content").html(t);
• /*==============*/
• //OwlCarousel-js
• /*==============*/
• $('.isw-DySlider.isw-carousel').slick({
•             infinite: true,
•             autoplay: true,
•             vertical:true,
•             verticalSwiping:true,
•             slidesToShow: 3,
•             slidesToScroll: 1,
•             prevArrow: $('.top-arrow'),
•             nextArrow: $('.bottom-arrow')
• });
• }})
• });
• //]]>
• </script>
• <script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js' type='text/javascript'/>

slidesToShow يقصد بها عدد التدوينات المراد عرضها

 slidesToScroll يقصد بها عدد التدوينات المراد تمريرها

1. الان قم بنسخ الأكواد التالية
2. وضعها في المكان الذي يناسبك ويفض وضعها فوق السايدبار أو أسفله

• <div class='DySliderstyle-material' id='IsweebSlider'>
• <b:section class='Isweeb-slickSlider' id='Isweeb-slickSlider' maxwidgets='1'>
•   <b:widget id='HTML748' locked='true' title='سلايدر أفقي' type='HTML' version='1'>
•     <b:widget-settings>
•       <b:widget-setting name='content'>10/قوالب</b:widget-setting>
•     </b:widget-settings>
•     <b:includable id='main'>
•   <!-- script title btn more -->
•                       <script>
• document.write(&#39;&lt;div class=&quot;aftertitle&quot;&gt;&lt;h2&gt;<data:title/>&lt;/h2&gt; &lt;div class=&quot;getmorre&quot;&gt;&lt;a href=&quot;/search/label/?max-results=4&quot;&gt;المزيد&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&#39;);
•                       </script>
• <div class='widget-content'>
• <data:content/>
• </div>
• <b:include name='quickedit'/>
• </b:includable>
•   </b:widget>
• </b:section>
• </div> 

ان أردت أن يعمل السلايدر بتسمية فقم بتغيير قوالب بتسمية لديك وان أردت أن يظهر مواضيع عشوائية ضع مكان التسمية randompost ولعرض اخر المواضيع ضع مكانها recentpost