RANDOM POST SCOLLING SLIDER

Random Post Scolling Slider

ဒါက​တော့ Random Post ကို Design တမျိုးနဲ့ပြုလုပ်ထားတဲ့ Widget Design ​လေးဖြစ်ပါတယ်။အရမ်းကိုလှပ​သေသပ်ပါတယ်။ဒီ Random Post Scolling Slider Design မျိုးက Template မှာနဂိုပါလာတဲ့ Template ​တွေရှိသလိုနဂိုမပါလာတဲ့ Template ​တွေလဲရှိပါတယ်။Random Post Slider နဂိုမပါလာတဲ့ Template သုံးတဲ့သူ​တွေအတွက်အဓိကရည်ရွယ်၍တင်​ပေးခြင်းဖြစ်ပါတယ်။Random Post Slider နဂိုပါလာပြီးသား Template သုံးတဲ့သူ​တွေက​တော့မိမိ Template မှာနဂိုပါလာတဲ့ Design ကိုမနှစ်သက်ရင်​တော့အခုပဲဒီ Random Post Slider နဲ့​ပြောင်းလိုက်ကြပါစို့။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲထုံးစံအတိုင်းပါပဲ HTML/Javascript နဲ့ပဲပြုလုပ်ရမှာပါ။

1. မိမိ Blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Theme ကိုနှိပ်
3. Customize ဘေးက 🔻ကိုနှိပ်
4. Edit HTML ကိုနှိပ်
5. </body> ကိုရှာတွေ့ပြီဆိုရင် အောက်က ပေးထားတဲ့ JavaScript code ကိုအဲဒီ </body> အပေါ်ကနေထည့်ပေးပါ
6. https://khinmaungwin-mm.blogspot.com နေရာမှာမိမိရဲ့ website လိပ်စာ‌‌ ပြောင်းထည့်ပေးပါ
7. ပြီးရင် save ကိုနှိပ်။နောက်တဆင့်အနေနဲ့အောက်ကပြထားတဲ့အတိုင်းဆက်လုပ်ပေးပါ။

<b:if cond='data:view.isHomepage'>
<style>
.itemSlider { min-width: 210px; height: 100%; } 
.dataItem img { width: 100%; height: 315px; border-radius: inherit; object-fit: cover; transition: transform .5s ease; } 
.dataItem img,.dataItem a{ -webkit-user-drag: none; -ms-user-drag: none; -moz-user-drag: none; user-drag: none; user-select: none; } 
.dataItem { position: relative; } .num { position: absolute; top: 0; left: 8px; background: #25008a; color: white; padding: 8px 10px; border-radius: 0 0 8px 8px; font-weight: 600; font-size: 16px; } 
#slides { display: flex; overflow: hidden; scroll-behavior:smooth; gap: 10px; } .active{cursor:grab;} 
.ItemsTitle{font-weight:800;font-size:14px;padding: 8px;background:#0000008c;color:white;} 
.dataItem div:not(.ItemsTitle):nth-child(1) { display: flex; align-items: center; overflow: hidden; border-radius: 8px; } .itemSlider:hover .dataItem img { transform: scale(1.5); } .itemSlider .dataItem a { position: absolute; bottom: 0; width:100%; } @media screen and (max-width:720px){ #slides{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory} 
.itemSlider{scroll-snap-align:center} }
</style>
</b:if>
<b:if cond='data:view.isHomepage'>
<script>//<![CDATA[
$.ajax({
url: 'https://khinmaungwin-mm.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=150',
type: 'get',
dataType: 'jsonp',
success: function(json) {
let target = [],
num = 1;
for(var i = 0;i<json.feed.entry.length;i++){
var key = {};
feeds = json.feed.entry[parseInt(Math.random() * json.feed.entry.length)];
key['title'] = feeds.title.$t;
for(var e = 0;e<feeds.link.length;e++){
key['href'] = feeds.link[e].href;
}
var imgs,
c = feeds.content.$t,
d=c.indexOf("<img"),
e=c.indexOf('src="',d),
f=c.indexOf('"',e+5),
g=c.substr(e+5,f-e-5);
imgs=-1!=d&&-1!=e&&-1!=f&&""!=g?g:"https://images.bizlaw.id/gbr_artikel/images-2_294.webp";
  
key['img'] = feeds.media$thumbnail != null ? feeds.media$thumbnail.url.replace(/s72-c/,'s500').replace(/=s72-c/,'s500') : imgs;
target[i] = key;
}

var dupe = target.filter((tag, index, array) => array.findIndex(t => t.title == tag.title) == index);

for(var o=0;o<10;o++){
      $('#slides').append('<div class="itemSlider"><div class="dataItem"><div><img loading="lazy" src="'+dupe[o].img+'" class="sliderImg" ondragstart="event.preventDefault();"/><div class="num">'+num+++'</div></div><a href="'+dupe[o].href+'"><div class="ItemsTitle">'+dupe[o].title+'</div></a></div></div>');
     }
},
error: function() {$('#slides').html('<strong>Error Getting Data!</strong>');}
});

const scrollContainer = document.getElementById("slides");

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});

let isDown = false;
let startX;
let scrollLeft;
const slider = document.querySelector('.slides');
const thisImg = document.querySelector('.sliderImg');
const end = (e) => {
	isDown = false;
  slider.classList.remove('active');
}
 const start = (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX || e.touches[0].pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;	
}
const move = (e) => {
	if(!isDown) return;
  e.preventDefault();
  const x = e.pageX || e.touches[0].pageX - slider.offsetLeft;
  const dist = (x - startX);
  slider.scrollLeft = scrollLeft - dist;
}

(() => {
	slider.addEventListener('mousedown', start);
	slider.addEventListener('touchstart', start);
  
	slider.addEventListener('mousemove', move);
	slider.addEventListener('touchmove', move);

	slider.addEventListener('mouseleave', end);
	slider.addEventListener('mouseup', end);
	slider.addEventListener('touchend', end);
})();
//]]>
</script>
</b:if>       

1. dashboard ထဲက Layout ကိုနှိပ်
2. Add a Gadget ကိုနှိပ်
3. HTML/JavaScript ကိုနှိပ်
4. အောက်မှာ ပေးထားတဲ့ HTML code တွေကူးထည့်
5. save ကိုနှိပ်ပြီးပါပြီ

<b:if cond='data:view.isHomepage'>
<div id='ATSlide'>
<div class='slides' id='slides'/>
</div>
</div></b:if>