Bài viết được tạo từ ý tưởng của một thành viên trong Group Flatsome Việt Nam và có sử dụng Chat GPT. Các bạn chỉ cần coppy nguyên đoạn js này bỏ vào Footer là xong.

Khi tạo Slider bạn hãy thêm 1 element Text và đặt tiêu đề bất kỳ bạn muốn. Trong thẻ custom class nhớ thêm class=”title-cs” vào như hình bên dưới là được

Đoạn mã tách riêng file css bạn nhớ đặt class cha cho cái slider nhé để không ảnh hưởng tới slider khác

<script>
	document.addEventListener("DOMContentLoaded", function() {
		const observer = new MutationObserver(() => {
			const flktySlider = document.querySelector('.flickity-slider');
			const dotsContainer = document.querySelector('.flickity-page-dots');
			const dots = document.querySelectorAll('.flickity-page-dots .dot');
			const titles = flktySlider?.querySelectorAll('.title-cs');

			if (!flktySlider || !dotsContainer || !dots.length || !titles?.length) return;

			if (titles.length > 0) {
				dots.forEach((dot, index) => {
					const titleText = titles[index]?.textContent?.trim();
					dot.textContent = titleText || '';
				});

				titles.forEach(title => title.remove());
			}

			if (titles.length === dots.length) observer.disconnect();
		});

		observer.observe(document.body, { childList: true, subtree: true });
	});
</script>

<style>
    .title-cs-main .flickity-page-dots {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
        right: calc(2% + 30px);
        left: auto;
    }
    .title-cs-main .flickity-page-dots .dot {
        width: max-content;
        border: none;
        background: none;
        color: #fff;
        opacity: 1;
    }
    .title-cs-main li.dot.is-selected {
        background: none !important;
        font-weight: 600;
    }
    .title-cs-main .slider-nav-light .flickity-page-dots .dot {
        height: auto;
        display: block;
    }
</style>

Đoạn mã gộp chung 1 file

<script>
	document.addEventListener("DOMContentLoaded", function() {
		const observer = new MutationObserver(() => {
			const flktySlider = document.querySelector('.flickity-slider');
			const dotsContainer = document.querySelector('.flickity-page-dots');
			const dots = document.querySelectorAll('.flickity-page-dots .dot');
			const titles = flktySlider?.querySelectorAll('.title-cs');

			if (!flktySlider || !dotsContainer || !dots.length || !titles?.length) return;

			if (titles.length > 0) {
				flktySlider.classList.add('title-cs-main');

				if (flktySlider.classList.contains('title-cs-main')) {
					dotsContainer.style.position = "absolute";
					dotsContainer.style.top = "50%";
					dotsContainer.style.transform = "translateY(-50%)";
					dotsContainer.style.bottom = "auto";
					dotsContainer.style.right = "calc(2% + 30px)";
					dotsContainer.style.left = "auto";
				}

				dots.forEach((dot, index) => {
					const titleText = titles[index]?.textContent?.trim();
					dot.textContent = titleText || '';
					if (titleText && flktySlider.classList.contains('title-cs-main')) {
						dot.style.fontSize = "14px";
						dot.style.padding = "4px 8px";
						dot.style.cursor = "pointer";
						dot.style.width = "max-content";
						dot.style.border = "none";
						dot.style.background = "none";
						dot.style.color = "#fff";
						dot.style.opacity = "1";
						dot.style.height = "auto";
						dot.style.display = "block";

						if (dot.classList.contains('is-selected')) {
							dot.style.background = "none";
							dot.style.fontWeight = "600";
						}
					}
				});

				titles.forEach(title => title.remove());
			}

			if (titles.length === dots.length) observer.disconnect();
		});

		observer.observe(document.body, { childList: true, subtree: true });
	});
</script>