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

ซอร์สโค้ดของ Slider และการสาธิต

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

ตัวเลื่อนที่มีหนึ่งสไลด์ที่ใช้งานอยู่ (ไม่มีการวนซ้ำ):

ตัวเลื่อนที่มีสามสไลด์ที่ใช้งานอยู่ (ไม่มีการวนซ้ำ):

ตัวอย่างที่แสดงวิธีที่คุณสามารถใช้แถบเลื่อนเพื่อหมุนบทความ:

ข้อดีของ chiefSlider

มาดูข้อดีหลักของแถบเลื่อนนี้กัน:

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

การติดตั้ง chiefSlider

การติดตั้งตัวเลื่อนใช้เวลา 3 ขั้นตอน:

• เพิ่ม chiefSlider CSS ให้กับเพจหรือไฟล์ CSS ที่เชื่อมต่อกับเพจ
• วางโค้ด HTML ของแถบเลื่อนในตำแหน่งที่ต้องการบนหน้า
• แทรกโค้ด JavaScript ลงในเพจหรือในไฟล์ js ที่เชื่อมต่อกับเพจ

ขอแนะนำให้ย่อโค้ด CSS และ JavaScript ให้เล็กที่สุด การดำเนินการนี้จะช่วยให้โหลดหน้าเว็บได้เร็วขึ้น

วิธีพัฒนาแถบเลื่อนอย่างง่ายสำหรับเว็บไซต์ (โดยไม่ต้องวนซ้ำ)

การสร้าง chiefSlider จะประกอบด้วยการสร้างโค้ด HTML, CSS และ JavaScript (ไม่มี jQuery)

รหัส HTML สำหรับแถบเลื่อน chiefSlider:

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

องค์ประกอบแรกคือ .slider__wrapper มันทำหน้าที่เป็นเสื้อคลุมสำหรับองค์ประกอบ .slider__item (สไลด์)

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

รหัส CSS สำหรับแถบเลื่อน chiefSlider:

/* รูปแบบหลัก */ .slider ( ตำแหน่ง: สัมพันธ์; ล้น: ซ่อน; ) .slider__wrapper ( จอแสดงผล: flex; การเปลี่ยนแปลง: แปลง 0.6s ง่าย; /* 0.6 ระยะเวลาการเปลี่ยนสไลด์ในไม่กี่วินาที */ ) .slider__item ( ดิ้น: 0 0 50%; /* กำหนดจำนวนสไลด์ที่ใช้งานอยู่ (ในกรณีนี้ 2 */ ความกว้างสูงสุด: 50%; /* กำหนดจำนวนสไลด์ที่ใช้งานอยู่ (ในกรณีนี้ 2 */ ) /* ลักษณะสำหรับปุ่มย้อนกลับและไปข้างหน้า * / .slider__control ( ตำแหน่ง: สัมบูรณ์; จอแสดงผล: ไม่มี; ด้านบน: 50%; แปลง: แปล Y(-50%); align-items: center; justify-content: center; text-align: center; width: 40px; /* ความกว้างของปุ่ม */ ความสูง: 50px; /* ความสูงของปุ่ม */ ความทึบ: .5; /* ความโปร่งใส */ พื้นหลัง: #000; /* สีพื้นหลัง */ .slider__control_show ( จอแสดงผล: flex; ) .slider__control:hover, :focus ( การตกแต่งข้อความ: none; เค้าร่าง: 0; ความทึบ: .9; /* ความโปร่งใส */ ) .slider__control_left ( ซ้าย: 0; ) .slider__control_right ( ขวา: 0; ) .slider__control::before ( เนื้อหา: " " ; จอแสดงผล: อินไลน์บล็อก;

ความกว้าง: 20px; /* ความกว้างของไอคอน (ลูกศร) */ ความสูง: 20px; /* ความสูงของไอคอน (ลูกศร) */ พื้นหลัง: กึ่งกลางโปร่งใสไม่ซ้ำ;

ขนาดพื้นหลัง: 100% 100%; ) .slider__control_left::before ( ภาพพื้นหลัง: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( ภาพพื้นหลัง: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

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

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

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

/* กำหนดจำนวนสไลด์ที่ใช้งานอยู่ (ในกรณีนี้ 1) */ ดิ้น: 0 0 100%; ความกว้างสูงสุด: 100%;

การสร้างแถบเลื่อนแบบปรับได้นั้นดำเนินการโดยใช้คำสั่งสื่อ

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

Slider__item ( ดิ้น: 0 0 100%; ความกว้างสูงสุด: 100%; ) @media (ความกว้างขั้นต่ำ: 980px) ( .slider__item ( ดิ้น: 0 0 25%; ความกว้างสูงสุด: 25%; ) )

รหัส JavaScript สำหรับแถบเลื่อน chiefSlider:

"ใช้อย่างเข้มงวด"; var multiItemSlider = (ฟังก์ชั่น () ( ฟังก์ชั่นส่งคืน (ตัวเลือก) ( var _mainElement = document.querySelector(ตัวเลือก), // องค์ประกอบบล็อกหลัก _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper for.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // องค์ประกอบ (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // ควบคุม _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // " ปุ่ม LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // ปุ่ม "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ความกว้างของ wrapper _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / ความกว้างขององค์ประกอบหนึ่ง _positionLeftItem = 0, // ตำแหน่งขององค์ประกอบที่ใช้งานด้านซ้าย _transform = 0, // ค่าการเปลี่ยนแปลง.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // ขนาดขั้นตอน (สำหรับการแปลง) _items = ; องค์ประกอบ // การกรอกอาร์เรย์ _items _sliderItems.forEach(ฟังก์ชั่น (รายการ, ดัชนี) ( _items.push(( รายการ: รายการ, ตำแหน่ง: ดัชนี, แปลง: 0 ));< position.getMin()) { nextItem = position.getItemMax(); _items.position = position.getMin() - 1; _items.transform -= _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; } _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; }

- ตำแหน่ง var = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = ฟังก์ชั่น (ทิศทาง) ( ถ้า (ทิศทาง === "ขวา") ( ถ้า ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= ตำแหน่ง .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >=position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; if (ทิศทาง === "left") ( if (_positionLeftItem position.getMax() ) ( nextItem = position.getItemMin(); _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + " %"; ) _transform -= _step; ) ถ้า (ทิศทาง === "ซ้าย") ( _positionLeftItem--; if (_positionLeftItem

ที่จริงแล้วทุกอย่างเรียบง่ายที่นี่

หากมีองค์ประกอบดังกล่าวในอาร์เรย์ การเปลี่ยนแปลงของ element.slider__wrapper จะดำเนินการ (เช่น การดำเนินการ เช่นเดียวกับในอัลกอริทึมที่ไม่มีการวนซ้ำ)

แต่ถ้าไม่มีองค์ประกอบดังกล่าว นอกจาก changes.slider__wrapper แล้ว ยังมีการดำเนินการอื่นๆ อีกจำนวนหนึ่งด้วย ขั้นแรก อาร์เรย์รายการจะถูกค้นหาองค์ประกอบที่มีตำแหน่งขั้นต่ำ หลังจากได้รับองค์ประกอบนี้แล้ว ตำแหน่งจะถูกตั้งค่า ซึ่งค่าจะเท่ากับค่าขององค์ประกอบด้านขวาปัจจุบัน + 1 และแน่นอนว่าการเปลี่ยนแปลงนั้นดำเนินการด้วยจำนวนเปอร์เซ็นต์จนสิ้นสุดในตอนท้ายนั่นคือ หลังจากองค์ประกอบสุดท้าย

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

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

ในการทำเช่นนี้คุณต้องมี:

• ลบคลาส Slider__control_show ออกจากการควบคุม "ขวา"
• ใน CSS สำหรับ selector.slider__control ให้เปลี่ยนค่าคุณสมบัติการแสดงผลเป็น flex

การสาธิตตัวเลื่อน จะสร้างตัวเลื่อนที่มีการวนซ้ำและการเปลี่ยนสไลด์อัตโนมัติได้อย่างไร?

คุณสามารถตั้งโปรแกรมการเปลี่ยนสไลด์อัตโนมัติในช่วงเวลาหนึ่งได้โดยใช้ฟังก์ชัน setInterval

Var _cycle = function (ทิศทาง) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(direction); ), _config.interval); )

ฟังก์ชัน setInterval ในตัวอย่างนี้จะเรียกใช้ฟังก์ชัน _transformItem ตามช่วงเวลาที่ระบุ ซึ่งเท่ากับค่าของตัวแปร _config.interval

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

คุณสามารถใช้ฟังก์ชันนี้ได้ดังนี้:

ถ้า (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_interval); _cycle( _config.ทิศทาง);

จะหยุดการเปลี่ยนสไลด์อัตโนมัติได้อย่างไรหากผู้ใช้ไม่สามารถมองเห็นองค์ประกอบได้?

ขอแนะนำให้ปิดใช้งานการเปลี่ยนสไลด์อัตโนมัติในสองกรณี:

• เมื่อเพจ (ซึ่งมีแถบเลื่อนนี้อยู่) ไม่ได้ใช้งาน
• เมื่อแถบเลื่อนอยู่นอกพื้นที่การมองเห็นของเพจ

กรณีแรกสามารถจัดการได้โดยใช้เหตุการณ์การเปลี่ยนแปลงการมองเห็น

Document.addEventListener("การมองเห็นการเปลี่ยนแปลง", _handleVisibilityChange, false);

ฟังก์ชั่นสำหรับตัวจัดการเหตุการณ์การมองเห็นเปลี่ยน:

// การจัดการเหตุการณ์ "การเปลี่ยนแปลงการมองเห็นเอกสาร" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )

การคำนวณการมองเห็นองค์ประกอบสามารถทำได้โดยใช้ฟังก์ชัน _isElementVisible:

ฟังก์ชั่น _isElementVisible(องค์ประกอบ) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = function (x, y) ( กลับ document.elementFromPoint(x, y);< 0 || rect.bottom < 0 || rect.left >vความกว้าง || rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) ||. element.contains(elemFromPoint(rect.left, rect.bottom))); -

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

Var _transformItem = function (ทิศทาง) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...

ตัวเลื่อนที่ตอบสนองต่อการปรับขนาดหน้าต่างเบราว์เซอร์

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

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

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

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

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

Slick – ปลั๊กอินตัวเลื่อนแบบหมุนที่ทันสมัย

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

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

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

Owl Carousel 2.0 – jQuery – ปลั๊กอินสำหรับใช้กับอุปกรณ์ระบบสัมผัส

ปลั๊กอินนี้มีชุดฟังก์ชันมากมาย เหมาะสำหรับทั้งผู้เริ่มต้นและนักพัฒนาที่มีประสบการณ์ นี่คือตัวเลื่อนแบบหมุนเวอร์ชันอัปเดต บรรพบุรุษของเขามีชื่อเดียวกัน

แถบเลื่อนมีปลั๊กอินในตัวเพื่อปรับปรุงฟังก์ชันการทำงานโดยรวม แอนิเมชั่น, การเล่นวิดีโอ, การเล่นอัตโนมัติของตัวเลื่อน, การโหลดแบบ Lazy Loading, การปรับความสูงอัตโนมัติ - ​​นี่คือคุณสมบัติหลักของ Owl Carousel 2.0

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

ตัวอย่าง | ดาวน์โหลด

ปลั๊กอิน jQuery Silver Track

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

ตัวอย่าง | ดาวน์โหลด

AnoSlide – ตัวเลื่อน jQuery ที่ตอบสนองขนาดกะทัดรัดเป็นพิเศษ

ตัวเลื่อน jQuery ขนาดกะทัดรัดพิเศษ - ม้าหมุน ซึ่งมีฟังก์ชันการทำงานที่มากกว่าตัวเลื่อนทั่วไปมาก ซึ่งรวมถึงการแสดงตัวอย่างภาพเดียว การแสดงภาพแบบหมุนหลายภาพ และการแสดงแถบเลื่อนตามชื่อเรื่อง

ตัวอย่าง | ดาวน์โหลด

Owl Carousel – ตัวเลื่อน Jquery – ม้าหมุน

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

ตัวอย่าง | ดาวน์โหลด

แกลเลอรี่ 3 มิติ - ม้าหมุน

ใช้การเปลี่ยนภาพ 3 มิติตามสไตล์ CSS และโค้ด Javascript เล็กน้อย

ตัวอย่าง | ดาวน์โหลด

ม้าหมุน 3 มิติโดยใช้ TweenMax.js และ jQuery

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

ตัวอย่าง | ดาวน์โหลด

ม้าหมุนโดยใช้ bootstrap

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

ตัวอย่าง | ดาวน์โหลด

ตัวเลื่อนแบบหมุนกล่องการเคลื่อนย้ายตามกรอบ Bootstrap

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

ตัวอย่าง | ดาวน์โหลด

ตัวเลื่อนวงกลมจิ๋ว

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

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

ตัวอย่าง | ดาวน์โหลด

ตัวเลื่อนเนื้อหา Thumbelina

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

ตัวอย่าง | ดาวน์โหลด

ว้าว - สไลเดอร์ - ม้าหมุน

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

ตัวอย่าง | ดาวน์โหลด

ตัวเลื่อนเนื้อหา jQuery ที่ตอบสนอง bxSlider

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

ตัวอย่าง | ดาวน์โหลด

jCarousel

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

ตัวอย่าง | ดาวน์โหลด

Scrollbox - ปลั๊กอิน jQuery

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

ตัวอย่าง | ดาวน์โหลด

dbpasCarousel

แถบเลื่อนแบบหมุนที่เรียบง่าย หากคุณต้องการปลั๊กอินที่รวดเร็ว ปลั๊กอินนี้เหมาะสม 100% มาพร้อมกับคุณสมบัติพื้นฐานที่จำเป็นสำหรับแถบเลื่อนในการทำงาน

ตัวอย่าง | ดาวน์โหลด

Flexisel: ปลั๊กอิน JQuery Slider ที่ตอบสนอง - ม้าหมุน

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

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

ตัวอย่าง | ดาวน์โหลด

Elastislide – ตัวเลื่อนแบบปรับได้ – แบบหมุน

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

ตัวอย่าง | ดาวน์โหลด

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

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

ตัวอย่าง | ดาวน์โหลด

ม้าหมุนที่น่าทึ่ง

Amazing Carousel – ตัวเลื่อนรูปภาพตอบสนองโดยใช้ jQuery รองรับระบบการจัดการเนื้อหามากมาย เช่น WordPress, Drupal และ Joomla ยังรองรับระบบปฏิบัติการ Android และ IOS และเดสก์ท็อปโดยไม่มีปัญหาความเข้ากันได้ เทมเพลตแบบหมุนที่น่าทึ่งในตัวช่วยให้คุณใช้แถบเลื่อนในโหมดแนวตั้ง แนวนอน และวงกลมได้

ตัวอย่าง | ดาวน์โหลด

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

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

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

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

• การสลับสไลด์ซ้าย-ขวา
• โหมดการทำงานอัตโนมัติแบบ Slider ปุ่มเริ่ม-หยุดชั่วคราว
• ไม่จำกัดจำนวนสไลด์

เค้าโครงตัวเลื่อน

มาร์กอัปของแถบเลื่อนนั้นง่ายมาก เราต้องการ:

• ภาชนะทั่วไป (สไลเดอร์),
• สามคอนเทนเนอร์สำหรับการนำทาง (สองปุ่มสำหรับสไลด์ก่อนหน้า/ถัดไป (สีกรมท่า) และปุ่มหนึ่งปุ่ม (อัตโนมัติ) สำหรับปุ่มเริ่ม/หยุดชั่วคราว)
• คอนเทนเนอร์สำหรับสไลด์ทั้งหมด (รายการสไลด์)
• wrapper ของสไลด์ทั้งหมด (slide-wrap)

...จะมีสไลด์อยู่ในคอนเทนเนอร์รายการสไลด์ สไลด์แรก สไตล์ตัวเลื่อน

หากต้องการจัดสไตล์แถบเลื่อน ให้เพิ่มกฎสองสามข้อลงในไฟล์สไตล์

/* ตั้งค่าการรีเซ็ตการตัดคำ */ .clear ( margin-top: -1px; height: 1px; clear:both; Zoom: 1; ) /* Slider */ .slider ( /* ความกว้างของคอนเทนเนอร์ */ ความกว้าง: 900px; / * ระยะขอบด้านนอกที่ด้านบนและด้านล่าง */ ระยะขอบ: 50px อัตโนมัติ; /* ระยะขอบด้านในสำหรับลิงก์สีน้ำเงิน */ การขยาย: 0 30px; /* ตำแหน่ง */ ตำแหน่ง: สัมพันธ์; /* ดับเบิลคลิกที่ปุ่มไปข้างหน้า/ย้อนกลับเลือกองค์ประกอบตัวเลื่อนทั้งหมด . ดังนั้นเราจึงป้องกันสิ่งนี้ */ .slider::-moz-selection ( background: transparent; color: #fff; text-shadow: none; ) .slider::selection ( background: transparent; color: #fff; text- เงา: ไม่มี; ) .slide-list ( ตำแหน่ง: ญาติ; ระยะขอบ: 0; การขยาย: 0; /* ซ่อนสิ่งที่อยู่นอกเหนือขอบเขต */ ล้น: ซ่อนไว้; ) .slide-wrap ( ตำแหน่ง: ญาติ; ซ้าย: 0px; ด้านบน: 0; /* ความกว้างสูงสุดของแถบเลื่อน */ ความกว้าง: 10000000px; ) .slide-item ( /* ความกว้างของสไลด์ */ ความกว้าง: 280px; /* การขยาย */ การขยาย: 10px; /* การตัด */ ลอย : ซ้าย; ) .slide-title ( /* Font */ font: ตัวหนา 16px monospace;

/* ระบุว่าองค์ประกอบนั้นเป็นองค์ประกอบบล็อก */ display: block; -

และรูปแบบที่ไม่สำคัญสำหรับปุ่มนำทางไปข้างหน้า/ถอยหลัง และเริ่ม/หยุดชั่วคราว

/* การนำทางไปข้างหน้า/ข้างหลัง */ .navy ( /* ตำแหน่งที่แน่นอน */ ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ดัชนี z: 1; ความสูง: 100%; /* ความกว้างขององค์ประกอบ */ ความกว้าง: 30px; เคอร์เซอร์: ตัวชี้; ) .prev-slide ( left: 0; พื้นหลัง: #dbdbdb url(bg/left-arrow.png) 11px 40% no-repeat; ) .next-slide ( right: 0; พื้นหลัง: #dbdbdb url(bg/right -arrow.png) 13px 40% ไม่ทำซ้ำ; ) .navy.disable ( พื้นหลัง: #dbdbdb; ) /* การนำทางเริ่มต้น/หยุดชั่วคราว */ .auto ( กว้าง: 7px; ความสูง: 11px; เคอร์เซอร์: ตัวชี้; ระยะขอบ: 10px auto; ) .play ( พื้นหลัง: url(bg/play.png) center no-repeat; ) .pause ( พื้นหลัง: url(bg/pause.png) center no-repeat; )

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

การเขียนสคริปต์

jQuery(document).ready(function())( function htmSlider())( /* ตั้งค่าพารามิเตอร์ต่อไปนี้ */ /* slider wrapper */ var slideWrap = jQuery(".slide-wrap"); /* ไปข้างหน้า/ข้างหลัง และปุ่มเริ่มต้น /pause */ var nextLink = jQuery(".next-slide"); var prevLink = jQuery(".prev-slide"); var playLink = jQuery(".auto"); = false; width พร้อมช่องว่างภายใน */ var slideWidth = jQuery(".slide-item").outerWidth(); /* slider offset */ var scrollSlider = slideWrap.position().left - slideWidth; โดยลิงก์ไปยังสไลด์ถัดไป */ nextLink .click(function())( if(!slideWrap.is(":animated")) ( slideWrap.animate((left: scrollSlider), 500, function())( slideWrap .find(" .slide-item:first ") .appendTo(slideWrap) .parent() .css(("left": 0)); )); ) )); /* คลิกที่ลิงค์ไปยังสไลด์ก่อนหน้า */ prevLink.click( function()) ( if(!slideWrap.is(":animated")) ( slideWrap .css(("left": scrollSlider)) .find(".slide-item:last") .prependTo(slideWrap) .parent( ) .animate ((ซ้าย: 0), 500);

- /* ฟังก์ชั่นสำหรับการเลื่อนแถบเลื่อนอัตโนมัติ */ ฟังก์ชั่นเล่นอัตโนมัติ())( if(!is_animate)( is_animate = true; slideWrap.animate((left: scrollSlider), 500, function())( slideWrap .find(". slide-item:first ") .appendTo(slideWrap) .parent() .css(("left": 0)); is_animate = false; )); ) ) /* คลิกบนลิงก์ start/pause */ playLink.click (function())( if(playLink.hasClass("play"))( /* เปลี่ยนคลาสของปุ่มเป็นคลาสหยุดชั่วคราว */ playLink.removeClass("play").addClass("pause"); /* เพิ่มคลาสให้กับปุ่มเดินหน้า/ถอยหลังที่ซ่อนไว้ */ jQuery(".navy").addClass("disable"); /* เริ่มต้นฟังก์ชันเล่นอัตโนมัติ() ผ่านตัวแปรเพื่อให้คุณสามารถปิดการใช้งานได้ในภายหลัง */ timer = setInterval(เล่นอัตโนมัติ, 1000) else ( playLink.removeClass( "pause").addClass("play"); /* แสดงปุ่มเดินหน้า/ถอยหลัง */ jQuery(".navy").removeClass("disable"); /* ปิดการใช้งานฟังก์ชั่นเล่นอัตโนมัติ () */ clearInterval(timer);

) /* เริ่มต้นฟังก์ชันตัวเลื่อน */ htmSlider(); -

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

ออฟเซ็ตห่อตัวเลื่อน

ขั้นแรก ฉันเพียงแค่ทำให้การคลิกที่ปุ่ม nextLink เคลื่อนไหว: โดยใช้ฟังก์ชัน animate() เราจะทำให้แถบเลื่อนของแถบเลื่อนเคลื่อนไหวไปทางซ้ายตามค่า scrollSlider หลังจากเหตุการณ์นี้เกิดขึ้น ให้ย้ายสไลด์แรกในรายการสไลด์ไปยังจุดสิ้นสุดของรายการ และตั้งค่าตำแหน่งด้านซ้ายของ wrapper รายการสไลด์เป็น 0 แต่ปรากฎว่าหากคุณคลิกอย่างรวดเร็ว 10 ครั้ง การเคลื่อนไหว 10 ครั้งจะเกิดขึ้นและนี่คือจุดบกพร่องที่แท้จริง

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

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

มันง่ายมาก)

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

เมื่อคุณคลิกที่ปุ่มตัวเลื่อนอัตโนมัติ เหตุการณ์ต่อไปนี้จะเกิดขึ้น:

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

หากปุ่มมีคลาสหยุดชั่วคราว เราจะเปลี่ยนคลาสนี้เป็นเริ่มต้น แสดงปุ่มเดินหน้า/ถอยหลัง และหยุดตัวแปรตัวจับเวลา ซึ่งจะเริ่มการเลื่อนอัตโนมัติ

ขั้นตอนสุดท้ายคือการเริ่มต้นฟังก์ชันตัวเลื่อน htmSlider();

แถบเลื่อนสองตัวขึ้นไปในหนึ่งหน้า

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

JQuery(document).ready(function())( //// ---> ตรวจสอบว่ามีองค์ประกอบอยู่ในหน้า jQuery.fn.exists = function() ( return jQuery(this).length; ) /// / -- -> ตัวเลื่อน $(function())( if($(".slider").exists()) ( $(".slider").each(function())( var slider = $(this) ; var slideWrap = slider .find(".slide-wrap"), nextLink = slider.find(".next-slide"), prevLink = slider.find(".prev-slide"), slideWidth = slider.find( ".slide-item ").outerWidth(), scrollSlider = slideWrap.position().left - slideWidth; /* คลิกที่ลิงค์ไปยังสไลด์ถัดไป */ nextLink.click(function())( if(!slideWrap. คือ(":animated")) ( slideWrap.animate((ซ้าย: scrollSlider), 500, function())( slideWrap .find(".slide-item:first") .appendTo(slideWrap) .parent() .css (("left": 0)) ; /* คลิกที่ลิงค์ไปยังสไลด์ก่อนหน้า */ prevLink.click(function())( if(!slideWrap.is(":animated") ) ( slideWrap .css(("left": scrollSlider )) .find(".slide-item:last") .prependTo(slideWrap) .parent() .animate((ซ้าย: 0), 500);

- - - -

...

มาร์กอัปของแถบเลื่อนตัวที่สองแตกต่างจากตัวแรกเพียงตรงที่เราเพิ่มคลาสอื่นให้กับ container.slider ซึ่งจะทำให้เราสามารถจัดสไตล์ตัวเลื่อนตัวที่สอง (ที่สาม, n) ตามที่เราต้องการ:

มาออกแบบองค์ประกอบบางอย่างของตัวเลื่อนให้แตกต่างกัน (ลดความกว้างของตัวเลื่อน, สไลด์, ตั้งค่าสีและแบบอักษรอื่นสำหรับคำอธิบายภาพสไลด์):

Slider.slider2 ( กว้าง: 400px; ) .slider2 .slide-item ( กว้าง: 180px; ) .slider2 .slide-title ( ตัวอักษร: ตัวหนา 12px Arial; สี: #ed0000; ) .slider2 .navy ( padding-top: 30px ; ) .slider2 .slide-item img ( แสดง: บล็อก; ความกว้าง: 100%; )

บทสรุป

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

นี่คือแถบเลื่อนแบบสัมผัสที่ตอบสนองซึ่งเขียนด้วย jQuery กลไกของปลั๊กอินนี้ใช้ภาพเคลื่อนไหว CSS3 แต่ในขณะเดียวกันก็ให้ทางเลือกสำรองสำหรับเบราว์เซอร์เวอร์ชันเก่า Glide.js นั้นเรียบง่ายและมีน้ำหนักเบา

การใช้งาน 1. เชื่อมต่อ jQuery

การพึ่งพาเพียงอย่างเดียวของปลั๊กอินคือ jQuery ซึ่งเราต้องรวมไว้ก่อน:

2. เชื่อมต่อ Glide.js

3. เพิ่ม html

มาเชื่อมต่อสไตล์พื้นฐานกัน

มาสร้างโครงสร้าง html ของแถบเลื่อนกัน

4. การเริ่มต้น

เปิดตัวแถบเลื่อนด้วยการตั้งค่าเริ่มต้น...

$(".slider").glide();

...หรือปรับแต่งเพื่อตัวคุณเอง

$(".slider").glide(( เล่นอัตโนมัติ: 5000, ลูกศร: "body", nav: "body" ));

การตั้งค่า

รายการพารามิเตอร์ที่ใช้ได้:	ค่าเริ่มต้น	พิมพ์	คำอธิบาย
เล่นอัตโนมัติ	4000	int/บูล	เลื่อนอัตโนมัติ (เท็จเพื่อปิดใช้งาน)
โฮเวอร์หยุดชั่วคราว	จริง	บูล	หยุดการเลื่อนอัตโนมัติชั่วคราวเมื่อวางเมาส์ไว้เหนือแถบเลื่อน
แอนิเมชั่นไทม์	500	ภายใน	- ตัวเลือกนี้จะใช้งานได้หากเบราว์เซอร์ไม่รองรับ CSS3 หากเบราว์เซอร์รองรับ css3 จะต้องเปลี่ยนพารามิเตอร์นี้ในไฟล์ .css!!!
ลูกศร	จริง	บูล/สตริง	แสดง/ซ่อน/แนบลูกศร จริงเพื่อแสดงลูกศรในคอนเทนเนอร์ตัวเลื่อน เท็จที่จะซ่อน คุณยังสามารถระบุชื่อของคลาส (ตัวอย่าง: ".class-name") เพื่อแนบโค้ด html พิเศษได้
arrowsWrapperClass	ลูกศรเลื่อน	เชือก	คลาสที่จะถูกกำหนดให้กับคอนเทนเนอร์ที่มีลูกศร
arrowMainClass	ลูกศรเลื่อน	เชือก	คลาสหลักสำหรับลูกศรทั้งหมด
arrowRightClass	แถบเลื่อน-ลูกศร--ขวา	เชือก	คลาสลูกศรขวา
arrowLeftClass	แถบเลื่อน-ลูกศร--ซ้าย	เชือก	คลาสลูกศรซ้าย
arrowRightText	ต่อไป	เชือก	ข้อความลูกศรขวา
arrowLeftText	ก่อนหน้า	เชือก	ข้อความลูกศรซ้าย
นำทาง	จริง	บูล/สตริง	แสดง/ซ่อน/ปักหมุดการนำทางสไลด์ เป็นจริงในการแสดง เท็จที่จะซ่อน
navCenter	จริง	บูล	การนำทางโดยศูนย์กลาง
navClass	แถบเลื่อน-นำทาง	เชือก	คลาสสำหรับคอนเทนเนอร์การนำทาง
navItemClass	แถบเลื่อน-nav__item	เชือก	คลาสสำหรับองค์ประกอบการนำทาง
navCurrentItemClass	แถบเลื่อน-nav__item--ปัจจุบัน	เชือก	คลาสสำหรับองค์ประกอบการนำทางปัจจุบัน
แป้นพิมพ์	จริง	บูล	เลื่อนสไลด์เมื่อคุณกดปุ่มซ้าย/ขวา
สัมผัสระยะทาง	60	int/บูล	รองรับการสัมผัส เท็จเพื่อปิดใช้งานคุณลักษณะนี้
ก่อนเริ่มต้น	การทำงาน()()	การทำงาน	การโทรกลับที่จะดำเนินการก่อนที่ปลั๊กอินจะเริ่มต้น
หลังจากเริ่มต้น	การทำงาน()()	การทำงาน	โทรกลับที่จะทำงานหลังจากเริ่มต้นปลั๊กอินแล้ว
ก่อนการเปลี่ยนแปลง	การทำงาน()()	การทำงาน	การโทรกลับที่จะดำเนินการก่อนที่จะเลื่อนแถบเลื่อน
หลังจากการเปลี่ยนแปลง	การทำงาน()()	การทำงาน	โทรกลับที่จะทำงานหลังจากเลื่อนแถบเลื่อน

เอพีไอ

หากต้องการใช้ API ให้เขียน glide ไปยังตัวแปร

Var glide = $(".slider").glide().data("api_glide");

วิธี API พร้อมใช้งานสำหรับคุณแล้ว

Glide.jump(3, console.log("วู้!"));

• .current() - กลับหมายเลขด้านปัจจุบัน
• .play() - เริ่มการเลื่อนอัตโนมัติ
• .pause() - หยุดการเลื่อนอัตโนมัติ
• .next(callback) - เลื่อนแถบเลื่อนไปข้างหน้า
• .prev(callback) - เลื่อนแถบเลื่อนกลับ
• .jump(ระยะทาง, โทรกลับ) - สลับไปยังสไลด์ที่ต้องการ
• .nav(target) - แนบการนำทางไปยังองค์ประกอบเฉพาะ (เช่น: "body", ".class", "#id")
• .arrows(target) - แนบลูกศรเข้ากับองค์ประกอบเฉพาะ (เช่น "body", ".class", "#id")

เราต้องการแถบเลื่อนธรรมดาพร้อมการเลื่อนอัตโนมัติ มาเริ่มกันเลย...

คำอธิบายวิธีการทำงานของแถบเลื่อน

สไลด์จะเรียงกันและจะเลื่อนหลังจากผ่านไประยะหนึ่ง

กรอบสีแดงแสดงส่วนที่มองเห็นได้ของแถบเลื่อน

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

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

มาร์กอัป HTML

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

รูปแบบตัวเลื่อน .slider-box( width : 320px ; height : 210px ; overflow : Hidden ; ) .slider( ตำแหน่ง : สัมพันธ์ ; width : 10000px ; height : 210px ; ) .slider img( float : left ; z-index : 0 ; )

Container.slider-box ระบุขนาดของแถบเลื่อน การใช้คุณสมบัติ overflow:hidden องค์ประกอบทั้งหมดที่ไม่รวมอยู่ในพื้นที่ภายในองค์ประกอบจะถูกซ่อนไว้

Container.slider ถูกตั้งค่าให้มีความกว้างมาก นี่เป็นสิ่งจำเป็นเพื่อให้สไลด์ทั้งหมดพอดีกับเส้น

สไลด์จะถูกจัดแนวโดยใช้คุณสมบัติ float:left

ด้านล่างนี้เป็นแผนผังของบล็อกตัวเลื่อน

สคริปต์

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

$(function () ( var width= $(".slider-box" ) .width () ; // Slider width.interval = 4000 ; // ช่วงการเปลี่ยนสไลด์ $(".slider img:last" ) .clone () .prependTo (".slider" ) ; // สำเนาของสไลด์สุดท้ายถูกวางไว้ที่จุดเริ่มต้น $() .eq (1 ) .clone ().appendTo ( "slider" ) ; ถูกเลื่อนไปทางซ้ายตามความกว้างของสไลด์หนึ่ง setInterval("animation()" , Interval) ; // ฟังก์ชัน Animation() เริ่มทำงานเพื่อเปลี่ยนสไลด์

ฟังก์ชั่นแอนิเมชั่น() ( var margin = parseInt($(".slider" ) .css ("marginLeft" ) ) ; // บล็อกปัจจุบัน offset.slider width= $(".slider-box" ) .width () , / / Slider width. slidersAmount= $(".slider" ) .children ().length ; // จำนวนสไลด์ในตัวเลื่อน if (margin!= (- width* (slidersAmount- 1 ) ) // ถ้าปัจจุบัน สไลด์ไม่ใช่อันสุดท้าย , ( Margin= Margin- width; // จากนั้นค่า Margin จะลดลงตามความกว้างของสไลด์ ) else ( // หากแสดงสไลด์สุดท้าย $(".slider" ) css ("margin-left" , - width) ; // จากนั้น block.slider จะกลับสู่ตำแหน่งเดิม, margin=- width* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ) ; // Block.slider ถูกเลื่อนไปทางซ้าย 1 สไลด์ ;