এলিমেন্টর সুইপার স্লাইডার: এটি কীভাবে কাজ করে এবং কীভাবে এটি ঠিক করবেন

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

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

দ্রুত সমাধান: প্লাগইন আপডেটের পরে স্লাইডার কাজ করা বন্ধ করে দিয়েছে

আপনি যদি এখানে থাকেন কারণ একটি কর্মরত ক্যারোজেল হঠাৎ মারা গেছে, অন্য কিছু পড়ার আগে এটি চেষ্টা করুন:

1. আপনার ক্যাশিং বা অপ্টিমাইজেশান প্লাগইন খুলুন।
2. জাভাস্ক্রিপ্ট সেটিংস খুঁজুন: JS একত্রিত করুন, JS বিলম্বিত করুন, JS বিলম্ব করুন।
3. তিনটিই বন্ধ করুন। ক্যাশে সাফ করুন। পৃষ্ঠাটি পুনরায় লোড করুন।

যদি ক্যারোজেল ফিরে আসে, JS অপ্টিমাইজেশান এটি ভেঙে দেয়, এবং ফিক্সটি অপ্টিমাইজেশন বন্ধ না করে একটি বর্জন। আরও নিচে সঠিক বর্জন।

সুইপার আসলে কি করে

তিনটি নেস্টেড উপাদান। একটি ধারক, এটির ভিতরে একটি মোড়ক এবং এর ভিতরে স্লাইড। সুইপার কন্টেইনারের প্রস্থ পড়ে, প্রতিটি স্লাইডের জন্য মোড়কটি কতটা সরাতে হবে তা গণনা করে এবং মোড়কের উপর একটি CSS রূপান্তর প্রয়োগ করে। স্লাইডগুলি কখনই পৃথকভাবে সরে না; পুরো স্ট্রিপটি একটি জানালার নীচে স্লাইড করে।

যে কারণে বাগ দুটি বিভাগ প্রাধান্য:

স্ক্রিপ্ট চালানো হয়নি। কিছুই আরম্ভ হয় না, তাই আপনি সমস্ত স্লাইড স্ট্যাক করা বা কোন মিথস্ক্রিয়া ছাড়া একটি সারিতে দেখতে পান। সোয়াইপারের সিএসএস সাধারণত এখনও সেখানে থাকে, তাই এটি স্পষ্টভাবে ভাঙ্গার পরিবর্তে অর্ধ-স্টাইলযুক্ত দেখায়।

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

পাঁচটি জিনিস যা এলিমেন্টর ক্যারোসেল ভেঙে দেয়

1। জাভাস্ক্রিপ্ট একত্রিত এবং স্থগিত করা

একটি বিস্তৃত মার্জিন দ্বারা সবচেয়ে সাধারণ কারণ।

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

আপনার ব্রাউজার কনসোল খুলুন। যদি তুমি দেখ Swiper is not defined বা Cannot read properties of undefined, এটা আপনার সমস্যা।

ঠিক করুন: সুইপার হ্যান্ডেলগুলিকে পাইকারি নিষ্ক্রিয় করার পরিবর্তে অপ্টিমাইজেশন থেকে বাদ দিন। LiteSpeed ক্যাশে যা পৃষ্ঠা অপ্টিমাইজেশান → JS সেটিংসের অধীনে রয়েছে। যোগ করুন:

swiper
elementor-frontend
jquery-core

LiteSpeed-এ লোকেরা একটি জিনিস মিস করে: আলাদা বর্জন ক্ষেত্র রয়েছে এবং গেস্ট মোড এর নিজস্ব আছে। আপনি যদি শুধুমাত্র প্রধান JS এক্সক্লুডস বক্সটি পূরণ করেন, লগ-ইন করা ব্যবহারকারীরা একটি কার্যকরী ক্যারোজেল দেখতে পান এবং লগ-আউট করা দর্শকরা দেখতে পান না, যা ঠিক সেই বাগ যা পরীক্ষায় বেঁচে থাকে, কারণ আপনি পরীক্ষা করার সময় লগ ইন করেছেন। গেস্ট মোড ক্ষেত্রে একই বর্জন রাখুন।

WP রকেট: ফাইল অপ্টিমাইজেশান → জাভাস্ক্রিপ্ট ফাইলগুলি বাদ দেওয়া হয়েছে, এবং জাভাস্ক্রিপ্ট এক্সিকিউশন বিলম্বের অধীনে একই স্ট্রিংগুলি। Autoptimize: অতিরিক্ত → Autoptimize থেকে স্ক্রিপ্ট বাদ দিন।

2। একটি লুকানো পাত্রের ভিতরে ক্যারোজেল

একটি ট্যাব, অ্যাকর্ডিয়ন বা অফ-ক্যানভাস প্যানেলে একটি ক্যারোজেল প্যানেল থাকাকালীন শুরু হয় display: none। প্রস্থ শূন্য হিসাবে পড়ে, এবং গণিত প্রথম ফ্রেম থেকে ভুল। ট্যাবটি খুলুন এবং আপনি ওভারল্যাপিং স্লাইড বা একটি ট্র্যাক পাবেন যা সরবে না।

ঠিক করুন: বেশিরভাগ উইজেট একটি “observer” সেটিং প্রকাশ করে। এটি চালু করুন এবং আকার পরিবর্তনের জন্য সুইপার ঘড়ি এবং পুনরায় গণনা করুন। যদি আপনার না হয়, ক্যারোজেলটিকে প্রথম ট্যাবে রাখুন, যা লোডের সময় দৃশ্যমান।

3। খুব কম স্লাইড সহ লুপ মোড

লুপ মোড়ানো জাল স্লাইড ক্লোনিং দ্বারা কাজ করে। ক্লোন করার জন্য পর্যাপ্ত স্লাইড-প্রতি-ভিউ গণনার অন্তত দ্বিগুণ প্রয়োজন। থ্রি-পার-ভিউতে চারটি স্লাইড একটি দৃশ্যমান লাফ, ফাঁকা ফাঁক বা একটি ট্র্যাক তৈরি করে যা অর্ধেক থেমে যায়।

ঠিক করুন: স্লাইড যোগ করুন, বা লুপ বন্ধ করুন। একটি ছোট লুপ মসৃণ করে এমন কোন সেটিং নেই।

4। এক পৃষ্ঠায় দুটি সুইপার সংস্করণ

Elementor একটি সংস্করণ বান্ডিল; কিছু অ্যাডন তাদের নিজস্ব বান্ডিল। উভয়ই একই বিশ্বব্যাপী নিবন্ধন করে। যেটি দ্বিতীয় লোড হয় তা জয়ী হয়, এবং যদি একটি উইজেট একটি ভিন্ন API-এর বিরুদ্ধে তৈরি করা হয়, তবে এটি ভেঙে যায়, প্রায়শই এমন একটি পদ্ধতি সম্পর্কে ত্রুটি সহ যা বিদ্যমান নেই।

ঠিক করুন: কনসোলে, চালান Swiper.version। তারপর অ্যাডঅনগুলি একবারে নিষ্ক্রিয় করুন যতক্ষণ না এটি পরিবর্তন করা বন্ধ করে। ভাল আচরণ করা প্লাগইনগুলি তাদের নিজস্ব শিপিংয়ের পরিবর্তে এলিমেন্টরের অনুলিপি পুনরায় ব্যবহার করে। ক্যারোজেল প্লাগইন তুলনা নোট কোনটি করে।

5। অলস লোডিং স্লাইডারের সাথে লড়াই করছে

আক্রমনাত্মক ইমেজ অলস লোডিং, বিশেষ করে থিমের উপরে একটি পৃথক অলস-লোড প্লাগইন, স্লাইড ইমেজগুলিকে শূন্য উচ্চতায় ছেড়ে যেতে পারে যতক্ষণ না তারা দৃশ্যে স্ক্রোল করে। ব্যতীত তারা কখনই দৃশ্যে স্ক্রোল করে না, কারণ তারা একটি অনুভূমিক ট্র্যাকে রয়েছে। ফলাফল: খালি বাক্সের একটি ক্যারোজেল।

ঠিক করুন: অলস-লোড প্লাগইন থেকে ক্যারোজেলের ইমেজ ক্লাস বাদ দিন, অথবা ইমেজগুলিতে স্পষ্ট প্রস্থ এবং উচ্চতা সেট করুন যাতে বাক্সগুলি স্থান সংরক্ষণ করে। ভিডিও ক্যারোসেল এটিকে সবচেয়ে বেশি আঘাত করুন, কারণ প্রতিটি অফ-স্ক্রিন স্লাইড একটি প্লেয়ারের পাশাপাশি একটি চিত্রও বহন করে।

সুইপার লোড হয়েছে কিনা তা কীভাবে পরীক্ষা করবেন

ত্রিশ সেকেন্ড, এবং এটি আপনাকে বলে যে আপনার কোন অর্ধেক সমস্যা আছে।

1. ভাঙা ক্যারোজেল দিয়ে পৃষ্ঠাটি খুলুন।
2. ব্রাউজার কনসোল খুলুন (F12, অথবা ডান-ক্লিক করুন → পরিদর্শন → কনসোল)।
3. টাইপ করা typeof Swiper এবং এন্টার টিপুন।

"function" লাইব্রেরি লোড হওয়ার অর্থ, তাই আপনার সমস্যা হল ইনিশিয়ালাইজেশন: লুকানো পাত্রে বা লুপ সেটিংস দেখুন। "undefined" মানে এটি কখনই আসেনি, এবং কারণটি হল JS অপ্টিমাইজেশান বা একটি স্ক্রিপ্ট যা চেইনের আগে ব্যর্থ হয়েছে৷ প্রথম লাল ত্রুটির জন্য কনসোলে স্ক্রোল করুন, শেষ নয়; পরবর্তী ত্রুটিগুলি সাধারণত প্রথমটির পরিণতি।

সুইপার সেটিংস যা এলিমেন্টরে গুরুত্বপূর্ণ

বেশিরভাগ উইজেট ক্যারোজেল সেটিংসের অধীনে এগুলিকে প্রকাশ করে, কখনও কখনও বিভিন্ন লেবেল সহ:

• ভিউ প্রতি স্লাইড: কয়টি দৃশ্যমান; এটি একটি সেটিং যা আলাদা করে একটি স্লাইডার থেকে একটি ক্যারোজেল. ব্রেকপয়েন্ট প্রতি সেট, সবসময়।
• স্ক্রোল করার জন্য স্লাইড: প্রতি ক্লিকে কত অগ্রিম। স্লাইড-প্রতি-ভিউ-এর সমান সেট করা আপনাকে পৃষ্ঠা-শৈলী পেজিং দেয়; এটি 1 এ সেট করা একটি অবিচ্ছিন্ন অনুভূতি দেয়।
• গতি: স্ট্যান্ডার্ডের জন্য ms। 300 থেকে 500-এ রূপান্তরের সময়কাল, 3D-এর জন্য ধীর।
• অটোপ্লে বিলম্ব: প্রতিটি স্লাইডে বিরতি দিন। 0 এ সেট করুন এবং এটি একটি হয়ে যায় মার্কি, যা কিভাবে লোগো স্লাইডার উইজেট সাধারণত কনফিগার করা হয়।
• লুপ: অসীম মোড়ানো। উপরের মত যথেষ্ট স্লাইড প্রয়োজন।
• স্বয়ংক্রিয় উচ্চতা: ধারকটি সবচেয়ে লম্বা দৃশ্যমান স্লাইডের সাথে মেলে। অসম পাঠ্যের জন্য দরকারী, এবং এটি একটি উচ্চতা অ্যানিমেশন প্রবর্তন করে যা লাফালাফি দেখাতে পারে, তাই এটি অনুমান করার পরিবর্তে পরীক্ষা করা মূল্যবান।
• কেন্দ্রীভূত স্লাইড: সক্রিয় স্লাইড বাম দিকে ফ্লাশ করার পরিবর্তে কেন্দ্রে বসে। কভারফ্লো ডানদিকে তাকানোর জন্য প্রয়োজন।

যেখানে এগুলো বিনামূল্যে প্রদর্শিত হয় ইমেজ ক্যারোজেল উইজেট: ইমেজ ক্যারোজেল ওয়াকথ্রু প্যানেল স্ক্রিনশট আছে।

আপনি আপনার নিজের সুইপার লোড করা উচিত?

না, প্রায় প্রতিটি ক্ষেত্রেই। যখনই একটি ক্যারোজেল উইজেট উপস্থিত থাকে তখনই এলিমেন্টরের অনুলিপি ইতিমধ্যেই পৃষ্ঠায় থাকে এবং দ্বিতীয়টি যোগ করলে উপরের সংস্করণের দ্বন্দ্ব সৃষ্টি হয়।

ব্যতিক্রম হল একটি পৃষ্ঠায় একটি কাস্টম স্লাইডার যেখানে কোনো এলিমেন্টর ক্যারোজেল উইজেট নেই। তারপর Elementor এর সুইপার সারিবদ্ধ করা হয় না এবং আপনার নিজের প্রয়োজন। শর্তসাপেক্ষে, শুধুমাত্র সেই টেমপ্লেটে এটি সারিবদ্ধ করুন, যাতে আপনি অন্য সব জায়গায় দ্বন্দ্ব পুনরায় উপস্থাপন করবেন না।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

যদি এটি এখনও ভাঙ্গা হয়

এই ক্রমে কাজ করুন: প্রথমে কনসোল চেক করুন (typeof Swiper), তারপর ক্যাশে বর্জন, তারপর একটি স্টেজিং কপিতে একবারে একটি অ্যাডঅন নিষ্ক্রিয় করুন। এই ক্রমটি প্রায় প্রতিটি ক্ষেত্রে দশ মিনিটের মধ্যে কারণ খুঁজে পায়।

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

আপনি যদি পরিচিত-ভাল কিছু থেকে শুরু করতে চান, প্রতিটি ক্যারোজেল উইজেট এলিমেন্টর ক্যারোজেল উইজেট নথিভুক্ত বর্জন-নিরাপদ স্ক্রিপ্ট হ্যান্ডেল সহ পৃষ্ঠা শিপ, এবং লুপ ক্যারোজেল গাইড একই সমস্যার গতিশীল-কোয়েরি বৈকল্পিক কভার করে। আপনি যদি একটি ঠিক করার পরিবর্তে একটি উইজেট বাছাই করেন, বিনামূল্যে ক্যারোজেল উইজেট ভাঙ্গন এবং বিশটি স্লাইডার টেমপ্লেট শুরু করার দুটি জায়গা আছে।