Elementor เสนอตัวเลือกที่สร้างสรรค์มากมายให้เล่นเพื่อทำให้เว็บไซต์ของคุณดูดีขึ้นสำหรับผู้เยี่ยมชม Sliders และ Carousels เป็นวิธีการสองสามวิธีที่ผู้ใช้ WordPress ได้รวมไว้เพื่อทำให้เว็บไซต์ของตนดูล้ำหน้ายิ่งขึ้น
แถบเลื่อนสร้างขึ้นจากลำดับของสไลด์ และเมื่อปรากฏบนเว็บไซต์ของคุณ แถบเลื่อนมักจะเป็นลำดับเดียวกันซ้ำแล้วซ้ำอีก บทช่วยสอนนี้จะเข้าใจวิธีการสุ่มสไลด์ใน WordPress โดยใช้ Elementor
วิธีการสุ่มสไลด์ใน Elementor Slider
ในการเริ่มต้น ให้เพิ่มบล็อก HTML ที่คุณจะวางโค้ดที่ระบุด้านล่าง
นี่คือรหัสที่คุณต้องวางลงในบล็อก HTML ที่สร้างไว้ก่อนหน้านี้
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลย>script/scriptหากคุณมีตัวเลื่อนมากกว่าหนึ่งตัวในเว็บไซต์ของคุณ ให้อ่านต่อไป นอกจากนั้นทุกอย่างควรจะดี
วิธีการสุ่มสไลด์สำหรับตัวเลื่อนหนึ่งตัวขึ้นไป
เปลี่ยนบรรทัดนี้ในรหัสและตั้งชื่อคลาส FirstSlider
document.querySelector('.elementor-slides');
// change it to
document.querySelector('.slider1 .elementor-slides');คัดลอกโค้ดและเปลี่ยนชื่อคลาส หากคุณต้องการให้ Elementor Sliders เพิ่มเติมในหน้านั้นสุ่ม จากนั้นให้ตั้งชื่อคลาสแยกกัน
จากนั้นคัดลอกและวางโค้ดลงในองค์ประกอบ HTML ต่อจากส่วนประกอบตัวเลื่อนแต่ละรายการที่คุณต้องการสุ่ม
สุดท้าย เปลี่ยนชื่อคลาสให้ตรงกับตัวเลื่อนที่อยู่เหนือองค์ประกอบ HTML ที่สอดคล้องกันในโค้ดบรรทัดเดียวกัน
ตัวอย่างเช่น บรรทัดนี้อาจใช้สำหรับตัวเลื่อนที่สามในเว็บไซต์ของคุณ
document.querySelector('.slider3 .elementor-slides');แค่นั้นแหละ. หากทุกอย่างเป็นไปด้วยดี คุณสามารถไปข้างหน้าและสนุกไปกับ Elementor Slider แบบสุ่มของคุณ อย่าลืมเข้าร่วมกับเราใน Facebook และ Twitter เพื่อไม่พลาดบทเรียนของเรา
