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

บนอินเทอร์เน็ตคุณจะพบกับปลั๊กอินดีๆ มากมาย การสร้าง jQueryม้าหมุนและตัวเลื่อน อนุญาตให้คุณใช้การเลื่อนแบบไดนามิกพร้อมเอฟเฟกต์เพิ่มเติม

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

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

กวนใจ – ปลั๊กอิน jQuery สำหรับสร้างแถบเลื่อนเนื้อหาแบบเต็มหน้าจอแบบสัมผัส

ตัวเลื่อนแบบหมุนเนื้อหา jQuery แบบเต็มหน้าจอที่ตอบสนองพร้อมการสนับสนุน หน้าจอสัมผัส- ปลั๊กอินมีการกระจายภายใต้ ข้อตกลงใบอนุญาตใบอนุญาตสาธารณะทั่วไปของ GNU v3:

Neoslide: ปลั๊กอิน jQuery carousel ที่เรียบง่ายและขยายได้

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

Hslider: ปลั๊กอินแกลเลอรีรูปภาพที่ตอบสนองเต็มความกว้าง

ปลั๊กอินอื่นสำหรับการแสดงภาพโดยใช้ ม้าหมุนแบบปรับได้ jQuery พร้อมการควบคุมและระยะเวลาหน่วงเวลาที่กำหนดเอง:

Carousel 3D: ปลั๊กอิน jQuery carousel พร้อมเอฟเฟกต์การหมุน 3 มิติ

Sleek Slider: jQuery Carousel ที่ตอบสนองเต็มหน้าจอ

ม้าหมุน jQuery ขนาดเล็กและน่าดึงดูดสำหรับแสดงเนื้อหาและรูปภาพด้วย ประเภทต่างๆการนำทาง (ลูกศร SVG พร้อมภาพขนาดย่อ องค์ประกอบการแบ่งหน้า หรือแท็บ):

PaW Carousel: ม้าหมุนที่ตอบสนอง ขับเคลื่อนโดย jQuery

PaW Carousel (v2) เป็นปลั๊กอินขนาดเล็กสำหรับสร้าง jQuery carousel ที่ตอบสนองและเรียบง่ายพร้อมภาพขนาดย่อ:

Carousel Sharer: ม้าหมุน jQuery สำหรับการโพสต์ซ้ำบนเครือข่ายโซเชียล

Carousel Sharer เป็นปลั๊กอิน jQuery ที่ให้คุณแสดงผลิตภัณฑ์หลายรายการติดต่อกัน และอนุญาตให้ผู้เยี่ยมชมแบ่งปันผลิตภัณฑ์ของคุณบน Facebook, Twitter, Google+ และ Pinterest:

Simply Carousel: ภาพหมุนแบบตอบสนองที่เรียบง่าย

Simply Carousel เป็นปลั๊กอิน jQuery ขนาดเล็กและรวดเร็วที่ช่วยให้คุณสามารถสร้างแถบเลื่อนรูปภาพและภาพหมุนที่ยืดหยุ่นและตอบสนองได้:

สไลด์: รองรับ jQuery carousel และสไลด์โชว์ที่ตอบสนอง อุปกรณ์สัมผัส

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

ม้าหมุนเนื้อหา jQuery

ม้าหมุน jQuery ที่ตอบสนองอย่างง่ายพร้อมคุณสมบัติการเล่นอัตโนมัติ การควบคุม และแม้แต่ฟังก์ชั่นการโทรกลับ:

เนียน: ม้าหมุน jQuery ที่ตอบสนองและยืดหยุ่น

Slick เป็นปลั๊กอิน "ใหม่" สำหรับการสร้างที่ปรับแต่งได้ ตอบสนอง และปรับให้เหมาะสม อุปกรณ์เคลื่อนที่ม้าหมุนและแถบเลื่อน jQuery ที่สามารถทำงานกับองค์ประกอบ HTML ใดก็ได้:

bxSlider: ตัวเลื่อนเนื้อหา jQuery HTML

bxSlider เป็นหนึ่งในตัวเลื่อนเนื้อหา jQuery ที่ดีที่สุดที่มีอยู่ในปัจจุบัน ปลั๊กอินนี้เหมาะสำหรับการจัดระเบียบสไลด์โชว์:

CarouFredSel: ปลั๊กอินแบบหมุน jQuery ที่ยืดหยุ่นและทรงพลัง

jQuery.carouFredSel เป็นปลั๊กอินที่เปลี่ยนองค์ประกอบ HTML ใด ๆ ให้เป็นภาพหมุนเนื้อหา ช่วยให้คุณสามารถเลื่อนองค์ประกอบตั้งแต่หนึ่งรายการขึ้นไปพร้อมกัน ทั้งแนวนอนและแนวตั้ง คุณยังสามารถเปิดใช้งานได้ เล่นอัตโนมัติและทำให้การเลื่อนไม่มีที่สิ้นสุด:

หมุนเนื้อหาการปั่นจักรยานด้วย jQuery

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

Cloud Carousel: ม้าหมุน 3 มิติใน Javascript

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

Elastislide: ม้าหมุนตอบสนองด้วย jQuery

Elastislide เป็นม้าหมุน jQuery ที่ตอบสนองซึ่งปรับให้เข้ากับขนาดหน้าจอใดก็ได้ การใส่ม้าหมุนลงในภาชนะที่มีความกว้างที่ยืดหยุ่นได้จะทำให้ตัวม้าหมุนนั้นเป็น "ยาง":

jCarousel Lite

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

ม้าหมุน 3 มิติ

สร้างภาพหมุน jQuery 3 มิติจากรูปภาพพร้อมเอฟเฟกต์เงาและภาพเคลื่อนไหวที่ตอบสนองต่อตำแหน่งเคอร์เซอร์:

ปลั๊กอินแบบหมุน JQuery

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

การหมุนแถบเลื่อนรูปภาพโดยใช้ jQuery

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

ม้าหมุนคุณสมบัติ jQuery

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

jQuery ม้าหมุนไม่มีที่สิ้นสุด

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

ปลั๊กอิน jQuery Liquid Carousel

Liquid Carousel เป็นปลั๊กอินที่ออกแบบมาเพื่อสร้างการออกแบบที่ลื่นไหล ทุกครั้งที่คอนเทนเนอร์แบบหมุนตอบสนอง jQuery เปลี่ยนแปลงขนาด จำนวนองค์ประกอบที่แสดงจะปรับตามความกว้างใหม่:

Jquery MS ม้าหมุน

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

jQuery ม้าหมุนกังหันน้ำ

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

เวอร์ชั่นใหม่อาร์ซีรูเซล

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

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

แถบเลื่อนสำหรับไซต์

1. ตัวเลื่อนโพสต์แนวนอนที่ตอบสนอง

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

2. ตัวเลื่อนบน Glide.js

แถบเลื่อนนี้เหมาะสำหรับทุกเว็บไซต์ มันใช้ Glide.js กับ โอเพ่นซอร์ส- สีของแถบเลื่อนสามารถเปลี่ยนแปลงได้อย่างง่ายดาย

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

4. ตัวเลื่อนโดยใช้ผ้าใบ HTML5

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

5. ตัวเลื่อนการเปลี่ยนภาพ

ตัวเลื่อนพร้อมเอฟเฟกต์ morphing ใน ในตัวอย่างนี้แถบเลื่อนนี้เหมาะอย่างยิ่งสำหรับพอร์ตโฟลิโอของนักพัฒนาเว็บหรือสตูดิโอเว็บในรูปแบบของพอร์ตโฟลิโอ

6. แถบเลื่อนแบบวงกลม

แถบเลื่อนในรูปแบบของวงกลมพร้อมเอฟเฟกต์การพลิกภาพ

7. ตัวเลื่อนที่มีพื้นหลังเบลอ

แถบเลื่อนที่ตอบสนองด้วยการสลับและเบลอพื้นหลัง

8. แถบเลื่อนแฟชั่นที่ตอบสนอง

แถบเลื่อนเว็บไซต์ที่เรียบง่าย น้ำหนักเบา และตอบสนองได้ดี

9. Slicebox - ตัวเลื่อนรูปภาพ jQuery 3D (อัปเดต)

เวอร์ชันอัปเดตของแถบเลื่อน Slicebox พร้อมการแก้ไขและฟีเจอร์ใหม่

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

ตัวเลื่อนสำหรับไซต์ ตอนที่ 2

11.แถบเลื่อนแบบยืดหยุ่น

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

12. กรอบรูป

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

ป.ล. ฉันติดตั้งตัวเลื่อนหลายครั้งและฉันคิดว่ามันเป็นตัวเลื่อนที่ดีที่สุดตัวหนึ่ง

13. แกลเลอรีตัวเลื่อน 3D ฟรีและปรับเปลี่ยนได้พร้อมภาพขนาดย่อ

แถบเลื่อนแกลเลอรีทดลอง 3DPanelLayout พร้อมตารางและ เอฟเฟกต์ที่น่าสนใจภาพเคลื่อนไหว

14. ตัวเลื่อนบน css3

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

เป็นตัวเลื่อนรูปภาพที่น่าทึ่ง เอฟเฟ็กต์ภาพและภาพเคลื่อนไหว

17. ยางยืด

แถบเลื่อนแบบยืดหยุ่นพร้อมการตอบสนองเต็มรูปแบบและภาพขนาดย่อของสไลด์

18. กรีด

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

19. แกลลอรี่รูปภาพแบบปรับตัวบวก

เรียบง่าย แถบเลื่อนฟรี-gallery พร้อมการโหลดรูปภาพ

20. ตัวเลื่อนที่ตอบสนองสำหรับ WordPress

แถบเลื่อนที่ตอบสนองและฟรีสำหรับ WP

21. พารัลแลกซ์ ตัวเลื่อนเนื้อหา

สไลเดอร์พร้อมเอฟเฟกต์พารัลแลกซ์และการควบคุมแต่ละองค์ประกอบด้วย ใช้ CSS 3.

22. สไลเดอร์พร้อมลิงค์เพลง

ตัวเลื่อนโดยใช้โค้ดโอเพ่นซอร์ส JPlayer แถบเลื่อนนี้มีลักษณะคล้ายกับการนำเสนอพร้อมดนตรี

ตัวเลื่อนสำหรับไซต์ ตอนที่ 3

23. ตัวเลื่อนด้วย jmpress.js

แถบเลื่อนแบบตอบสนองนั้นอิงตาม jmpress.js และจะช่วยให้คุณสามารถเพิ่มเอฟเฟกต์ 3D ที่น่าสนใจให้กับสไลด์ของคุณได้

24. สไลด์โชว์แบบโฮเวอร์อย่างรวดเร็ว

สไลด์โชว์ด้วย การสลับอย่างรวดเร็วสไลด์ สวิตช์สไลด์เมื่อโฮเวอร์

ภาพหีบเพลงโดยใช้ CSS3

นี้ แกลเลอรี่ที่ตอบสนองซึ่งได้รับการปรับให้เหมาะกับอุปกรณ์ระบบสัมผัส

ใน บทเรียนนี้เราจะสร้างความเรียบง่าย หน้าปรับตัวโดยมีส่วนหัวตกแต่งด้วยม้าหมุนซึ่งภาพจะเลื่อนจากขวาไปซ้าย โซลูชันของเราไม่ใช้ JavaScript การแสดงภาพสไลด์จะขึ้นอยู่กับภาพเคลื่อนไหว CSS3 ซึ่งได้รับการสนับสนุนในเบราว์เซอร์รุ่นใหม่ส่วนใหญ่: Firefox 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ และ IE10

ขั้นตอนที่ 1 - การเตรียมการ

เราจะต้องมีรูปภาพขนาดใหญ่ 4 รูป (ในตัวอย่างของเราคือขนาด 1200px x 390px) สำหรับ แถบเลื่อนแนวนอนเราจะเตรียมรูปภาพขนาด 4800px x 390px ใน Photoshop วางรูปภาพทั้งหมดของเราทีละภาพในแนวนอน และบันทึกผลลัพธ์ในรูปแบบที่เหมาะสมสำหรับเว็บ (“slider-horizontal.jpg”)

ขั้นตอนที่ 2 - HTML

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

ลีล เดอ บาตซ์

รหัสหน้าที่สมบูรณ์มีลักษณะดังนี้:

L"ile de Batz กาลครั้งหนึ่ง...

เอเนียน ลาซิเนีย บิเบนดัม...

ลิงค์เรียนรู้ด้วยใจ..

• บาร์และร้านอาหาร
...

ขั้นตอนที่ 3: CSS บนมือถือ

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

เนื้อหา ( ความกว้าง: 90%; ความกว้างขั้นต่ำ: 300px; ความกว้างสูงสุด: 1200px; ระยะขอบ: 0 อัตโนมัติ; การขยายด้านบน: 1em; สี: #504331 ) ส่วนหัว ( text-align: center; ตำแหน่ง: ญาติ; ) h1 ( ขนาดตัวอักษร: 2.75em; พื้นหลัง: สีขาว; ระยะขอบ: 0.25em; -top: 1px solid #504331; border-bottom: 1px solid #504331; images/map.png) ตรงกลางด้านล่าง ไม่ซ้ำซ้อน: 177px )

ขั้นตอนที่ 4 สไตล์สำหรับหน้าจอขนาดใหญ่

บน หน้าจอขนาดใหญ่ส่วนต่างๆ .หลักและ .หน้าจอควรแสดงให้แตกต่างออกไป ส่วน .ลิงค์จะมีความกว้าง 300px และอยู่ในตำแหน่งที่ถูกต้อง แถบด้านข้างและส่วน .หลักจะอยู่ทางซ้าย เราจะเพิ่มเส้นคู่เพื่อแยกส่วนต่างๆ ด้วย เราจะกำหนดความกว้างของหน้าจอที่มากกว่า 1024px โดยใช้คำสั่ง @media:

@media เท่านั้น หน้าจอ และ (ความกว้างขั้นต่ำ: 1024px) ( .content ( ตำแหน่ง: ญาติ; ) .main ( ขอบขวา: 320px; การขยาย: .5em 20px .5em 0; /*เพิ่มบรรทัดคู่ */ border-right : 1px solid #504331; box-shadow: 2px 0 white, 3px 0 #504331; .links ( ตำแหน่ง: สัมบูรณ์; ขวา: 0; บน: 0; ความกว้าง: 300px; การจัดแนวข้อความ: ขวา; )

ขั้นตอนที่ 5 รูปภาพที่ตอบสนองในชื่อ

มาเริ่มการทำงานในส่วนหลักของบทเรียนของเรากันดีกว่า: แถบเลื่อน CSS แบบตอบสนองในส่วนหัว ขั้นแรก เรามาตรวจสอบความสามารถในการปรับตัวกันก่อน ภาพพื้นหลัง.

ส่วนหัว ( พื้นหลัง: url(../images/slider-horizontal.jpg) 0 ซ้ำด้านล่าง-x; ขนาดพื้นหลัง: 400%; ขยายด้านล่าง: 32.5%; )

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

ทำไมต้อง 400%? เรามี 4 สไลด์ ดังนั้นการแสดงผลจะเป็น 1/4 ของภาพพื้นหลังในส่วนหัว นั่นคือขนาดพื้นหลังควรกว้างกว่าส่วนหัว 4 เท่า

ทำไมต้อง 32.5%? เราวางพื้นหลังไว้ที่ด้านล่างของส่วนหัว ความสูงของภาพพื้นหลังคือ 390px ความกว้างของแต่ละสไลด์คือ 1200px, 390/1200 = 0.325 ดังนั้นความสูงคือ 32.5% ของความกว้าง

ขั้นตอนที่ 6 แอนิเมชั่น

เราจะทำให้คุณสมบัติตำแหน่งพื้นหลังเคลื่อนไหว เพื่อแสดงคุณสมบัติรูปภาพที่สอง ตำแหน่งพื้นหลังควรมีความสำคัญ ช่วงล่าง 33.33333%, ที่สาม - ช่วงล่าง 66.66667%และที่สี่ - ด้านล่าง 100%- รูปภาพแรกจะแสดงเมื่อค่าคุณสมบัติเป็น ตำแหน่งพื้นหลังเท่ากัน 0 ด้านล่างหรือ ช่วงล่าง 133.33333%(เราตั้งค่าการทำซ้ำเป็น ทำซ้ำ-x).

แต่ละภาพมีเวลา "ชื่อเสียง" 25% รายการแรกจะแสดงตั้งแต่ 0 ถึง 25% รายการที่สองแสดงตั้งแต่ 25% ถึง 50% รายการที่สามแสดงตั้งแต่ 50% ถึง 75% และรายการสุดท้ายแสดงตั้งแต่ 75% ถึง 100% เราตั้งค่าการเปลี่ยนภาพเพื่อให้รูปภาพเริ่มเลื่อนออกไปก่อนเวลาเล็กน้อย (โดยใช้ค่า 5%) ก่อนที่เวลาเรนเดอร์จะผ่านไป 25% นี่คือสิ่งที่ดูเหมือน @คีย์เฟรม:

@keyframes h_slide ( 0% ( ตำแหน่งพื้นหลัง: ด้านล่าง 0%; ) 20% ( ตำแหน่งพื้นหลัง: ด้านล่าง 0%; ) 25% ( ตำแหน่งพื้นหลัง: ด้านล่าง 33.33333%; ) 45% ( ตำแหน่งพื้นหลัง: ด้านล่าง 33.33333% ; ) 50% ( ตำแหน่งพื้นหลัง: ด้านล่าง 66.66667%; ) 70% ( ตำแหน่งพื้นหลัง: ด้านล่าง 66.66667%; ) 75% ( ตำแหน่งพื้นหลัง: ด้านล่าง 100%; ) 95% ( ตำแหน่งพื้นหลัง: ด้านล่าง 100%; ) 100% (ตำแหน่งพื้นหลัง: ด้านล่าง 133.33%; ) )

โปรดทราบว่าคุณต้องเพิ่มคำนำหน้าเบราว์เซอร์: @-webkit-keyframes (สำหรับ Chrome, Safari, ไอโอเอสซาฟารี, Android) และ @-moz-keyframes (สำหรับ Firefox 15)

ด้านล่างนี้เป็นโค้ดส่วนหัวที่สมบูรณ์ แอนิเมชัน “h_slide” ของเราจะทำซ้ำทุกๆ 24 วินาที (6 วินาทีสำหรับแต่ละสไลด์) วนซ้ำไม่รู้จบ- ฟังก์ชั่นเวลามีความสำคัญ คลายออกเพื่อให้แต่ละสไลด์ช้าลงเมื่อสิ้นสุดการเปลี่ยนภาพ

ส่วนหัว ( text-align: center; ตำแหน่ง: สัมพันธ์; พื้นหลัง: url(../images/slider-horizontal.jpg) 0 ซ้ำด้านล่าง -x; ขนาดพื้นหลัง: 400%; ขยายด้านล่าง: 32.5%; -webkit- แอนิเมชั่น: h_slide 24s การค่อยๆ คลายออกอย่างไม่มีที่สิ้นสุด; -moz-animation: h_slide 24s การค่อยๆ คลายออกอย่างไม่มีที่สิ้นสุด;

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

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

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

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

ตัวเลื่อนรูปภาพ JQuery Jssor Responsive Slider

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

• การออกแบบที่ปรับเปลี่ยนได้
• ตัวเลือกการปรับแต่งมากกว่า 15 แบบ;
• เอฟเฟกต์การเปลี่ยนภาพมากกว่า 15 แบบ;
• แกลเลอรี่ภาพ, ม้าหมุน, รองรับขนาดเต็มหน้าจอ;
• ตัวหมุนแบนเนอร์แนวตั้ง รายการสไลด์
• การสนับสนุนวิดีโอ

สาธิต | ดาวน์โหลด

PgwSlider - เปิดแถบเลื่อนแบบปรับได้ อิง jQuery/เซปโต

งานเดียวของปลั๊กอินนี้คือการแสดงสไลด์รูปภาพ มีขนาดกะทัดรัดมาก เนื่องจากไฟล์ JQuery มีขนาดเพียง 2.5 KB ซึ่งช่วยให้โหลดได้เร็วมาก:

• รูปแบบที่ปรับเปลี่ยนได้
• การเพิ่มประสิทธิภาพ SEO;
• รองรับเบราว์เซอร์ที่แตกต่างกัน
• การเปลี่ยนภาพอย่างง่าย
• ขนาดไฟล์เก็บถาวรเพียง 2.5 KB

สาธิต | ดาวน์โหลด

ตัวเลื่อนข่าวแนวตั้ง Jquery

แถบเลื่อน JQuery ที่ยืดหยุ่นและมีประโยชน์ ออกแบบมาสำหรับแหล่งข่าวพร้อมรายการสิ่งพิมพ์ทางด้านซ้ายและรูปภาพที่แสดงทางด้านขวา:

• การออกแบบที่ปรับเปลี่ยนได้
• คอลัมน์แนวตั้งสำหรับเปลี่ยนข่าว
• ส่วนหัวที่ขยาย

สาธิต | ดาวน์โหลด

วอลลอป สไลเดอร์

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

• รูปแบบที่ปรับเปลี่ยนได้
• การออกแบบที่เรียบง่าย
• ตัวเลือกการเปลี่ยนสไลด์ต่างๆ
• รหัส JavaScript ขั้นต่ำ;
• ขนาดเพียง 3KB

สาธิต | ดาวน์โหลด

แกลเลอรี่โพลารอยด์สไตล์แบน

คลังภาพในรูปแบบของเอกสารที่กระจัดกระจายอยู่บนโต๊ะด้วยรูปแบบที่ยืดหยุ่นและ การออกแบบที่สวยงามน่าจะเป็นที่สนใจของหลาย ๆ ท่าน เหมาะสำหรับแท็บเล็ตและจอแสดงผลขนาดใหญ่:

• แถบเลื่อนแบบปรับได้;
• การออกแบบที่เรียบ;
• การเปลี่ยนสไลด์แบบสุ่ม
• เข้าถึงซอร์สโค้ดแบบเต็ม

สาธิต | ดาวน์โหลด

A-สไลเดอร์

สาธิต | ดาวน์โหลด

HiSlider – HTML5, jQuery และ แถบเลื่อน WordPressภาพ

HiSlider ได้เปิดตัวปลั๊กอินตัวเลื่อน jQuery ฟรีใหม่ ซึ่งคุณสามารถสร้างแกลเลอรีรูปภาพที่หลากหลายพร้อมการเปลี่ยนภาพที่ยอดเยี่ยม:

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

สาธิต |ดาวน์โหลด

ว้าว สไลเดอร์.

WOW Slider คือ แถบเลื่อน jQuery ที่ตอบสนองรูปภาพที่มีเอฟเฟกต์ภาพที่น่าทึ่ง (โดมิโน, หมุน, เบลอ, พลิกและแฟลช, บินออกไป, มู่ลี่) และเทมเพลตระดับมืออาชีพ

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

• ตอบสนองอย่างเต็มที่
• รองรับเบราว์เซอร์และอุปกรณ์ทุกประเภท
• รองรับอุปกรณ์สัมผัส
• ติดตั้งง่ายบน WordPress;
• ความยืดหยุ่นในการกำหนดค่า
• เพิ่มประสิทธิภาพ SEO

สาธิต |ดาวน์โหลด

Nivo Slider – ปลั๊กอิน jQuery ฟรี

Nivo Slider เป็นที่รู้จักไปทั่วโลกว่าเป็นแถบเลื่อนรูปภาพที่สวยงามและใช้งานง่ายที่สุด ปลั๊กอิน Nivo Slider นั้นฟรีและเผยแพร่ภายใต้ลิขสิทธิ์ MIT:

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

สาธิต |ดาวน์โหลด

เรียบง่าย แถบเลื่อน jQueryพร้อมเอกสารทางเทคนิค

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

• รูปแบบที่ปรับเปลี่ยนได้
• การออกแบบที่เรียบง่าย
• เอฟเฟกต์การเลื่อนออกและการเปลี่ยนสไลด์ต่างๆ

สาธิต |ดาวน์โหลด

แถบเลื่อนรูปภาพ jQuery ขนาดเต็ม

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

เมื่อติดตั้งแล้ว ตัวเลื่อนจะขยายเป็น 100% ของความกว้างหน้าจอ นอกจากนี้ยังสามารถลดขนาดภาพสไลด์ได้โดยอัตโนมัติ:

• แถบเลื่อน JQuery ที่ปรับเปลี่ยนได้
• ขนาดเต็ม;
• การออกแบบที่เรียบง่าย

สาธิต |ดาวน์โหลด

แถบเลื่อนเนื้อหาแบบยืดหยุ่น + บทช่วยสอน

Elastic Content Slider จะปรับความกว้างและความสูงตามขนาดโดยอัตโนมัติ องค์ประกอบหลัก- นี่คือแถบเลื่อน jQuery ที่เรียบง่าย ประกอบด้วยพื้นที่สไลด์ที่ด้านบน และแถบแท็บการนำทางที่ด้านล่าง แถบเลื่อนจะปรับความกว้างและความสูงตามขนาดของคอนเทนเนอร์หลัก

เมื่อดูบนหน้าจอแนวทแยงขนาดเล็ก แท็บการนำทางจะกลายเป็นไอคอนขนาดเล็ก:

• การออกแบบที่ปรับเปลี่ยนได้
• การคลิกเมาส์เลื่อน

สาธิต |ดาวน์โหลด

ฟรี 3D Stack Slider

แถบเลื่อนทดลองที่เลื่อนดูภาพในรูปแบบ 3 มิติ ทั้งสองปึกมีลักษณะคล้ายกับปึกกระดาษ ซึ่งเมื่อเลื่อน รูปภาพจะแสดงที่กึ่งกลางของแถบเลื่อน:

• การออกแบบที่ปรับเปลี่ยนได้
• พลิก - การเปลี่ยนแปลง;
• เอฟเฟกต์ 3 มิติ

สาธิต |ดาวน์โหลด

Slit Slider แบบเต็มหน้าจอตามบทช่วยสอน JQuery และ CSS3 +

บทช่วยสอนนี้จะแสดงให้คุณเห็นถึงวิธีการสร้างแถบเลื่อนแบบหักมุม แนวคิดก็คือ "ตัด" และแสดงสไลด์ปัจจุบันเมื่อคุณเปิดสไลด์ถัดไปหรือ ภาพก่อนหน้า- การใช้ภาพเคลื่อนไหว JQuery และ CSS เราสามารถสร้างเอฟเฟกต์การเปลี่ยนแปลงที่เป็นเอกลักษณ์ได้:

• การออกแบบที่ปรับเปลี่ยนได้
• การเปลี่ยนแปลงแบบแยกส่วน
• แถบเลื่อนแบบเต็มหน้าจอ

สาธิต |ดาวน์โหลด

Unislider - ตัวเลื่อน jQuery ขนาดเล็กมาก

ไม่มีเสียงระฆังและนกหวีดที่ไม่จำเป็น ขนาดน้อยกว่า 3KB ใช้โค้ด HTML สำหรับสไลด์ของคุณ และขยายด้วย CSS ทุกอย่างที่เกี่ยวข้องกับ Unslider นั้นโฮสต์อยู่บน GitHub:

• รองรับเบราว์เซอร์ต่างๆ
• รองรับคีย์บอร์ด;
• ปรับความสูง;
• การออกแบบที่ปรับเปลี่ยนได้
• รองรับการป้อนข้อมูลแบบสัมผัส

สาธิต | ดาวน์โหลด

สไลด์ตอบสนองน้อยที่สุด

ปลั๊กอินที่เรียบง่ายและกะทัดรัด (ขนาดเพียง 1 KB) ที่สร้างแถบเลื่อนแบบตอบสนองโดยใช้องค์ประกอบภายในคอนเทนเนอร์ ResponsiveSLides.js ทำงานร่วมกับ จำนวนมากเบราว์เซอร์ รวมถึง IE ทุกเวอร์ชันตั้งแต่ IE6 ขึ้นไป:

• ตอบสนองอย่างเต็มที่
• ขนาด 1 กิโลไบต์;
• การเปลี่ยน CSS3 พร้อมความสามารถในการทำงานผ่าน JavaScript
• มาร์กอัปอย่างง่ายโดยใช้รายการสัญลักษณ์แสดงหัวข้อย่อย
• ความสามารถในการปรับแต่งเอฟเฟ็กต์การเปลี่ยนแปลงและระยะเวลาการดูสไลด์เดียว
• รองรับความสามารถในการสร้างสไลด์โชว์หลายรายการ
• การเลื่อนแบบอัตโนมัติและแบบแมนนวล

สาธิต |ดาวน์โหลด

กล้อง - ตัวเลื่อน jQuery ฟรี

กล้องเป็นปลั๊กอินที่มีเอฟเฟกต์การเปลี่ยนแปลงมากมาย รูปแบบที่ปรับเปลี่ยนได้- ติดตั้งง่าย รองรับโดยอุปกรณ์มือถือ:

• การออกแบบที่ตอบสนองอย่างเต็มที่
• ลายเซ็น;
• ความสามารถในการเพิ่มวิดีโอ
• 33 ไอคอนสีที่แตกต่างกัน

สาธิต |ดาวน์โหลด

SlidesJS ปลั๊กอิน jQuery ที่ตอบสนอง

SlidesJS คือ ปลั๊กอินแบบปรับได้สำหรับ JQuery (1.7.1 และสูงกว่า) พร้อมรองรับอุปกรณ์สัมผัสและการเปลี่ยน CSS3 ทดลองลองดูสักหน่อย ตัวอย่างสำเร็จรูปเพื่อช่วยคุณทราบวิธีเพิ่ม SlidesJS ในโครงการของคุณ:

• การออกแบบที่ปรับเปลี่ยนได้
• การเปลี่ยน CSS3;
• รองรับอุปกรณ์สัมผัส
• ติดตั้งง่าย.

สาธิต | ดาวน์โหลด

ตัวเลื่อน BX Jquery

นี่คือแถบเลื่อน jQuery ที่ตอบสนองฟรี:

• ตอบสนองอย่างเต็มที่ – ปรับให้เข้ากับอุปกรณ์ใดก็ได้
• การเปลี่ยนสไลด์แนวนอนและแนวตั้ง
• สไลด์สามารถประกอบด้วยรูปภาพ วิดีโอ หรือเนื้อหา HTML;
• ขยายการสนับสนุนสำหรับอุปกรณ์สัมผัส
• การใช้การเปลี่ยน CSS สำหรับภาพเคลื่อนไหวสไลด์ (การเร่งด้วยฮาร์ดแวร์)
• เอพีไอ โทรกลับและวิธีการสาธารณะโดยสมบูรณ์
• ขนาดไฟล์เล็ก
• ง่ายต่อการปฏิบัติ

สาธิต |ดาวน์โหลด

เฟล็กซ์สไลเดอร์ 2

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

สาธิต | ดาวน์โหลด

Galleria - แกลเลอรีรูปภาพที่ตอบสนองตาม JavaScript

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

• ฟรีโดยสมบูรณ์;
• โหมดการรับชมแบบเต็มหน้าจอ
• ปรับตัวได้ 100%;
• ไม่จำเป็นต้องมีประสบการณ์ด้านการเขียนโปรแกรม
• รองรับ iPhone, iPad และอุปกรณ์สัมผัสอื่น ๆ
• Flickr, Vimeo, YouTube และอีกมากมาย;
• หลายหัวข้อ

สาธิต | ดาวน์โหลด

Blueberry - แถบเลื่อนรูปภาพ jQuery ที่ตอบสนองอย่างง่าย

ฉันขอนำเสนอแถบเลื่อนรูปภาพ jQuery ที่เขียนขึ้นโดยเฉพาะสำหรับคุณ การออกแบบเว็บที่ตอบสนอง- Blueberry เป็นปลั๊กอินตัวเลื่อนรูปภาพโอเพ่นซอร์สรุ่นทดลอง ซอร์สโค้ดซึ่งเขียนขึ้นเพื่อทำงานกับเทมเพลตที่ตอบสนองโดยเฉพาะ:

• การออกแบบขั้นต่ำ
• รูปแบบที่ปรับเปลี่ยนได้
• การนำเสนอ

สาธิต | ดาวน์โหลด

jQuery Popeye 2.1.1

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

• การออกแบบที่ปรับเปลี่ยนได้
• การสนับสนุนลายเซ็น;
• โหมดการนำเสนอภาพนิ่ง

สาธิต | ดาวน์โหลด

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

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

คำแนะนำในการแทรกลงในเว็บไซต์ 1. ดาวน์โหลดไฟล์

ดาวน์โหลดไฟล์ แตกไฟล์ และอัปโหลดไปที่รูทของเว็บไซต์ โฟลเดอร์รูปภาพ, css และ js

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

ใส่รหัสต่อไปนี้ระหว่างแท็ก

ดังนั้นเราจึงเชื่อมต่อสคริปต์และไฟล์ modernizr.custom.js ซึ่งรับผิดชอบ งานที่ถูกต้อง HTML5 และ CSS3 ในเบราว์เซอร์ของคุณและเบราว์เซอร์ของผู้เยี่ยมชมเว็บไซต์ของคุณ ไฟล์ default.css และ component.css มีแอตทริบิวต์และพารามิเตอร์ที่สามารถทำการเปลี่ยนแปลงการออกแบบไซต์ของคุณได้ หากสิ่งนี้เกิดขึ้น คุณสามารถตำหนิไฟล์ default.css ได้ เนื่องจากไฟล์มีสไตล์สำหรับสิ่งนั้น พารามิเตอร์มาตรฐานเช่นร่างกาย ก และอื่นๆ เพียงลบข้อขัดแย้งใด ๆ แล้วทุกอย่างจะเรียบร้อย

3. วางโค้ดตัวเลื่อน

บนหน้าที่คุณต้องการดูแถบเลื่อนและตำแหน่งที่คุณเชื่อมต่อสคริปต์และสไตล์ ให้แทรก รหัสเอชทีเอ็มแถบเลื่อน:

• 
• 
• 
• 
• 

$(function() ( /* - วิธีเรียกใช้ปลั๊กอิน: $(selector).cbpFWSlider(); - ตัวเลือก: ( // ความเร็วการเปลี่ยนผ่านเริ่มต้น (ms) ความเร็ว: 500, // การค่อยๆ เปลี่ยนการค่อยๆ เปลี่ยนเริ่มต้น: "ease" ) - ทำลาย: $(selector).cbpFWSlider("destroy"); */ $("#cbp-fwslider").cbpFWSlider());

เชื่อมต่อแถบเลื่อนแล้ว

นั่นคือทั้งหมดสำหรับฉัน ดีและ งานที่มีประสิทธิผล- ดี!