คนจำนวนมากบนไซต์ของตนเองต้องการเห็นแถบเลื่อน - นี่คือบล็อกที่แสดงองค์ประกอบเนื้อหาหนึ่งบนหน้าจอ และหลังจากช่วงระยะเวลาหนึ่งจะเปลี่ยนเนื้อหานี้เป็นอีกองค์ประกอบหนึ่ง นักพัฒนาเว็บทุกคนสามารถสร้างแถบเลื่อนโดยใช้ HTML, CSS และ JavaScript ได้อย่างอิสระ แต่ก็ไม่สมเหตุสมผลเสมอไป คุณจะใช้เวลาค่อนข้างมาก แม้ว่าจะมีโซลูชันสำเร็จรูปบางอย่างบนอินเทอร์เน็ตที่ทำให้ชีวิตของคุณง่ายขึ้นมาก และทำให้ไซต์ของคุณน่าสนใจยิ่งขึ้น บทความนี้จะเน้นที่หนึ่งในวิธีแก้ปัญหาเหล่านี้ที่เรียกว่า Owl Carousel การตั้งค่าตัวเลื่อนนี้ทำได้ง่ายอย่างเหลือเชื่อ ดังนั้นแม้แต่ผู้เริ่มต้นก็สามารถรับมือได้ ตอนนี้ คุณจะได้เรียนรู้ว่าแถบเลื่อนนี้คืออะไร รวมทั้งรายละเอียดที่สำคัญอื่นๆ การตั้งค่า Owl Carousel เป็นกระบวนการทีละขั้นตอน ดังนั้นคุณควรศึกษาเนื้อหานี้ตามลำดับเท่านั้น
มันคืออะไรและทำไมคุณควรเลือกตัวเลื่อนนี้โดยเฉพาะ
Owl Carousel การกำหนดค่าที่จะกล่าวถึงในบทความนี้ เป็นปลั๊กอินที่มีประสิทธิภาพมากที่เพิ่มตัวเลื่อนที่สวยงามและสะดวกให้กับหน้าของคุณ ซึ่งจะช่วยอำนวยความสะดวกในการทำงานของคุณบนเว็บไซต์อย่างมากประหยัดเวลาความพยายามและเงิน ข้อดีของปลั๊กอินนี้โดยเฉพาะ เนื่องจากมีแถบเลื่อนค่อนข้างมากบนเว็บ ความจริงก็คือตัวเลื่อนนี้มีตัวเลือกการปรับแต่งมากมายให้คุณ ซึ่งจะทำให้หน้าของคุณไม่เหมือนใครและเลียนแบบไม่ได้ เป็นปลั๊กอินแบบตอบสนองที่จะทำงานได้กับเบราว์เซอร์ทุกรุ่นและสามารถเชื่อมต่อกับ WordPress และ CMS ยอดนิยมอื่น ๆ ได้อย่างง่ายดาย โดยทั่วไป ตัวเลื่อนนี้มีข้อดีมากมาย ดังนั้นคุณควรเลือกตามที่ต้องการ อย่างไรก็ตาม ก่อนที่คุณจะเริ่มตั้งค่า Owl Carousel คุณต้องโหลดปลั๊กอินนี้ก่อน
ดาวน์โหลด
การตั้งค่า Owl Carousel 2 เป็นไปไม่ได้หากคุณยังไม่ได้ดาวน์โหลดลงในคอมพิวเตอร์ และเนื่องจากนี่เป็นคำแนะนำทีละขั้นตอน คุณจึงควรเริ่มตั้งแต่ต้น ดังนั้น คุณสามารถดาวน์โหลดโปรแกรมได้โดยใช้ตัวจัดการแพ็คเกจ แต่สิ่งเหล่านี้เป็นเครื่องมือสำหรับนักพัฒนาขั้นสูง ดังนั้นที่นี่เราจะบอกคุณถึงวิธีรับปลั๊กอินนี้ด้วยวิธีมาตรฐาน คุณต้องไปที่เว็บไซต์ทางการของปลั๊กอินและดาวน์โหลดเวอร์ชันล่าสุด หลังจากนั้น ไฟล์ที่ดาวน์โหลดทั้งหมดจะต้องถูกโอนไปยังไดเร็กทอรีของไซต์ของคุณ โดยเตรียมโฟลเดอร์ที่สะดวกซึ่งมีชื่อเหมือนกับตัวปลั๊กอินเอง โปรดทราบว่าปลั๊กอินนี้มาพร้อมกับ jQuery ดังนั้นคุณจึงต้องมีไลบรารีนั้นด้วย เมื่อคุณดาวน์โหลดปลั๊กอินนี้แล้ว คุณจะต้องดูแลขั้นตอนต่อไปซึ่งก็คือการตั้งค่าตัวเลื่อน Owl Carousel 2.
CSS
Bการตั้งค่า Owl Carousel 1.3 ยังคงเกือบจะเหมือนกับในเวอร์ชัน 2 ที่ใหม่กว่า โดยจะเพิ่มเฉพาะคุณลักษณะใหม่เท่านั้น อย่างไรก็ตาม ข้อมูลพื้นฐานจะเหมือนเดิม โดยเริ่มจากการเพิ่ม CSS ลงในเอกสารของคุณ ดังนั้นขั้นตอนแรกคือการเพิ่มบรรทัด เธอให้อะไรคุณ นี่คือสตริงที่โหลดสไตล์ที่จำเป็นไปยังไซต์เพื่อแสดงแถบเลื่อน นี่คือจุดที่คุณสามารถทำได้โดยการประมวลผลภาพด้วยตัวเอง อย่างไรก็ตาม มีวิธีแก้ปัญหาที่สะดวกและรวดเร็วกว่า คุณยังสามารถเพิ่มบรรทัดที่โหลดธีมเริ่มต้นของตัวเลื่อนได้ด้วย ทำให้พร้อมใช้งานทันที คุณสามารถแก้ไขสไตล์บางอย่างเพื่อทำให้ตัวเลื่อนของคุณมีเอกลักษณ์และแตกต่าง และเหมาะสมกับเนื้อหาของคุณมากขึ้น โดยปกติการตั้งค่า Owl Carousel ในภาษารัสเซียจะสะดวกมาก แต่ทุกคนที่สร้างเว็บไซต์ควรเข้าใจว่าเขาไม่สามารถทำได้โดยปราศจากความรู้ภาษาอังกฤษ
การเชื่อมต่อ JavaSpript
แน่นอน ตัวเลื่อนจะไม่ทำงานหากไม่มี JS ดังนั้นคุณควรระมัดระวังในการรวมไฟล์ที่เหมาะสมซึ่งมีรหัสที่จำเป็น ในการดำเนินการนี้ คุณต้องแทรกโค้ดหนึ่งบรรทัดจากเอกสารประกอบ อย่างไรก็ตาม ต้องเป็นไปตามเงื่อนไขหนึ่งข้อ ทุกคนรู้ว่า JS เป็นภาษาการเขียนโปรแกรมที่รันคำสั่งทั้งหมดตามลำดับ ดังนั้นในกรณีนี้ คุณควรเพิ่มโค้ดบรรทัดนี้ต่อจากบรรทัดที่เพิ่มไลบรารี jQuery ลงในเอกสารของคุณ เพิ่มเติมด้วย JS ในกรณีของตัวเลื่อนนี้ คุณไม่ต้องทำอะไรเลยต้องการ
การเข้ารหัส HTML
คุณเชื่อมต่อแถบเลื่อนแล้ว ตอนนี้ได้เวลาออกแบบและปรับแต่งมันแล้ว ก่อนอื่น คุณต้องเขียนโค้ด HTML เพื่อให้ตัวเลื่อนปรากฏบนหน้าของคุณเลย ในการทำเช่นนี้ คุณต้องสร้างคอนเทนเนอร์ที่ประกอบด้วยสไลด์ สามารถทำได้โดยใช้แท็ก div ซึ่งจำเป็นต้องกำหนดคลาส owl-carousel เป็นคลาสนี้ที่ทำให้แน่ใจว่าทุกสไตล์ที่เกี่ยวข้องกับตัวเลื่อนจะเปิดใช้งาน คุณยังสามารถเขียนชั้นเรียนอื่น - ธีมนกฮูก มันจะมีประโยชน์หากคุณตัดสินใจที่จะใช้การออกแบบเริ่มต้นหรือใช้ตัวเลื่อนเวอร์ชันมาตรฐานเป็นพื้นฐานสำหรับการทำงานต่อไป
จากนั้นคุณต้องเพิ่มแต่ละสไลด์ในคอนเทนเนอร์แยกต่างหากที่มีแท็ก div แน่นอน คุณสามารถใช้แท็กอื่นๆ ได้ แต่แท็กนี้ดีที่สุดสำหรับตัวเลื่อน
ปลั๊กอินการโทร
และสิ่งสุดท้ายที่คุณต้องทำเพื่อให้ตัวเลื่อนสำเร็จรูปบนเว็บไซต์ของคุณคือการใช้บล็อกของโค้ดนี้:
$(เอกสาร).พร้อม(ฟังก์ชั่น(){
$(".owl-carousel").owlCarousel();
});
ช่วยให้แถบเลื่อนเริ่มทำงาน เช่น เลื่อนดูเนื้อหาเมื่อหน้าเว็บของคุณโหลด ด้วยรหัสเดียวกัน คุณสามารถเชื่อมต่อ Owl Carousel กับ WordPress ได้ การตั้งค่าของปลั๊กอินนี้มีมากมายและหลากหลาย และตอนนี้คุณจะได้เรียนรู้เกี่ยวกับประเด็นที่สำคัญที่สุด
การกำหนดลักษณะและการทำงานของตัวเลื่อน
แล้วคุณใช้คำสั่งอะไรในการปรับแต่งแถบเลื่อนได้บ้าง? ก่อนอื่น คุณต้องจำคำสั่ง items เพราะด้วยคำสั่งนี้ คุณสามารถกำหนดจำนวนสไลด์ในแถบเลื่อนของคุณได้ คำสั่งวนรอบจะให้คุณเลือกว่าจะวนลูปตัวเลื่อนหรือหยุดเลื่อนที่องค์ประกอบสุดท้าย นอกจากนี้ยังมีคำสั่ง Drag ซึ่งมีหลายตัวเลือก เช่น เมาส์และการสัมผัส ในกรณีแรก คุณสามารถทำให้องค์ประกอบต่างๆ ของตัวเลื่อนเลื่อนได้ด้วยการกดเมาส์ค้างไว้ และในกรณีที่สอง โดยใช้การสัมผัส (คำสั่งนี้เหมาะสำหรับอุปกรณ์เคลื่อนที่) คำสั่งที่สำคัญอีกคำสั่งหนึ่งคือ nav ซึ่งช่วยให้สามารถแสดงลูกศรนำทางได้ คุณสามารถใช้คำสั่ง navText เพื่อเพิ่มป้ายกำกับให้กับปุ่มนำทางได้ นอกจากนี้ คุณไม่ควรลืมเกี่ยวกับคำสั่งเล่นอัตโนมัติ ซึ่งช่วยให้คุณสามารถเปิดและปิดการเริ่มต้นอัตโนมัติของการหมุนสไลด์ของตัวเลื่อนของคุณเมื่อโหลดหน้า ด้วยคำสั่งนี้ คุณยังสามารถใช้ autoplayTimeout ซึ่งคุณสามารถตั้งค่าเฉพาะเป็นมิลลิวินาที ซึ่งจะกำหนดเวลาระหว่างการหมุนอัตโนมัติของแต่ละสไลด์
หากคุณใช้การออกแบบเว็บแบบตอบสนอง นั่นคือการออกแบบหน้าของคุณจะเปลี่ยนแปลงโดยอัตโนมัติขึ้นอยู่กับอุปกรณ์ที่รับชม จากนั้นคุณจะต้องจำคำสั่งตอบสนอง ซึ่งช่วยให้คุณกำหนดจำนวนสไลด์ได้ ที่จะแสดงขึ้นอยู่กับความกว้างของหน้าจอที่กำลังดูอยู่