แถบเลื่อนพื้นหลัง Jquery แถบเลื่อนที่น่าสนใจโดยใช้ jQuery กล้อง - ตัวเลื่อน jQuery ฟรี

โปรดบอกฉันว่าเป็นไปได้ไหมที่จะสร้างตัวเลื่อนภาพพื้นหลังโดยใช้ตัวเลื่อนแบบเนียน
Google ไม่ได้ช่วยอะไร (เอกสารบอกว่าต้องวางรูปภาพในบล็อก div แต่ภาพพื้นหลังล่ะ?

@ชุดอักขระ utf-8; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a, abbr,ตัวย่อ,ที่อยู่,ใหญ่,อ้างอิง,รหัส,del,dfn, em,แบบอักษร,img,ins,kbd,q,s,samp,เล็ก,นัดหยุดงาน,แข็งแกร่ง,ย่อย,sup,tt,var,b,u,i,ศูนย์,dl,dt,dd,ol,ul,li, fieldset, รูปแบบ, ป้ายกำกับ, คำอธิบาย, ตาราง, คำบรรยาย, tbody, tfoot, thead, tr, th, td (พื้นหลัง: ไม่มี เลื่อนซ้ำ 0 0 โปร่งใส; เส้นขอบ: 0 ไม่มี; ขนาดตัวอักษร: 100%; โครงร่าง: 0 ไม่มี; จัดแนวตั้ง: พื้นฐาน; ระยะขอบ: 0; การขยาย: 0;) ตาราง (เส้นขอบยุบ: ยุบ; ระยะห่างระหว่างเส้นขอบ: 0;) ที่อยู่, บทความ, กัน, ผืนผ้าใบ, รายละเอียด, คำบรรยายภาพ, รูป, ส่วนท้าย, ส่วนหัว, hgroup, nav, ส่วน, สรุป (แสดง: บล็อก;) * ( -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing: border-box; ) a, a:hover, ปุ่ม, ปุ่ม:hover, .anime ( -moz-transition:all 200ms linear; -ms-transition:all 200ms linear; -o-transition:all 200ms linear; -webkit- การเปลี่ยนแปลง: เชิงเส้นทั้งหมด 200ms; การเปลี่ยนแปลง: เชิงเส้นทั้งหมด 200ms; เคอร์เซอร์: ตัวชี้) .F_COL_C-START_I-CENTER (จอแสดงผล: flex; flex-flow: คอลัมน์ nowrap; 12vw;

เวลาไม่หยุดนิ่งและก้าวหน้าไปด้วย สิ่งนี้ส่งผลกระทบต่ออินเทอร์เน็ตด้วย คุณสามารถสังเกตได้ว่ารูปลักษณ์ของไซต์เปลี่ยนแปลงไปอย่างไรซึ่งเป็นที่นิยมโดยเฉพาะ การออกแบบที่ตอบสนอง- และในเรื่องนี้ก็มีสิ่งใหม่ ๆ เกิดขึ้นบ้าง ตัวเลื่อน jquery แบบปรับได้, แกลเลอรี, ภาพหมุน หรือปลั๊กอินที่คล้ายกัน
1. ตัวเลื่อนโพสต์แนวนอนที่ตอบสนอง

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

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

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

3. สไลด์โชว์เนื้อหาแบบเอียง

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

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

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

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

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

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

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

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

แถบเลื่อนแบบปรับได้พร้อมการสลับและการเบลอพื้นหลัง

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

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

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

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

10. ตารางรูปภาพตอบสนองแบบเคลื่อนไหวฟรี

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

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

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

12. กรอบรูป

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

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

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

แถบเลื่อนแกลเลอรีทดลอง 3DPanelLayoutพร้อมตารางและเอฟเฟกต์แอนิเมชั่นที่น่าสนใจ

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

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

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

ว้าวสไลเดอร์เป็นตัวเลื่อนรูปภาพพร้อมเอฟเฟกต์ภาพที่น่าทึ่ง

17. ยางยืด

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

18.กรีด

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

19. แกลเลอรี่ภาพที่ปรับเปลี่ยนได้บวก

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

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

แถบเลื่อนฟรีแบบปรับได้สำหรับ WP

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

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

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

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

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

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

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

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

25. รูปภาพหีบเพลงด้วย CSS3

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

26. ปลั๊กอินแกลเลอรีที่ปรับให้เหมาะสมแบบสัมผัส

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

27. แกลเลอรี 3 มิติ

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

28. ตัวเลื่อนพร้อมการแบ่งหน้า

แถบเลื่อนตอบสนองพร้อมการแบ่งหน้าโดยใช้แถบเลื่อน JQuery UI แนวคิดคือการใช้แนวคิดการนำทางแบบง่ายๆ สามารถกรอกลับภาพทั้งหมดหรือสลับสไลด์ทีละสไลด์ได้

29.การตัดต่อภาพด้วย jQuery

จัดเรียงภาพโดยอัตโนมัติตามความกว้างของหน้าจอ สิ่งที่มีประโยชน์มากในการพัฒนาเว็บไซต์พอร์ตโฟลิโอ

30. แกลเลอรี่ 3 มิติ

แถบเลื่อนวงกลม 3 มิติอย่างง่ายโดยใช้ css3 และ jQuery

31. โหมดเต็มหน้าจอพร้อมเอฟเฟกต์ 3D โดยใช้ css3 และ jQuery

แถบเลื่อนที่มีความสามารถในการดูภาพเต็มหน้าจอพร้อมการเปลี่ยนภาพที่สวยงาม

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

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

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

การสร้างสไลเดอร์

หากต้องการสร้างแถบเลื่อนใหม่ในเมนูด้านซ้ายของแดชบอร์ด WordPress ให้เลือก สไลเดอร์ > เพิ่มสไลด์ใหม่:

ประเภทสไลด์

การตั้งค่าสไลด์พื้นฐานคือประเภทพื้นหลัง (รูปภาพหรือวิดีโอ) อินเทอร์เฟซของการตั้งค่าสไลด์จะเปลี่ยนไปขึ้นอยู่กับการเลือกพารามิเตอร์นี้: เมื่อเลือกวิดีโอแทนกลุ่มการตั้งค่า พื้นหลังแบบคงที่กลุ่มปรากฏขึ้น พื้นหลังเคลื่อนไหว.

พื้นหลังสไลด์

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

ภาพซ้อนทับ

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

แอนิเมชั่นพื้นหลัง

เปิดใช้งานตัวเลือกนี้หากคุณต้องการทำให้ภาพพื้นหลังเคลื่อนไหว เมื่อเปิดใช้งานแล้ว ภาพเคลื่อนไหวประเภทต่อไปนี้จะพร้อมใช้งาน:

• กำลังขยายสัมพันธ์กับศูนย์กลาง (ค่าเริ่มต้น)
• กำลังขยายสัมพันธ์กับมุมซ้ายบน
• กำลังขยายสัมพันธ์กับมุมขวาบน
• กำลังขยายสัมพันธ์กับมุมซ้ายล่าง
• กำลังขยายสัมพันธ์กับมุมขวาล่าง

วิดีโอพื้นหลัง

ตัวเลื่อน Temdo รองรับรูปแบบวิดีโอ webm, mp4 และ ogg

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

คุณสมบัติสไลด์

ส่วนนี้จะตั้งค่าพารามิเตอร์พื้นฐานของสไลด์:

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

การตั้งค่าสไตล์เนื้อหาสไลด์

การตั้งค่าลักษณะเนื้อหาข้อความสไลด์ (ชื่อเรื่อง คำบรรยาย และข้อความ) ได้รับการตั้งค่าในกลุ่มการตั้งค่าที่เกี่ยวข้อง:

• ชื่อสไลด์
• คำบรรยายสไลด์
• ข้อความสไลด์

ในแต่ละกลุ่ม คุณสามารถตั้งค่าแบบอักษร สี ขนาด และพารามิเตอร์ลักษณะอื่นๆ สำหรับแต่ละองค์ประกอบได้

กราฟิกและกราฟิก SVG

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

ปุ่มบนสไลด์

ในส่วนนี้คุณสามารถตั้งค่าพารามิเตอร์สำหรับหนึ่งหรือสองปุ่มได้:

• ข้อความของปุ่ม
• ลิงค์
• ภาพเคลื่อนไหวแบบโฮเวอร์
• ไอคอน

ภาพเคลื่อนไหวสไลด์เมื่อเลื่อน

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

กำลังบันทึกสไลด์

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

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

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

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

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

แถบเลื่อนรูปภาพ jQuery

ตัวเลื่อนตอบสนอง Jssor

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

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

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

PgwSlider - ตัวเลื่อนตอบสนองตาม JQuery / Zepto

งานเดียวของปลั๊กอินนี้คือการแสดงสไลด์รูปภาพ มีขนาดกะทัดรัดมาก เนื่องจากไฟล์ 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 Transitions สำหรับภาพเคลื่อนไหวแบบสไลด์ ( การเร่งความเร็วด้วยฮาร์ดแวร์);
• API การติดต่อกลับและวิธีการสาธารณะโดยสมบูรณ์
• ขนาดไฟล์เล็ก
• ง่ายต่อการปฏิบัติ

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

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

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

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

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

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

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

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

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

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

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

มาร์กอัป HTML

ทุกอย่างง่ายมากที่นี่ คุณเพียงแค่ต้องเพิ่มรายการ UL ที่จุดเริ่มต้นหลังแท็ก ร่างกาย.

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

สไตล์ CSS

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

Body_slides( list-style:none; margin:0; padding:0; z-index:-2; พื้นหลัง:#000;) .body_slides, .body_slides:after( ตำแหน่ง: คงที่; ความกว้าง:100%; ความสูง:100% ; top:0px; left:0px;) .body_slides:after ( เนื้อหา: ""; พื้นหลัง: url แบบโปร่งใส(images/pattern.png) ทำซ้ำด้านบนซ้าย;).body_slides li( width:100%; height:100%; ตำแหน่ง: สัมบูรณ์ ซ้าย: 0; -webkit-animation: 18s เชิงเส้นอนันต์ 0s; -o-animation: anim_slides 18s เชิงเส้นอนันต์; เชิงเส้นอนันต์ 0s; 1.jpg) ) .body_slides li: nth-child (2) ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url (images/2. jpg) ) . body_slides li:nth-child(3)( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ภาพพื้นหลัง: url(images/3.jpg) ) @-webkit -keyframes anim_slides ( 0% (ความทึบ:0;) 6% (ความทึบ:1;) 24% (ความทึบ:1;) 30% (ความทึบ:0;) 100% (ความทึบ:0;) ) @-moz-keyframes anim_slides ( 0% (ความทึบ:0;) 6% (ความทึบ:1;) 24% (ความทึบ:1;) 30% (ความทึบ:0;) 100% (ความทึบ:0;) )

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

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

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

.body_slides li: n-child (1)- นี่เป็นสไลด์แรกตามลำดับและมีภาพพื้นหลัง ถัดไปมาเป็นลูกที่ n(2) นอกเหนือจากรูปภาพแล้ว ยังให้เวลาอีกครั้งและเท่ากับ 6 วินาที นั่นคือจะปรากฏหลังจากสไลด์แรก 6 วินาที ถัดไปคือลูกที่ n (3) จะปรากฏในอีก 6 วินาที ดังนั้นจึงมีเวลา 12 วินาที หากคุณต้องการเพิ่มสไลด์ที่ 4 ให้เพิ่ม nth-child(4) และควรมีเวลา 18 วินาทีอยู่แล้ว ฉันคิดว่านี่ชัดเจน

ถัดไป คุณต้องระบุเวลาภาพเคลื่อนไหวทั้งหมด ซึ่งขณะนี้ได้ตั้งค่าไว้แล้ว body_สไลด์และเท่ากับ 18 วินาที หากเพิ่ม 4 สไลด์ก็จะเท่ากับ 24 สไลด์ไปเรื่อยๆ ถ้าคุณเก่งคณิตก็ควรจะรับมือกับมันได้ สิ่งสำคัญคืออย่าทำผิดเพราะแถบเลื่อนจะไม่ทำงานเลย หากต้องการคุณสามารถเพิ่มหรือลดความเร็วลงได้โดยการตั้งเวลาที่ต้องการ

คีย์เฟรม anim_slides- นี่คือลักษณะและการหายไปของสไลด์ ในตอนแรก สไลด์มีความโปร่งใส และจะได้รับเงื่อนไข - ความทึบ:0;- เมื่อถึงคราวของสไลด์ใด ๆ มันจะปรากฏขึ้นก่อนจากนั้นจึงเริ่มโปร่งใสอีกครั้งและหายไปโดยสิ้นเชิงและมีอันใหม่ปรากฏขึ้นมาแทนที่ หากคุณต้องการเปลี่ยนความเร็วของการปรากฏหรือการหายตัวไป ให้เปลี่ยนเปอร์เซ็นต์ - นี่คือเปอร์เซ็นต์ของเวลาทั้งหมด

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

เพียงเท่านี้ ขอบคุณสำหรับความสนใจของคุณ