কিভাবে এলিমেন্টর ব্যবহার করে ওয়ার্ডপ্রেসে স্লাইড র্যান্ডমাইজ করবেন

Muneeb WordPress Tutorials Jan 26, 2022

আপনার ওয়েবসাইট দর্শকদের কাছে আরও ভাল দেখাতে Elementor অনেক সৃজনশীল বিকল্প অফার করে। স্লাইডার এবং ক্যারোসেল হল কয়েকটি পদ্ধতি যা ওয়ার্ডপ্রেস ব্যবহারকারীরা তাদের ওয়েবসাইটগুলিকে আরও উন্নত দেখানোর জন্য অন্তর্ভুক্ত করেছে।

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

কীভাবে এলিমেন্টর স্লাইডারে স্লাইডগুলিকে র্যান্ডমাইজ করবেন

শুরু করার জন্য, একটি HTML ব্লক যোগ করুন যেখানে আপনি নীচের প্রদত্ত কোডটি পেস্ট করবেন।

আপনার পূর্বে তৈরি করা HTML ব্লকে যে কোডটি পেস্ট করতে হবে তা এখানে।

আশ্চর্যজনক ওয়েবসাইট তৈরি করুন

সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে

এখুনি শুরু করুন
>script/script

আপনার ওয়েবসাইটে একাধিক স্লাইডার থাকলে পড়তে থাকুন। তা ছাড়া, সবকিছু ভালো হতে হবে।

কিভাবে এক বা একাধিক স্লাইডারের জন্য স্লাইড র্যান্ডমাইজ করবেন

কোডে এই লাইনটি পরিবর্তন করুন এবং এটিকে ক্লাসের নাম FirstSlider দিন

document.querySelector('.elementor-slides');
// change it to
document.querySelector('.slider1 .elementor-slides');

কোডটি অনুলিপি করুন এবং ক্লাসের নাম পরিবর্তন করুন যদি আপনি পৃষ্ঠায় অতিরিক্ত এলিমেন্টর স্লাইডারগুলি এলোমেলো হতে চান এবং তারপরে তাদের আলাদা ক্লাসের নাম দিন।

তারপরে আপনি র্যান্ডমাইজ করতে চান এমন প্রতিটি স্লাইডার উপাদানের পরে অবিলম্বে একটি HTML উপাদানে কোডটি অনুলিপি করুন এবং পেস্ট করুন।

অবশেষে, কোডের একই লাইনে সরাসরি সংশ্লিষ্ট HTML উপাদানের উপরে স্লাইডারের সাথে মেলে ক্লাসের নাম পরিবর্তন করুন।

এই লাইনটি, উদাহরণস্বরূপ, আপনার ওয়েবসাইটে তৃতীয় স্লাইডারের জন্য ব্যবহার করা যেতে পারে।

document.querySelector('.slider3 .elementor-slides');

এটাই. সবকিছু ঠিকঠাক থাকলে, আপনি এগিয়ে যেতে পারেন এবং আপনার এলোমেলো এলিমেন্টর স্লাইডার উপভোগ করতে পারেন। আমাদের সাথে যোগদান নিশ্চিত করুন Facebook  এবং Twitter আমাদের টিউটোরিয়ালগুলি কখনই মিস করবেন না।