29/08/2025
Webflow-এ Finsweet দিয়ে CMS Slider—স্টেপ-বাই-স্টেপ টিউটোরিয়াল 🚀
সমস্যা: Webflow-এর নেটিভ Slider CMS আইটেম থেকে অটো-জেনারেটেড স্লাইড বানায় না।
সমাধান: Finsweet CMS Slider অ্যাট্রিবিউট—Collection List-এর ডেটা নিয়ে নেটিভ Slider-এ ডায়নামিক Slide বানিয়ে দেয়।
✅ কী বানাবেন
CMS থেকে ডায়নামিক Slide (যেমন: টেস্টিমোনিয়াল/পোর্টফোলিও/ব্লগ হাইলাইট)
কাস্টম থাম্ব-ডট (ঐচ্ছিক)
এক পেজে একাধিক CMS Slider (ইনস্ট্যান্সিং)
1) স্ক্রিপ্ট যোগ করুন
প্রজেক্ট/পেজের -এ Finsweet Attributes স্ক্রিপ্ট অ্যাড করুন (v1/v2—দুটিই সাপোর্টেড; এখানে v1 ডক রেফারেন্স দিচ্ছি)।
Finsweet ডকের “Copy Script” বাটন থেকে নিন। (Attributes v1 পাতায় স্পষ্টভাবে ধাপ দেওয়া আছে)।
2) পেজ স্ট্রাকচার সেটআপ (Webflow Designer)
1. একটা নেটিভ Slider ড্র্যাগ করুন (Slides + Mask + Arrows + Dots—যেভাবে চান)।
2. একটা Collection List ড্র্যাগ করুন—যেটা থেকে কনটেন্ট আসবে (যেমন Testimonials)।
3. Collection Item-এর ভিতরে যেসব এলিমেন্ট দেখাতে চান (ইমেজ/হেডিং/টেক্সট/বাটন) বেঁধে নিন।
3) আবশ্যিক Finsweet Attributes বসান
A) Collection List-এ
Name: fs-cmsslider-element
Value: list
এই লিস্টটাই Slider-এর ডেটা সোর্স হবে; Finsweet আইটেমগুলো নিয়ে স্লাইড বানাবে এবং সোর্স লিস্টটাকে DOM থেকে রিমুভ করে দেবে (ভিউতে আর থাকবে না)।
B) Slider (নেটিভ)-এ
Name: fs-cmsslider-element
Value: slider
এটাই ভিজিবল স্লাইডার; Collection-এর প্রতিটি আইটেম একেকটা Slide-এ বসবে। Slide-এর স্টাইলিং প্রিজার্ভড থাকে।
চাইলে Slide Change-এ Webflow Interactions চালাতে fs-cmsslider-resetix="true" দিন—এটা সব জেনারেটেড স্লাইডে ইন্টারঅ্যাকশন রিসেট করে। সতর্কতা: “initial state” থাকলে বারবার রিসেট হতে পারে, UX মাথায় রাখুন।
4) (ঐচ্ছিক) কাস্টম Slider Dots / থাম্বনেইল
নেটিভ ডটের বদলে নিজস্ব ডট বা থাম্ব দেখাতে চাইলে Finsweet Custom Slider Dots ব্যবহার করুন (v2 ডক লিঙ্ক)। বেসিক ৩টা জিনিস লাগবে:
1. Slider-এ: fs-sliderdots-element="slider"
2. Slider Nav (যেখানে ডট যাবে)-এ: fs-sliderdots-element="slider-nav"
3. Content (ডট টেমপ্লেট)-এ: fs-sliderdots-element="content"
গুরুত্বপূর্ণ: CMS Slider-এর সাথে ব্যবহার করলে content এলিমেন্টটা Collection Item-এর ভেতরেই থাকবে—Slider-এর ভেতরে রাখবেন না, কারণ CMS Slider স্ট্যাটিক স্লাইডারের কনটেন্ট রিপ্লেস করে।
নোট: v2 স্ক্রিপ্টকে -এ একবার দিলেই একাধিক সলিউশন (যেমন Slider Dots) কাজ করবে। ইনস্ট্যান্স আলাদা করতে fs-sliderdots-instance="team"-জাতীয় আইডি দিন।
5) এক পেজে একাধিক CMS Slider (ইনস্ট্যান্সিং)
দ্বিতীয়, তৃতীয় স্লাইডারের জন্য ভ্যালুর শেষে -2, -3 যোগ করুন—
উদাহরণ:
প্রথম লিস্ট/স্লাইডার: list / slider
দ্বিতীয়: list-2 / slider-2
তৃতীয়: list-3 / slider-3
এভাবে লিংক হবে।
6) বেসিক CSS (উদাহরণ)
/* থাম্ব/ডটকে গ্রিডে রাখুন */slider-nav-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
/* Active dot ক্লাস (ডিফল্ট: .is-slidedots-active) */is-slidedots-active { outline: 2px solid ; outline-offset: 2px; border-radius: 12px; }
/* সমান উচ্চতা কার্ড (ঐচ্ছিক) */cms-card { display:flex; flex-direction:column; height:100%; }cms-card_body { margin-top:auto; }
7) পারফরম্যান্স ও UX টিপস
ইমেজ অপটিমাইজ করুন: WebP + সাইজ লিমিট; ল্যাজি-লোড অন।
Slides per view? নেটিভ Webflow Slider সিঙ্গেল-ভিউ; একাধিক একসাথে দেখাতে চাইলে Finsweet Components বা Swiper.js (অন্য পদ্ধতি) বিবেচনা করুন।
Accessibility: Arrow/ডট-এ যথাযথ aria-label, কীবোর্ড ফোকাস অর্ডার ঠিক করুন।
Auto-play: ইউজার হোভার/ফোকাস দিলে Pause রাখুন (নেটিভ Slider-এর হোভার-পজ বিহেভিয়ার কাজে লাগে)। কাস্টম ডট “Slider ভিতরে” রাখলে এই পজ ঠিকমতো ট্রিগার হয়।
8) ট্রাবলশুটিং চেকলিস্ট
Slides বানাচ্ছে না?
fs-cmsslider-element="list" কি Collection List-এ?
fs-cmsslider-element="slider" কি নেটিভ Slider-এ?
ভুল ইনস্ট্যান্স ভ্যালু (যেমন list-2 vs slider-3) মিক্সড হলো কি না।
ইন্টারঅ্যাকশন কাজ করছে না?
Slide Change ট্রিগার লাগলে fs-cmsslider-resetix="true" দিন; initial state-এর সাইড-ইফেক্ট মাথায় রাখুন।
কাস্টম ডট দেখাচ্ছে না?
content এলিমেন্টটি Collection Item-এর ভিতরে আছে তো?
slider-nav এলিমেন্টে আগে থাকা ডট/কনটেন্ট ক্লিয়ার করতে চাইলে fs-sliderdots-remove="true" দিন।
এক পেজে একাধিক স্লাইডার কনফ্লিক্ট?
CMS Slider-এ list-x/slider-x মেলান;
Slider Dots-এ fs-sliderdots-instance="x" ব্যবহার করুন।
9) মিনিমাল HTML ম্যাপ (ধারণার জন্য)
[Slider (fs-cmsslider-element="slider")]
[Mask]
[Slide]
