ব্লগার এবং ওয়ার্ডপ্রেসের জন্য ফটো কমপ্রেশন স্লাইডার স্ক্রিপ্ট?

হ্যালো বন্ধুরা, আপনাকে ব্লগার স্ক্রিপ্ট ক্যাটাগরিতে স্বাগতম, আজ এই আর্টিকেলে আমরা ব্লগার এবং ওয়ার্ডপ্রেস (এইচটিএমএল + সিএসএস + জাভাস্ক্রিপ্ট) এর জন্য ফটো কমপ্রেশার স্লাইডার স্ক্রিপ্ট সম্পর্কে জানব। এবং আপনিও জানতে পারবেন এই ছবি কম্পোনিশন স্লাইডার কি?

ফ্রি ইমেজ কমপ্রশার স্লাইডার ব্যবহার করে আপনি নিজের ওয়েবসাইট বা ব্লগটিকে আরও আকর্ষণীয় এবং লাভজনক করতে পারেন। সমস্ত পেশাদার ওয়েবসাইট গুলো এই পদক্ষেপ ব্যবহার করে ইউজারদের আরও আকৃষ্ট করে, বর্তমানে আপনি প্রায় ওয়েবসাইট বা ব্লগে ইমেজ স্লাইডার বৈশিষ্ট্য দেখতে পাবেন।

ইমেজ কম্পোনিশন স্লাইডার ব্যবহারঃ

ব্লগার এবং ওয়ার্ডপ্রেসের জন্য ফটো কমপ্রেশন স্লাইডার স্ক্রিপ্ট?

আপনি যদি কোনও ব্লগার বা ওয়েব ডিজাইনার হন তবে ইমেজ স্লাইডারের বৈশিষ্ট্যগুলির পরে আপনাকে অবশ্যই এটি সম্পর্কে জানতে হবে। আপনি এটি সম্পর্কে খুব বেশি জানেন না। সুতরাং আমি আপনাকে বলি যে এর মধ্যে, আপনি 2 টি ইমেজ একসঙ্গে স্লাইড করে তুলে ধরা  করা হয়।

অবশ্যই পড়ুন-

যাইহোক, আপনি যদি ওয়ার্ডপ্রেস ব্যবহার করেন তবে আপনি ওয়ার্ডপ্রেসের জন্য বিভিন্ন প্লাগইন পেতে পারেন। যার সাহায্যে আপনি সহজেই ওয়ার্ডপ্রেসে ছবি কম্পোনিশন স্লাইডার তৈরি করতে পারেন। তবে আপনি যদি প্লাগইনটি ব্যবহার করতে না চান তবে আপনি এটি এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে তৈরি করতে পারেন।

DEMO

<style>
:root {
  --slider-width: 50rem;
  --slider-height: 30rem;
}

.compare {
  position: relative;
  height: var(--slider-height);
  width: var(--slider-width);
}

.compare__image {
  position: absolute;
  height: var(--slider-height);
  width: var(--slider-width);
  border-radius: 0.4rem;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

.compare__image img {
  height: var(--slider-height);
  width: var(--slider-width);
  object-fit: cover;
}
.compare__slider {
  position: absolute;
  z-index: 1;
  width: 3.6rem;
  height: 3.6rem;
  background: #121212;
  border: 0.1rem solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  cursor: grab;
  transition: border-color 0.2s;
}

.compare__slider:active {
  border: 0.1rem solid rgba(255, 255, 255, 0.3);
  cursor: grabbing;
}
</style>

<div class="compare">
  <div class="compare__image">
    <img src="1.png">
  </div>
  <div class="compare__image compare__overlay">
    <img src="2.png">
  </div>
</div>

<script>
let isClicked = false;
const image = document.querySelector(".compare__overlay");
const width = image.offsetWidth;
const height = image.offsetHeight;
const slider = document.createElement("div");
compare();
function compare() Onlinekaj.com{
  image.parentElement.insertBefore(slider, image);
  slider.classList.add("compare__slider");
  slider.style.top = height / 2 - slider.offsetHeight / 2 + "px";
  slider.style.left = width / 2 - slider.offsetWidth / 2 + "px";
  image.style.width = "50%";
  slider.addEventListener("mousedown", onSlideStart);
  slider.addEventListener("touchstart", onSlideStart);
  window.addEventListener("mouseup", () => (isClicked = false));
  window.addEventListener("touchstop", () => (isClicked = false));
  window.addEventListener("mousemove", onSlideMove);
  window.addEventListener("touchmove", onSlideMove);
}
function onSlideStart(event) {
  event.preventDefault();
  isClicked = true;
}
function onSlideMove(event) {
  if (!isClicked) return;
  doSlide(currentPosition(event));
}
function currentPosition(event = window.event) {
  let xImage = image.getBoundingClientRect();
  let x = 0;
  x = event.pageX - xImage.left;
  if (x < 0) x = 0;
  if (x > width) x = width;
  return x;
}
function doSlide(x) {
  image.style.width = x + "px";
  slider.style.left = image.offsetWidth - slider.offsetWidth / 2 + "px";
}
</script>

সুতরাং নীচে, আমি আপনার জন্য এইচটিএমএল স্ক্রিপ্টের সাহায্যে তৈরি করার পূর্বে / পরে ইমেজ স্লাইডার দেখিয়েছি। নীচের উদাহরণটি পাবেন।

ব্লগার এবং ওয়ার্ডপ্রেস জাভাস্ক্রিপ্টের জন্য ছবি স্লাইডার এইচটিএমএল স্ক্রিপ্টঃ


তাই বন্ধু যদি আপনিও ইমেজ স্লাইডার ব্লগার পোস্টের আগে বা পরে যোগ করতে চান। সুতরাং এটি এখানে সম্ভবএর জন্য, আপনি ইমেজ কম্পোজিশন স্লাইডার এইচটিএমএল জাভাস্ক্রিপ্ট সিএসএস স্ক্রিপ্টের নীচে সরবরাহ করেছি, আপনি এটি ব্যবহার করতে হবে।

Note:দুটি পৃথক ইমেজরে URL যেমনঃ 1.png এবং 2.png চেঞ্জ করুন।

আমাদের শেষ কথা,,

তাই বন্ধুরা, ব্লগার এবং ওয়ার্ডপ্রেস পোস্টের জন্য এই পোস্টে কম্প্রেসার স্লাইডার স্ক্রিপ্টটি আপনি কী পছন্দ করেছেন। এবং যদি আপনি কোনও ধরণের সমস্যা বা অন্য কোনও ধরণের স্ক্রিপ্ট চান তবে নীচে কমেন্ট করুন। এছাড়াও, এই আটিকেলটি অবশ্যই আপনার বন্ধুদের সাথে শেয়ার করুন।

By commenting you acknowledge acceptance of Whatisloved.com-Terms and Conditions

Post a Comment

By commenting you acknowledge acceptance of Whatisloved.com-Terms and Conditions

Post a Comment (0)

Previous Post Next Post