แถบเลื่อน jQuery แบบปรับได้สำหรับหน้า Landing Page แถบเลื่อน jQuery แบบปรับได้สำหรับแกลเลอรี Slick ของหน้า Landing Page

สวัสดีทุกคน และวันนี้ฉันจะเล่าให้คุณฟังเกี่ยวกับสไลเดอร์สุดเท่และที่สำคัญที่สุดคือสลิค

ไปที่เว็บไซต์ http://kenwheeler.github.io/slick/คุณจะพบตัวอย่างมากมายเกี่ยวกับวิธีการทำงานของแถบเลื่อนที่ลื่นไหล แถบเลื่อนนี้มีเอฟเฟกต์ที่แตกต่างกันมากมายและยังมีการเลื่อนเมาส์ด้วย เหล่านั้น. คุณสามารถคลิกองค์ประกอบใดก็ได้ในตัวเลื่อนด้วยปุ่มซ้ายของเมาส์ และในขณะที่กดค้างไว้ ให้เลื่อนตัวเลื่อนไปทางซ้ายหรือขวา คุณลักษณะนี้ไม่ได้มีประโยชน์ทั้งหมดสำหรับคอมพิวเตอร์ แต่สำหรับสมาร์ทโฟนและแท็บเล็ตจะดีมาก!

ดังนั้นเพื่อเชื่อมต่อ ให้ดาวน์โหลดไฟล์จากเว็บไซต์ที่ระบุด้านบน ตอนนี้เรามาสร้าง html และเชื่อมต่อส่วนประกอบที่จำเป็น โดยเฉพาะ jquery เพราะ แถบเลื่อนใช้ไลบรารีนี้ในการทำงาน

เนื้อหาของคุณ
เนื้อหาของคุณ
เนื้อหาของคุณ

เชื่อมต่อสไตล์

และเชื่อมต่อสคริปต์

ในการเริ่มต้นแถบเลื่อน ให้เขียนสิ่งต่อไปนี้ในแท็กสคริปต์:

$(".your-class").slick((
ชื่อการตั้งค่า: การตั้งค่า-ค่า
});
});

ไฟล์ html ของคุณจะออกมาหน้าตาแบบนี้:

เนียน

เนื้อหาของคุณ
เนื้อหาของคุณ
เนื้อหาของคุณ

$(เอกสาร).พร้อม(ฟังก์ชั่น())(
$(".your-class").slick((
ชื่อการตั้งค่า: การตั้งค่า-ค่า
});
});

แถบเลื่อนนี้มีการตั้งค่ามากมายที่คุณสามารถตั้งค่าได้เอง คุณสามารถค้นหาทั้งหมดได้จากเว็บไซต์เดียวกันที่ด้านล่างของหน้าในป้าย ควรตั้งค่าไว้ระหว่างการเริ่มต้นในออบเจ็กต์

$(document).ready(function())( $(".your-class").slick(( เล่นอัตโนมัติ: true; )); ));

ใน ในตัวอย่างนี้เราระบุว่าการพลิกดูสไลด์โดยอัตโนมัตินั้นคุ้มค่า

อย่างที่คุณเห็นแถบเลื่อนนั้นติดตั้งและกำหนดค่าได้ง่ายมาก แต่ช่วยให้คุณทำสิ่งที่ยอดเยี่ยมจริงๆได้ ขอบคุณสำหรับความสนใจของคุณ แล้วพบกันใหม่!

เหนือสิ่งอื่นใด แถบเลื่อนรองรับการปัดโดยการลากองค์ประกอบบนหน้าจอสัมผัส ซึ่งไม่ต้องสงสัยเลยว่าจะทำให้ผู้เยี่ยมชมเว็บไซต์ของคุณพอใจโดยใช้สมาร์ทโฟนหรือแท็บเล็ต

ดังนั้นแถบเลื่อนจึงเรียกว่า slick.js - หากต้องการเชื่อมต่อแถบเลื่อนกับไซต์ของคุณ ให้แทรกโค้ดต่อไปนี้ลงในส่วนหัวของไซต์ของคุณ:

แค่นั้นแหละ! แถบเลื่อนพร้อมใช้งานแล้ว ตอนนี้สิ่งที่คุณต้องทำคือเชื่อมต่อมันเข้ากับองค์ประกอบที่จำเป็น เราเขียน html:

เนื้อหา 1 เนื้อหา 2 เนื้อหา 3 เนื้อหา 4

และเชื่อมต่อแถบเลื่อนเข้ากับมัน (โค้ดนี้ควรวางไว้ที่ส่วนหัวจะดีกว่า):

$(document).ready(function())( $(".my-slider").slick(( //setting )); ));

หลังจากการปรับเปลี่ยนง่ายๆ เหล่านี้ แถบเลื่อนที่ลื่นไหลของคุณจะเริ่มทำงานโดยใช้การตั้งค่าเริ่มต้น

แทน เนื้อหา 1, เนื้อหา 2และอื่นๆ คุณสามารถโพสต์เนื้อหาใดก็ได้ เช่น รูปภาพ หัวเรื่อง ย่อหน้า ฯลฯ ตัวอย่างเช่น สำหรับร้านค้าออนไลน์ คุณสามารถสร้างตัวหมุนผลิตภัณฑ์ได้:

$(document).ready(function())( $(".product-slider").slick(( //setting )); )); ไม้กวาดพลาสติก ไม้กวาด

คุณสามารถเพิ่มองค์ประกอบลงในโรเตอร์ได้ไม่จำกัดจำนวน

ตัวเลื่อนยังรองรับการตั้งค่าหลายอย่าง เช่น จำนวนองค์ประกอบที่แสดง จำนวนองค์ประกอบที่เลื่อนได้ ตัวเลื่อนแนวตั้งหรือแนวนอน ความเร็วในการเลื่อน ฯลฯ

คุณยังสามารถปรับแต่งจำนวนรายการที่แสดงสำหรับความละเอียดการแสดงผลที่แตกต่างกันได้:

$(document).ready(function())( $(".product-slider").slick(( responsive: [ ( เบรกพอยต์: 1024, // สำหรับการแสดงผลสูงสุด 1024px และการตั้งค่าที่ใหญ่กว่า: ( slidesToShow: 3, / / จำนวนองค์ประกอบที่แสดง 3 สไลด์ToScroll: 3, // จำนวนองค์ประกอบที่เลื่อนได้ในแต่ละครั้ง 3 จุด: จริง // แสดงจุด (ตามจำนวนองค์ประกอบ) ), ( เบรกพอยต์: 600, // สำหรับการแสดงการตั้งค่าน้อยกว่า 600px: ( slidesToShow : 2, // จำนวนองค์ประกอบที่แสดง 2 สไลด์ToScroll: 2 // จำนวนองค์ประกอบที่เลื่อนได้ในแต่ละครั้ง 2 ) ), ( เบรกพอยต์: 480, // สำหรับการแสดงการตั้งค่าน้อยกว่า 480px: ( slidesToShow: 1, // จำนวนการเลื่อนได้ องค์ประกอบในแต่ละครั้ง 1 สไลด์ToScroll: 1 // หมายเลของค์ประกอบที่สามารถเลื่อนได้ครั้งละ 1 ) ) ] ));

มากขึ้นอีกด้วย การตั้งค่าโดยละเอียดสามารถพบได้ที่

สวัสดีเพื่อนๆ. วันนี้เราจะพูดถึงแถบเลื่อน jQuery แบบปรับได้ที่จะช่วยตกแต่งของคุณ หน้า Landing Pageจัดโครงสร้างข้อมูลให้ถูกต้องและนำเสนออย่างกระชับ

ฉันเคยทำการสำรวจใน เครือข่ายสังคมออนไลน์และขอให้แนะนำสคริปต์ตัวเลื่อนที่เหมาะสมที่คุณใช้เอง โพสต์ไม่ประสบความสำเร็จเป็นพิเศษ แต่ฉันได้รับคำแนะนำว่าเป็นเครื่องมือที่ยอดเยี่ยมซึ่งจะเป็นอันดับแรกในวันนี้ สำหรับเรื่องนั้น-ขอบคุณมาก บางทีหลังจากบทความนี้อาจมีคนแนะนำสคริปต์ที่ดียิ่งขึ้น

เนื่องจากสคริปต์ทั้งหมดที่นำเสนอด้านล่างนี้เป็นปลั๊กอิน jQuery จึงสามารถรวมเข้ากับไซต์ html ทั่วไปได้อย่างง่ายดาย รวมถึงใน CMS และไฟล์ .

ในความคิดของฉัน Owl Carousel 2 เป็นตัวเลื่อน jQuery ฟรีที่ดีที่สุด การตั้งค่ามากมาย ความพร้อมใช้งานของ API และความเป็นไปได้ในการปรับแต่งอย่างสมบูรณ์ ฉันตกหลุมรักทั้งหมดนี้ตั้งแต่แรกเห็น ตอบสนองได้อย่างสมบูรณ์แบบบนสมาร์ทโฟนและแท็บเล็ต รองรับการปัดนิ้ว และอื่นๆ อีกมากมาย

อันดับที่สอง ตอนนี้ฉันจะใส่ตัวเลื่อน Slick ค่อนข้างเป็นตัวเลือกที่น่าสนใจที่ฉันใช้มาระยะหนึ่งแล้ว สำหรับงานต่างๆ หน้า Landing Page เหมาะกับฉันค่อนข้างดี ความคิดเห็นเกี่ยวกับการออกแบบ โลโก้ของแบรนด์และพันธมิตร แถบเลื่อนนี้จัดการเรื่องทั้งหมดนี้ได้อย่างยอดเยี่ยม สามารถใช้วิธีการและเหตุการณ์รวมทั้งแสดงแถบเลื่อนได้หลายตำแหน่งบนหน้า

แสดงแถบเลื่อนและภาพหมุนที่ลื่นไหลหลายภาพโดยใช้รหัสย่อพร้อมหมวดหมู่ ตอบสนองอย่างเต็มที่ เปิดใช้งานการปัด การลากเมาส์บนเดสก์ท็อป และการวนซ้ำไม่สิ้นสุด เข้าถึงได้อย่างเต็มที่ด้วยการนำทางด้วยปุ่มลูกศร เล่นอัตโนมัติ จุด ลูกศร ฯลฯ

ใช้ประเภทโพสต์ที่กำหนดเองและอนุกรมวิธานเพื่อสร้างแถบเลื่อน โดยมีตัวเลือกเกือบไม่จำกัดและรองรับแถบเลื่อนหลายตัวในหน้าใดก็ได้ คุณยังสามารถแสดงแถบเลื่อนรูปภาพบนส่วนหัวของเว็บไซต์ของคุณได้

เราได้เพิ่มการออกแบบตัวเลื่อน 5 แบบและแบบหมุน 1 แบบ คุณสามารถค้นหาการออกแบบทั้งหมดได้บนเว็บไซต์สาธิตของเรา เพียงคัดลอกรหัสย่อของการออกแบบที่คุณต้องการแล้วนำไปใช้

• [*] อัปเดตลิงก์สาธิต
• [*] แก้ไขปัญหาเล็กๆ น้อยๆ บางอย่าง
• [*] อัปเดตข้อความใต้รูปภาพเด่น เช่น เพิ่มรูปภาพตัวเลื่อน

• [+] เพิ่มพารามิเตอร์รหัสย่อใหม่ เช่น image_fit=”true” พารามิเตอร์ image_fit ใช้เพื่อระบุวิธีปรับขนาดรูปภาพให้พอดีกับคอนเทนเนอร์ โดยค่าเริ่มต้นคือ "จริง" ตัวเลือกคือ"จริงหรือเท็จ" หมายเหตุ: หมายเหตุ: image_fit=”true” ทำงานได้ดีขึ้นหากกำหนดความสูงของแถบเลื่อน ถ้า image_fit="false" ไม่จำเป็นต้องใช้พารามิเตอร์ sliderheight
• พารามิเตอร์ [*] image_fit ใช้ได้กับทั้งรหัสย่อ
• [+] เพิ่มพารามิเตอร์รหัสย่อใหม่ เช่น image_size=”full” สำหรับรหัสย่อ (ค่าเริ่มต้นคือ “เต็ม” ค่าคือรูปขนาดย่อ, ปานกลาง, ปานกลาง_ใหญ่, ใหญ่, เต็ม)
• [-] ลบความสูงเริ่มต้น 400 ออกจากพารามิเตอร์ Sliderheight
• [-] ลบคุณสมบัติ CSS แบบ object-fit ออกจาก img ภายใต้ CSS ถ้า image_fit="false"

• [*] การเปลี่ยนแปลงเล็กน้อยในขั้นตอนการเลือกใช้

• [*] อัปเดตขั้นตอนการเลือกเข้าร่วม

• [*] ทดสอบกับ WordPress 5.0 และ Gutenberg
• [*] แก้ไขปัญหาความสูงของตัวเลื่อนกับการออกแบบบางอย่าง
• [*] เพิ่มความปลอดภัยด้วย esc_url และ esc_html
• [*] แก้ไขปัญหา CSS บางอย่าง

• [*] ปฏิบัติตามหลักเกณฑ์ปลั๊กอินโดยละเอียดของ WordPress

• [*] แก้ไขปัญหา CSS บางอย่างที่เกี่ยวข้องกับลูกศรเลื่อน

• [*] แก้ไขปัญหา CSS บางอย่าง

• [*] อัปเดต slick.min.js เป็นเวอร์ชันล่าสุด
• [*] แก้ไขปัญหาการตอบสนองทั้งหมดและตรวจสอบอุปกรณ์มือถือจำนวนมาก
• [*] หากคุณใช้ปลั๊กอินแคช โปรดล้างแคชหลังจากอัปเดตปลั๊กอิน

• [*] แก้ไขปัญหาการออกแบบ 6 ด้วยพารามิเตอร์รหัสย่อตัวแปรความกว้าง = "true" ในรูปแบบที่ตอบสนอง
• [*] หากคุณใช้ปลั๊กอินแคช โปรดล้างแคชหลังจากอัปเดตปลั๊กอิน

• [*] แก้ไขปัญหาการออกแบบ -6 ด้วยพารามิเตอร์รหัสย่อตัวแปรความกว้าง = "จริง"
• [*] หากคุณใช้ปลั๊กอินแคช โปรดล้างแคชหลังจากอัปเดตปลั๊กอิน

• [*] แก้ไขปัญหาการตอบสนองที่รายงานโดยผู้ใช้ใน v-1.3.1
• [*] หากคุณใช้ปลั๊กอินแคช โปรดล้างแคชหลังจากอัปเดตปลั๊กอิน

• [*] แก้ไขปัญหาหลัก JS wp_register_script

• [+] เพิ่มพารามิเตอร์ Sliderheight ในรหัสย่อ
• [*] RTL ปรับปรุงการทำงานกับเว็บไซต์ RTL ให้ดีขึ้น
• [*] โหมดกึ่งกลางและความกว้างของตัวแปรได้รับการปรับปรุงให้ดีขึ้นตามความคิดเห็นของผู้ใช้
• [*] ปรับปรุงพารามิเตอร์ Sliderheight แล้ว

• [+] รองรับ RTL

• [+] เพิ่มการซ้อนทับสำหรับการออกแบบ -2

• [+] เพิ่ม "แท็บวิธีการทำงาน"
• [-] ลบแท็บการออกแบบ Pro ออก

• อัปเดตการออกแบบทั้งหมดและแก้ไขข้อบกพร่อง
• แก้ไขปัญหาการแสดงรูปภาพบนมือถือ
• แทนที่รูปภาพลูกศร

• อัปเดต Slider js เป็นเวอร์ชันล่าสุด
• อัปเดตหน้าการออกแบบปลั๊กอิน

• แก้ไขปัญหา CSS บางอย่าง

• แก้ไขปัญหา CSS บางอย่าง
• แก้ไขปัญหาข้อขัดแย้ง jquery ของตัวเลื่อนหลายตัว

• แก้ไขข้อบกพร่องบางอย่าง
• เพิ่มเวอร์ชัน Pro ด้วย 16 แบบ

บทความนี้ให้ภาพรวมของการติดตั้งและการทำงานของแถบเลื่อนแบบเรียบ ตัวเลือกที่เป็นไปได้สำหรับการใช้แถบเลื่อนจะพิจารณาคุณสมบัติของการสลับสไลด์และวิธีการส่งออก

บ่อยครั้งในแหล่งข้อมูลทางอินเทอร์เน็ตต่างๆ คุณจะพบเทคนิคการทำงานเช่นแถบเลื่อน แถบเลื่อนคือรูปภาพที่กำหนดเองหลายภาพที่แจ้งให้ผู้เยี่ยมชมทราบเกี่ยวกับทิศทางที่เป็นไปได้ในการดำเนินงานของบริษัท สามารถตั้งค่าการสลับแถบเลื่อนได้ โหมดอัตโนมัตินั่นคือหลังจากช่วงระยะเวลาหนึ่ง สไลด์จะเลื่อนไปเอง เป็นที่น่าสังเกตว่าอาจมีหลายสไลด์ในพื้นที่ที่มองเห็นได้ ยิ่งไปกว่านั้น เนื้อหาไม่เพียงแต่เป็นรูปภาพเท่านั้น แต่ยังเป็นลิงก์หรือแบบฟอร์มอีกด้วย ข้อเสนอแนะหรือเทคนิคการใช้งานอื่นๆ

มีแถบเลื่อนอยู่สองสามประเภทและวิธีนำไปใช้ ในบทความนี้ เราจะมาดูกันว่าแถบเลื่อนทำงานอย่างไร นี่คือแถบเลื่อนที่ใช้กันทั่วไปและเป็นสากลที่สุด แต่ก็คุ้มค่าที่จะสังเกตถึงความง่ายในการใช้งาน

ขั้นตอนแรกในการติดตั้งแถบเลื่อนคือการดาวน์โหลดปลั๊กอิน สามารถดาวน์โหลดได้จากแหล่งข้อมูลของผู้เขียนปลั๊กอิน มีการอธิบายการตั้งค่าต่างๆ ไว้ที่นั่นด้วย แต่เป็นภาษาอังกฤษ

ช่องวิธีการดาวน์โหลดไฟล์เก็บถาวรที่ดาวน์โหลดด้วยแถบเลื่อน - แยกโฟลเดอร์ไปยังไดเร็กทอรีของเว็บไซต์ของเรา หากคุณดูไฟล์แถบเลื่อน คุณจะเห็นว่าปลั๊กอินมีสไตล์ชีตเป็นของตัวเอง ดังนั้นเพื่อให้สามารถเชื่อมต่อได้ คุณจะต้องเขียนโค้ดบางส่วนไว้ในบริเวณแท็กส่วนหัว มันจะมีลักษณะเช่นนี้

< link rel= "stylesheet" type= "text/css" href= "slick/slick.css" /> < link rel= "stylesheet" type= "text/css" href= "slick/slick-theme.css" />

กระบวนการรวมสไตล์ไม่แตกต่างจากไฟล์ CSS ทั่วไป หลังจากนี้คุณจะต้องเชื่อมต่อไลบรารีตัวเลื่อน โดยปกติจะรวมอยู่ในไฟล์แยกต่างหากซึ่งมีลิงก์ทั้งหมดไปยังไฟล์โค้ด js หากคุณไม่มีไฟล์ดังกล่าว จะต้องแทรกโค้ดในแท็ก body ก่อนปิด นี่คือลักษณะของโค้ด

< script type= "text/javascript" src= "//code.jquery.com/jquery-1.11.0.min.js" > < script type= "text/javascript" src= "//code.jquery.com/jquery-migrate-1.2.1.min.js" > < script type= "text/javascript" src= "slick/slick.min.js" >

หลังจากนี้เราสามารถเริ่มสร้างเนื้อหา HTML ของแถบเลื่อนของเราได้ ที่นี่ฉันอยากจะชี้ให้เห็นถึงคุณสมบัติอย่างหนึ่งของเนียน แถบเลื่อนส่วนใหญ่สร้างขึ้นโดยใช้รายการ ซึ่งส่วนประกอบต่างๆ ทำหน้าที่เป็นสไลด์ ปลั๊กอินดังกล่าวใช้งานไม่ได้กับรายการ แต่มีองค์ประกอบบล็อก นี่เป็นสิ่งสำคัญโดยพื้นฐาน เพราะหากสไลด์อยู่ในรายการ โค้ดจะไม่ทำงาน โค้ด HTML ของตัวเลื่อนที่เนียนควรมีลักษณะเช่นนี้

< div class = "slick-slider" > < div>สไลด์1< div>สไลด์2< div>สไลด์3

ขั้นตอนสุดท้ายของการติดตั้งแถบเลื่อนคือการแทรกสคริปต์ที่เริ่มการทำงาน ในเวลาเดียวกัน สคริปต์นี้มีหน้าที่รับผิดชอบการตั้งค่าตัวเลื่อน ขึ้นอยู่กับคลาสและคำสั่งที่ใช้ เราสามารถสร้างแถบเลื่อนที่แตกต่างกันได้ ในรูปแบบที่แตกต่างกันการนำเสนอสไลด์และการเลี้ยว เราจะกล่าวถึงรายละเอียดเพิ่มเติมด้านล่าง แต่ตอนนี้เราจะแสดงสคริปต์ตัวอย่าง

$(เอกสาร) . พร้อม(ฟังก์ชั่น () ( $(".slick-slider).slick(( ชื่อการตั้งค่า: การตั้งค่า-ค่า )); ));

สคริปต์นี้ถูกแทรกเข้าไป แยกไฟล์โดยที่สคริปต์ทั้งหมดที่ทำงานบนไซต์ถูกรวบรวม หรืออยู่หลังเนื้อหา HTML ของแถบเลื่อนภายในแท็กสคริปต์

ปลั๊กอินประเภทแรกและง่ายที่สุดที่เรากำลังเรียนรู้คือการนำเสนอสไลด์เดี่ยว ในกรณีนี้ เราจะมีหนึ่งสไลด์ที่แสดงทั่วทั้งความกว้างของหน้าจอ เมื่อสลับไปตามลูกศรจะมีเพียงสไลด์เดียวเท่านั้นที่เปลี่ยนไป หากต้องการใช้โซลูชันดังกล่าว คุณต้องแทรกโค้ดต่อไปนี้ลงในสคริปต์ตัวกระตุ้น

$(".สไลด์เดียว") . เนียน() ;

แถบเลื่อนดังกล่าวจะมีลักษณะดังนี้

ไม่ใช่เรื่องยากที่จะคาดเดาว่าหากมีแถบเลื่อนเวอร์ชันเดียวคุณสามารถใช้หลายแถบพร้อมกันได้ กล่าวอีกนัยหนึ่ง สไลด์หลายสไลด์จะแสดงบนหน้าจอพร้อมกัน และคุณสามารถตรวจสอบให้แน่ใจว่าสไลด์สลับทีละสไลด์หรือหลายสไลด์ หรือทั้งหมดพร้อมกัน แถบเลื่อนดังกล่าวถูกจัดระเบียบโดยใช้สคริปต์ต่อไปนี้

$(".หลายสไลด์ " ) . เนียน (( อนันต์: true , slidesToShow: 3 , // จำนวนสไลด์ที่แสดงบนหน้าจอ slidesToScroll: 2 // จำนวนสไลด์ที่ถูกเลื่อนในแต่ละครั้ง ) ) ;

ในทางปฏิบัติมันจะเป็นแบบนี้

ในทางปฏิบัติ แถบเลื่อนส่วนใหญ่จะวนซ้ำ พูดง่ายๆ คือ หลังจากแสดงสไลด์สุดท้ายแล้ว สไลด์จะสลับไปที่จุดเริ่มต้นของรายการ และแถบเลื่อนจะทำงานอีกครั้ง มีวิธีแก้ไขที่ให้คุณสร้างแถบเลื่อนโดยไม่ต้องวนซ้ำได้ นั่นคือการสลับจะไม่เกิดขึ้นหลังสไลด์สุดท้ายเช่นเดียวกับใน ทิศทางย้อนกลับจะไม่มีอะไรแสดงก่อนภาพแรก เราค้นหาและจดจำชุดโค้ดที่เชื่อมต่อแถบเลื่อนดังกล่าว

SlidesToShow: 4 , slidesToScroll: 2 , ) ) ;

และในเบราว์เซอร์เราได้รับสิ่งนี้:

ฉันต้องการทราบว่าสำหรับแถบเลื่อนประเภทนี้ คุณสามารถกำหนดค่าการแสดงผลแบบปรับได้ของสไลด์จำนวนหนึ่ง ขึ้นอยู่กับความกว้างของหน้าจอ ตัวอย่างเช่น คุณต้องแสดงเพียง 2 สไลด์เมื่อความกว้างของหน้าจอน้อยกว่า 600 พิกเซล และจะสลับไปทีละสไลด์ วิธีแก้ไขปัญหานี้จะมีลักษณะเช่นนี้

$(".uncycle") . เนียน (( อนันต์: false ความเร็ว: 350 , // กำหนดความเร็วในการเลื่อนสไลด์ SlidesToShow: 4 , // จำนวนสไลด์ที่จะแสดงสไลด์ ToScroll: 2 , // จำนวนสไลด์ที่จะเลื่อนในแต่ละครั้งตอบสนอง: [ ( เบรกพอยต์: 600 , // แจ้งเมื่อต้องเปิดใช้งานการตั้งค่าความกว้างหน้าจอ: ( slidesToShow: 2 , slidesToScroll: 1 , infinite: true , ) ) ] ) ) ;

ตัวเลื่อนประเภทถัดไปที่เราจะดูคือตัวเลื่อนที่มีความกว้างของสไลด์แบบแปรผัน โซลูชันนี้ช่วยให้เราสามารถใช้รูปภาพที่มีความกว้างต่างกันได้ ซึ่งในบางกรณีจะรักษาคุณภาพของภาพไว้ คุณยังสามารถวางแถบเลื่อนปัจจุบันไว้ตรงกลางเพื่อให้ได้ผลลัพธ์ที่สวยงามยิ่งขึ้น

$(".var-ความกว้าง") . เนียน (( อนันต์: true , ความเร็ว: 250 , // กำหนดความเร็วในการเลื่อน SlidesToShow: 1 , // จำนวนสไลด์ที่จะแสดง centerMode: true , // สไลด์ปัจจุบันอยู่กึ่งกลาง ตัวแปรWidth: true // ตั้งค่าความกว้างของตัวแปร ) ) ;

นอกจากนี้ยังมีตัวเลือกที่คล้ายกันซึ่งช่วยให้คุณสร้างแถบเลื่อนที่มีความสูงของสไลด์แบบแปรผันได้ ในการดำเนินการนี้ คุณต้องเปลี่ยนบรรทัดสุดท้ายในโค้ดที่แสดงด้านบนเป็น

ความสูงที่ปรับได้: จริง

สำหรับเวอร์ชัน Slick 1.5 คุณสามารถเพิ่มพารามิเตอร์ตัวเลื่อนผ่านโค้ด HTML โดยใช้แอตทริบิวต์ data-slick คุณลักษณะที่ระบุได้รับการออกแบบมาเป็นพิเศษเพื่อยกเว้นการใช้โค้ด js เอกสาร HTML- ด้านล่างนี้เป็นตัวอย่างของการใช้แอตทริบิวต์

< div class = "slick-slider" data- slick= "{"slidesToShow": 3, "slidesToScroll": 1}" > < div>สไลด์1< div>สไลด์2< div>สไลด์3

เอฟเฟกต์ภาพจะไม่แตกต่างจากตอนที่เราใช้โค้ด js ภายในแท็กสคริปต์

ตัวเลือกที่ได้รับความนิยมมากคือเมื่อวางสไลด์หลักซึ่งเป็นจุดสนใจของผู้ใช้ไว้ตรงกลางหน้าจอ ในกรณีนี้ สไลด์ด้านนอกสุดจะขยายออกไปเลยโซนที่มองเห็นได้เล็กน้อย สิ่งนี้จะสร้างเอฟเฟกต์ภาพที่ดี นอกจากนี้ ควบคู่ไปกับสิ่งนี้ เราจะตรวจสอบให้แน่ใจว่าสไลด์ที่กำหนดโฟกัสนั้นขยายใหญ่ขึ้นเล็กน้อย ในการดำเนินการนี้ เราจะเพิ่มช่องว่างภายในสำหรับบล็อกที่มีสไลด์ เฉพาะในกรณีที่ใช้รูปภาพเป็นสไลด์เท่านั้น จึงจะมองไม่เห็นเอฟเฟกต์ ทำได้ดังนี้

$(".กลาง") . เนียน (( centerMode: true , // จัดกึ่งกลางสไลด์ปัจจุบัน centerPadding: "50px" , // ขยายสไลด์ปัจจุบันเล็กน้อย ToShow: 3 // แสดง 3 สไลด์สำหรับการดู ) ) ;

ในที่สุดเราก็ได้สิ่งนี้

ใน สภาพมาตรฐานตัวเลื่อนทำการแทนที่สไลด์อย่างกะทันหัน แต่ฟังก์ชั่น Slick ให้โหมดการแทนที่สไลด์ที่ราบรื่น ในการดำเนินการนี้ คุณจะต้องใช้แอตทริบิวต์ data-lazy ซึ่งระบุเส้นทางไปยังรูปภาพ ไม่ควรกำหนดแอตทริบิวต์ให้กับ wrapper แต่ให้กับแท็กรูปภาพ วิธีนี้จะหลีกเลี่ยงการใช้โค้ด js อีกทางเลือกหนึ่งคือคำสั่งนี้

lazyLoad: "ตามความต้องการ"

คุณลักษณะควรเขียนเช่นนี้

< img data- lazy = " images/slaid.jpg" >

ความพิเศษของแถบเลื่อนนี้คือมีเพียงสไลด์เดียวบนหน้าจอ ซึ่งเมื่อสลับแล้วจะค่อยๆ เลื่อนไปยังสไลด์ถัดไป ผลลัพธ์ที่ได้ขึ้นอยู่กับหลักการเพิ่มความโปร่งใสอย่างราบรื่น นั่นคือมีการเลือกช่วงเวลาหนึ่งซึ่งในระหว่างนั้นความโปร่งใสของสไลด์แรกจะเปลี่ยนจาก 0% เป็น 100% เนื่องจากสไลด์ถัดไปจะมองเห็นได้ สคริปต์สำหรับแถบเลื่อนดังกล่าวจะมีลักษณะเช่นนี้

$(".จาง") . เนียน (( อนันต์: จริง ความเร็ว: 400 จาง: จริง cssEase: "เชิงเส้น" ) ) ;

แถบเลื่อนประเภทนี้มีความแตกต่างพิเศษมากกว่าแถบเลื่อนก่อนหน้า เอฟเฟ็กต์การซิงโครไนซ์ปรากฏให้เห็นในความจริงที่ว่าตัวเลื่อนกับสไลด์นั้นถูกผลักไสไปที่พื้นหลัง มุมมองที่กว้างขึ้นของสไลด์ปัจจุบันเป็นสิ่งสำคัญ การแสดงตัวอย่างนี้อยู่เหนือแถบเลื่อน ความลับของแอนิเมชั่นนี้อยู่ที่เอาต์พุตของแถบเลื่อน 2 ตัวซึ่งสลับสไลด์พร้อมกันโดยมีเพียงตัวเดียวเท่านั้นที่แสดงเพียงบล็อกเดียวและหลายตัวที่สอง สคริปต์ตัวเลื่อน:

$(".main") . เนียน (( slidesToShow: 1 , slidesToScroll: 1 , ลูกศร: false , fade: true , asNavFor: ".slider-nav" ) ) ;

$(".second).slick(( slidesToShow: 3, slidesToScroll: 1, asNavFor: " . เลื่อน- สำหรับ ", จุด: จริง, centerMode: จริง, focusOnSelect: จริง ));

การตั้งค่า ดังที่คุณอาจสังเกตเห็นแล้วว่าสคริปต์เปิดใช้งานมีบทบาทนำในตัวเลื่อน โดยจะเชื่อมโยงฟังก์ชันการทำงานของแถบเลื่อนทั้งหมดเข้ากับบล็อกเฉพาะพร้อมรูปภาพหรือข้อมูลอื่นๆ และขึ้นอยู่กับคำสั่งที่เขียนในสคริปต์นี้ มีแถบเลื่อน Slick หลายประเภทที่แตกต่างกันฟังก์ชั่น

• - ด้านล่างนี้คือรายการคำสั่งเหล่านี้พร้อมคำอธิบายของแต่ละคำสั่ง นี่จะเป็นสูตรโกงที่ดีสำหรับคุณหากคุณยังใหม่กับแถบเลื่อนนี้
• การเข้าถึง – ค่าเริ่มต้นของพารามิเตอร์นี้ตั้งค่าเป็นจริง โดยมีหน้าที่เชื่อมต่อปุ่มนำทางสำหรับแถบเลื่อน - เหล่านี้คือลูกศรไปข้างหน้าและย้อนกลับรวมถึงปุ่มในรูปแบบของจุด
• AdaptiveHeight – ใช้กับแถบเลื่อนเดียวเท่านั้น ซึ่งจะเปลี่ยนความสูงของคอนเทนเนอร์หลักโดยขึ้นอยู่กับความสูงของแถบเลื่อน ในสภาวะเริ่มต้น การตั้งค่าจะไม่ถูกเชื่อมต่อ
• เล่นอัตโนมัติ – ตั้งค่าการหมุนสไลด์โดยอัตโนมัติ โดยที่ผู้ใช้ไม่ต้องดำเนินการใดๆ ค่าเริ่มต้นสำหรับการตั้งค่านี้เป็นเท็จ
• autoplaySpeed ​​​​- พารามิเตอร์นี้ช่วยสำหรับการเล่นอัตโนมัติและกำหนดระยะเวลาหลังจากที่สไลด์จะพลิกกลับโดยอัตโนมัติ เริ่มแรกตั้งค่าไว้ที่ 3,000 มิลลิวินาที ลูกศร – เชื่อมต่อลูกศรไปข้างหน้าและข้างหลังเข้ากับแถบเลื่อน การใช้สไตล์ชีตภายนอก คุณสามารถเปลี่ยนตำแหน่งและรูปร่าง
• ลูกศรเหล่านี้
• asNavFor – สร้างการเชื่อมต่อการนำทางระหว่างแถบเลื่อนสองตัวโดยใช้ตัวระบุหรือคลาส ในเงื่อนไขเริ่มต้น พารามิเตอร์จะสอดคล้องกับค่าศูนย์
• prevArrow – ให้คุณเปลี่ยนรูปลักษณ์ของลูกศรนำทางมาตรฐาน ซึ่งจะเลื่อนผ่านสไลด์ก่อนหน้า
• nextArrow – คล้ายกับฟังก์ชันของพารามิเตอร์ก่อนหน้า แต่มีหน้าที่รับผิดชอบสำหรับลูกศรที่เปลี่ยนสไลด์ไปข้างหน้า
• centerMode – แก้ไขสไลด์ปัจจุบันที่อยู่ตรงกลางของคอนเทนเนอร์หลัก โดยเริ่มแรกพารามิเตอร์จะถูกปิดใช้งาน
• cssEase – รับผิดชอบด้านแอนิเมชั่นในการสลับรูปภาพ สามารถทำให้ภาพนุ่มนวลหรือคมชัดยิ่งขึ้น ใช้ค่าเริ่มต้น "ความง่าย"
• customPaging – อนุญาตให้คุณแทรกเทมเพลตของคุณเองเพื่อดูแถบเลื่อน
• จุด – เชื่อมต่อจุดสวิตช์ ถูกปิดใช้งานตามค่าเริ่มต้น
• ลากได้ - ช่วยให้สามารถเลื่อนดูสไลด์ได้โดยการกดเมาส์ค้างไว้ นั่นคือหากคุณวางเคอร์เซอร์ของเมาส์ไว้เหนือแถบเลื่อน กดค้างไว้แล้วเลื่อนไปด้านข้าง สไลด์จะสลับไปที่สไลด์ถัดไป
• จางหายไป - สร้างเอฟเฟกต์ของการซีดจางของสไลด์เมื่อสลับ ซึ่งเป็นเอฟเฟกต์ภาพเคลื่อนไหว
• focusOnSelect – โฟกัส องค์ประกอบที่กำหนดแถบเลื่อน
• การค่อยๆ เปลี่ยน - ให้คุณตั้งค่าโหมดแอนิเมชั่นพิเศษเมื่อสลับรูปภาพ
• edgeFriction – ปิดใช้งานการสลับสไลด์ในองค์ประกอบสุดท้าย เริ่มทำงานเฉพาะในกรณีที่แถบเลื่อนไม่ได้วนซ้ำ
• อนันต์ – วนซ้ำสไลด์โชว์ ซึ่งหมายความว่าเมื่อคุณสลับภาพสุดท้าย สไลด์โชว์จะเริ่มใหม่
• InitialSlide – กำหนดภาพที่จะเริ่มการนำเสนอสไลด์ ตามค่าเริ่มต้น แถบเลื่อนเริ่มต้นจะเลือกรูปภาพแรกตามลำดับ
• lazyLoad – ให้คุณตั้งค่าโหมดการโหลดสำหรับสไลด์ถัดไป มีการตั้งค่าให้เลือกเพียง 2 แบบเท่านั้น: "ondemand" และ "progressive" โดยค่าหลังเป็นค่าเริ่มต้น
• PauseOnHover - หยุดการเลื่อนสไลด์เมื่อคุณวางเมาส์ไว้เหนือตัวเลื่อน ใช้งานได้เฉพาะในกรณีที่กำหนดไว้ การสลับอัตโนมัติสไลด์
• PauseOnDotsHover - หยุดการเลื่อนสไลด์เมื่อวางเมาส์เหนือสวิตช์จุด ใช้งานได้เฉพาะเมื่อมีการกำหนดการสลับสไลด์อัตโนมัติเท่านั้น
• ResponseTo – ทำให้เกิดปฏิกิริยาต่อการเปลี่ยนแปลงความกว้างของหน้าต่างเบราว์เซอร์ มีค่าสามค่าให้เลือก: "window", "slider" หรือ "min"
• ตอบสนอง – ให้คุณปรับการตั้งค่าตัวเลื่อนให้เข้ากับความกว้างของหน้าจอ สิ่งนี้แตกต่างจากการตั้งค่าก่อนหน้าตรงที่ขีดจำกัดความกว้างถูกกำหนดโดยค่าที่แน่นอนในหน่วยพิกเซล ใช้สำหรับรูปแบบที่ปรับเปลี่ยนได้สำหรับอุปกรณ์มือถือ
• slidesToShow – ให้คุณกำหนดจำนวนภาพที่แสดงในพื้นที่ที่มองเห็นได้ เริ่มแรกจะแสดง 1 สไลด์ แต่ค่านี้สามารถเปลี่ยนแปลงได้
• slidesToScroll - บอกแถบเลื่อนว่าต้องเปลี่ยนรูปภาพจำนวนเท่าใดเมื่อสลับ
• ความเร็ว – แก้ไขความเร็วที่สไลด์จะเปลี่ยน
• VariableWidth – ปรับความกว้างของคอนเทนเนอร์ตัวเลื่อนให้เข้ากับความกว้างของแต่ละภาพที่แสดง

โดยสรุป ฉันอยากจะทราบว่า Slick เป็นแถบเลื่อนที่อเนกประสงค์และใช้งานง่ายที่สุดในปัจจุบัน การตั้งค่าตัวเลื่อนที่หลากหลายครอบคลุมโซลูชั่นการใช้งานตัวเลื่อนที่หลากหลาย ซึ่งน่าจะเป็นข้อได้เปรียบที่สำคัญที่สุดของตัวเลื่อนนี้