ตัวเลื่อนแนวตั้ง Jquery พร้อมลูกศรและการนำทาง ตัวเลือกแถบเลื่อนแบบปรับได้
เราต้องการแถบเลื่อนธรรมดาพร้อมการเลื่อนอัตโนมัติ มาเริ่มกันเลย...
คำอธิบายวิธีการทำงานของแถบเลื่อนสไลด์จะเรียงกันและจะเลื่อนหลังจากผ่านไประยะหนึ่ง
กรอบสีแดงแสดงส่วนที่มองเห็นได้ของแถบเลื่อน
ในตอนท้ายของแถบเลื่อน คุณต้องทำซ้ำสไลด์แรก นี่เป็นสิ่งจำเป็นเพื่อให้แน่ใจว่าสามารถเลื่อนจากสไลด์ที่สามไปยังสไลด์แรกได้ คุณต้องเพิ่มสไลด์สุดท้ายที่จุดเริ่มต้นเพื่อให้สามารถเลื่อนไปข้างหลังจากสไลด์แรกไปยังสไลด์ที่สามได้ ด้านล่างนี้จะแสดงวิธีการทำงานของแถบเลื่อนในทิศทางไปข้างหน้า
เมื่อแถบเลื่อนถึงจุดสิ้นสุด สำเนาของแถบเลื่อนจากจุดเริ่มต้นของแถบเลื่อนจะถูกวางแทนที่สไลด์สุดท้ายทันที จากนั้นวงจรจะเกิดซ้ำอีกครั้ง สิ่งนี้สร้างภาพลวงตาของแถบเลื่อนที่ไม่มีที่สิ้นสุด
มาร์กอัป HTMLขั้นแรก เรามาสร้างแถบเลื่อนแบบง่ายๆ พร้อมการเลื่อนอัตโนมัติกัน ต้องใช้ตู้คอนเทนเนอร์สองตู้ในการทำงาน อันแรกจะกำหนดขนาดของพื้นที่ที่มองเห็นของตัวเลื่อนและอันที่สองจำเป็นต้องวางตัวเลื่อนไว้ เค้าโครงตัวเลื่อนจะมีลักษณะดังนี้:
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" ) ; // สำเนาของ สไลด์แรกจะถูกวางไว้ที่ส่วนท้าย // Container.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= ความกว้างของขอบ; // จากนั้นค่าของระยะขอบจะลดลงตามความกว้างของสไลด์ ) else ( // ถ้าสไลด์สุดท้ายแสดงขึ้น $(".slider" ) .css ( "margin-left" , - width) ; // จากนั้น block.slider จะกลับสู่ตำแหน่งเริ่มต้น margin=- width* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ) ; / / Block.slider ถูกเลื่อนไปทางซ้าย 1 สไลด์ ) ;ผลลัพธ์ที่ได้คือแถบเลื่อนธรรมดาที่มีการเลื่อนอัตโนมัติไม่รู้จบ
ในบทความนี้ เราจะดูว่าคุณสามารถสร้างแถบเลื่อนแบบปรับได้สำหรับเว็บไซต์โดยใช้การแปลง CSS Flexbox และ CSS ได้ง่ายเพียงใด
ซอร์สโค้ด Slider และการสาธิตโปรเจ็กต์ตัวเลื่อนที่เรียกว่า chiefSlider ตั้งอยู่บน GitHub คุณสามารถไปได้โดยใช้ลิงก์นี้
ตัวเลื่อนที่มีหนึ่งสไลด์ที่ใช้งานอยู่ (ไม่มีการวนซ้ำ):
ตัวเลื่อนที่มีสามสไลด์ที่ใช้งานอยู่ (ไม่มีการวนซ้ำ):
ตัวอย่างที่แสดงวิธีที่คุณสามารถใช้แถบเลื่อนเพื่อหมุนบทความ:
ข้อดีของ chiefSlider มาดูข้อดีหลักของแถบเลื่อนนี้กัน:
- ประการแรก มันไม่ได้สร้างโคลนขององค์ประกอบเพื่อจัดระเบียบการวนซ้ำ ดังที่ถูกนำมาใช้ เช่น ในปลั๊กอิน OwlCarousel และเนียน
- ประการที่สอง มันไม่ได้ขึ้นอยู่กับไลบรารี jQuery สิ่งนี้ไม่เพียงแต่ขจัดข้อกำหนดเพิ่มเติมเท่านั้น แต่ยังทำให้ง่ายขึ้นอีกด้วย
- ประการที่สาม แทบไม่มีการเปลี่ยนแปลง DOM ของเอกสาร สิ่งเดียวที่ทำคือเพิ่มหรือเปลี่ยนค่าการแปลง CSS สำหรับองค์ประกอบตัวเลื่อน
- ประการที่สี่ มีเพียงชุดฟังก์ชันขั้นต่ำเท่านั้น สามารถเพิ่มฟังก์ชันการทำงานเพิ่มเติมได้ขึ้นอยู่กับงาน
- ประการที่ห้า มีการปรับตัว กล่าวคือ สามารถใช้กับเว็บไซต์ใดก็ได้ ความสามารถในการปรับตัวของแถบเลื่อนได้รับการกำหนดค่าโดยใช้ CSS
- ประการที่หก จำนวนองค์ประกอบที่ใช้งานอยู่จะถูกปรับโดยใช้ CSS ซึ่งหมายความว่าสามารถใช้เพื่อสร้างภาพหมุนด้วยสไลด์ที่ใช้งานอยู่หนึ่งสไลด์หรือจำนวนเท่าใดก็ได้
การติดตั้งตัวเลื่อนใช้เวลา 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, . slider__control:focus ( การตกแต่งข้อความ: none; เค้าร่าง: 0; ความทึบ: .9; /* ความโปร่งใส */ ) .slider__control_left ( ซ้าย: 0; ) .slider__control_right ( ขวา: 0; ) .slider__control::before ( เนื้อหา: " "; display: อินไลน์บล็อก; ความกว้าง: 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 สำหรับแถบเลื่อนนั้นไม่ได้ซับซ้อนมากนัก คำจำกัดความหลักที่คุณสามารถปรับแต่งลักษณะที่ปรากฏของแถบเลื่อนนั้นมาพร้อมกับความคิดเห็น
รหัส CSS ที่กำหนดจำนวนองค์ประกอบที่ใช้งานอยู่:
/* กำหนดจำนวนสไลด์ที่ใช้งานอยู่ (ในกรณีนี้ 2) */ ดิ้น: 0 0 50%; ความกว้างสูงสุด: 50%;
รหัสนี้กำหนดจำนวนองค์ประกอบที่ใช้งานอยู่สำหรับแถบเลื่อนเป็น 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"), // ปุ่ม "ขวา" _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 )); )); ตำแหน่ง 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++; _transform -= _step; ) 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; ) if (ทิศทาง === "left") ( _positionLeftItem--; if (_positionLeftItem< 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 + "%)"; }
ที่จริงแล้วทุกอย่างเรียบง่ายที่นี่
ตัวอย่างเช่น เพื่อที่จะย้ายไปยังสไลด์ถัดไป ก่อนอื่นอาร์เรย์ items จะถูกค้นหาสำหรับองค์ประกอบที่มีตำแหน่งที่มากกว่าตำแหน่งขวาสุดปัจจุบันของ element.slider__item
หากมีองค์ประกอบดังกล่าวในอาร์เรย์ การเปลี่ยนแปลงของ 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.direction); )); )
จะหยุดการเปลี่ยนสไลด์อัตโนมัติได้อย่างไรหากผู้ใช้ไม่สามารถมองเห็นองค์ประกอบได้?ขอแนะนำให้ปิดใช้งานการเปลี่ยนสไลด์อัตโนมัติในสองกรณี:
- เมื่อเพจ (ซึ่งมีแถบเลื่อนนี้อยู่) ไม่ได้ใช้งาน
- เมื่อแถบเลื่อนอยู่นอกพื้นที่การมองเห็นของหน้า
กรณีแรกสามารถจัดการได้โดยใช้เหตุการณ์การเปลี่ยนแปลงการมองเห็น
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); ); ถ้า (rect.right< 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 อาร์เรย์ใช้สำหรับการคำนวณ การใช้งานจะช่วยให้คุณหลีกเลี่ยงการเริ่มต้นแถบเลื่อนอีกครั้งเมื่อไม่จำเป็น
หนึ่งใน วิธีที่มีประสิทธิภาพการดึงดูดความสนใจของผู้ใช้บนหน้าเว็บไซต์คือการสร้างภาพเคลื่อนไหว องค์ประกอบภาพเคลื่อนไหวช่วยบอกและแสดงให้ผู้ใช้เห็นเกี่ยวกับผลิตภัณฑ์ของคุณได้ชัดเจนยิ่งขึ้น เมื่อเร็วๆ นี้แผงป๊อปอัปได้รับความนิยมอย่างมาก เช่นเดียวกับเอฟเฟกต์อื่นๆ มากมายที่ปรากฏขึ้นเมื่อเลื่อนหรือคลิกรูปภาพ เรียกอีกอย่างว่าแถบเลื่อน ม้าหมุน และแผงป๊อปอัป ในบทความนี้ เราจะพูดถึงการสร้างแถบเลื่อนแบบหมุนแบบปรับได้พร้อมเอฟเฟกต์การเลื่อนอัตโนมัติที่ราบรื่น
วันนี้มีบทวิจารณ์หลายร้อยรายการบนอินเทอร์เน็ตพร้อมลิงก์ไปยังโซลูชันสำเร็จรูป แต่ส่วนใหญ่มีฟังก์ชันที่ไม่ได้ใช้มากมายซึ่งจะลดประสิทธิภาพของแถบเลื่อนลงอย่างมากรวมทั้งทำให้การโหลดไซต์โดยรวมช้าลง นักพัฒนาเว็บมืออาชีพมุ่งมั่นที่จะสร้างผลิตภัณฑ์ซอฟต์แวร์ที่มีความยืดหยุ่นในการกำหนดค่า โดยมีอุปสรรคในการเข้าใช้ไลบรารีและปลั๊กอินเพิ่มเติมต่ำ นั่นคือเหตุผลที่สคริปต์ของเราใช้ข้อกำหนดขั้นต่ำในการจัดระเบียบแถบเลื่อนดังกล่าว ฟังก์ชั่นนี้ช่วยให้คุณกำหนดช่วงเวลาการสลับ ความเร็ว รวมถึงตัวเลือกของสไลด์ที่ต้องการได้ ด้านล่างนี้คือตัวแปรจำนวนหนึ่งที่ควบคุมการทำงานของตัวเลื่อนเอง
timeList - ความเร็วในการสลับสไลด์
TimeView - แสดงเวลา
RadioBut - ปุ่มใต้สไลด์เพื่อการนำทางอย่างรวดเร็ว ค่าเริ่มต้นคือ true หากคุณใช้ false ปุ่มต่างๆ จะหายไป
มาเริ่มกันเลย! มาสร้างและเปิดไฟล์ index.htm กัน
ดังที่เราเห็นแล้วว่าไม่มีอะไรซับซ้อนในโค้ดที่นำเสนอ กำหนดแถบเลื่อน ตำแหน่งทั่วไปและจัดแถบเลื่อนให้อยู่ตรงกลางหน้าจอ พารามิเตอร์ active-slide กำหนดขนาดและความสูงของรูปภาพตามความยาวของภาพ และแถบเลื่อนจะแสดงเฉพาะภาพที่ใช้งานอยู่เท่านั้น
ตอนนี้เรามาสร้างและเปิดไฟล์ style.css และเพิ่มมาร์กอัปที่เราต้องการ:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body ( color: #4f4f5a; ตระกูลแบบอักษร: "Roboto", sans-serif; ขนาดตัวอักษร: 16px; การขยาย: 0; ระยะขอบ: 0; ) #slider-wrap (ความกว้างสูงสุด: 800px; ระยะขอบ: 0 อัตโนมัติ; ขอบด้านบน: 80px; ) #active-slide ( ความกว้าง: 100%; จอแสดงผล: ตาราง; ตำแหน่ง: สัมพันธ์; ล้น: ซ่อนไว้; -webkit-user-select: ไม่มี; -moz-user-select: ไม่มี; -ms- ผู้ใช้เลือก: ไม่มี; -o-ผู้ใช้เลือก: ไม่มี; ผู้ใช้เลือก: ไม่มี; ) #slider ( ตำแหน่ง: สัมพันธ์; ความกว้าง: คำนวณ (100% * 4); ด้านบน: 0; ซ้าย: 0; ระยะขอบ: 0 ; ช่องว่างภายใน: 0; -webkit-transition: 1s; -o-transition: 1s; การเปลี่ยนแปลง: 1s; -webkit-transition-timing-function: ง่ายในการเข้าออก; -o-transition-timing-function: ง่ายใน -out; transition-timing-function: easy-in-out; ) .slide( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide img ( width: 100%; ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( margin:2px; display:inline-block; width:16px; height:16px; ล้น :hidden; text-indent:-9999px; background:url(radioBg.png) ตรงกลางด้านล่าง ไม่ทำซ้ำ; ) .Radio-But .ctrl-select:hover ( cursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( ตำแหน่งพื้นหลัง:center top; ) #prewbutton, #nextbutton ( display :block; width:40px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background: url("arrowBg.png") ตรงกลางด้านซ้าย ไม่ทำซ้ำ; ความทึบ:0.5 ; z-index:3; outline:none !important; ) #prewbutton ( left:10px; ) #nextbutton ( right:10px; background:url(arrowBg.png) ตรงกลางขวา ไม่ทำซ้ำ; ) #prewbutton:hover, # ปุ่มถัดไป:โฮเวอร์ ( ความทึบ:1; )
ในคุณสมบัติ Slider-Wrap Style ให้ป้อน width – ความยาวสูงสุดของรูปภาพของคุณ
ในคุณสมบัติสไตล์ #slider ( width: calc(100% * 4); ) และ .slide ( width: calc(100%/4); ) ให้ระบุจำนวนรูปภาพในแถบเลื่อนของคุณ ในตัวอย่างของเรามี 4 รายการ
หากลูกศรไปข้างหน้า/ย้อนกลับขัดขวางการมองเห็นแถบเลื่อนของคุณ ลูกศรเหล่านั้นอาจถูกทำให้มองไม่เห็นและจะปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปเหนือลูกศรเหล่านั้น เมื่อต้องการทำเช่นนี้ ในพารามิเตอร์ prewBut และ nextBut ให้ตั้งค่าคุณสมบัติความทึบเป็น 0
ตอนนี้เรามาสร้างและเปิดไฟล์ Slider.js ซึ่งจะมีโค้ดตัวเลื่อนอยู่ อย่าลืมรวมไลบรารี jQuery ด้วย
$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = ฟังก์ชั่น(ลูกศร)( clearTimeout(slideTime); if(arrow == "ถัดไป")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) TranslateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); ) else if(arrow == " หน้าก่อน") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) transWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); )else( slideNum = arrow; TranslateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); ) $(".ctrl-select.active" ).removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("") .prependTo ("#active-สไลด์"); $("#nextbutton").click(function())( animSlide("next"); return false; )) $("#prewbutton").click(function())( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += "" + ดัชนี + ""; )); $("" + adderSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var หยุดชั่วคราว = เท็จ; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), TimeView);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); Pause = True;), function()(pause = false; rotator(); )); คลิก var = false; var prevX; $(".slide").mousedown(function(e)( คลิก = true; prevX = e.clientX; )); $(".slide").mouseup(function() ( คลิก = false; )); $(document).mouseup(function())( คลิก = false; )); $(".slide").mousemove(function(e)( if(คลิก == true) ( if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) คลิก = false; ) )); $(".slide").hover().css("cursor", "pointer"); โรเตเตอร์(); ));
ฟังก์ชัน animSlide ยอมรับค่าสามประเภท: ถัดไป ก่อนหน้า ค่าตัวเลข พารามิเตอร์ถัดไปจะสลับสไลด์ถัดไป prew ส่งคืนสไลด์ก่อนหน้า และค่าตัวเลขคือสไลด์เฉพาะที่เลือกผ่านปุ่มตัวเลือกด้านล่างสไลด์
แถบเลื่อนที่นำเสนอใช้รูปภาพจากแหล่งข้อมูลบนเว็บ https://pixabay.com/
นี่คือแถบเลื่อนแบบสัมผัสที่ตอบสนองซึ่งเขียนด้วย 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")
แกลเลอรี jquery ที่ตอบสนอง (ปรับขนาดเมื่อความละเอียดหน้าจอเปลี่ยนแปลง) แสดงในหน้าต่างป๊อปอัปพร้อมภาพขนาดย่อและคำอธิบายภาพ แกลเลอรี Jquery “Fresco” ทำงานได้อย่างถูกต้องในเบราว์เซอร์ส่วนใหญ่ รวมถึง: IE6+, Firefox 3+, Chrome 5+, Opera 9+ ปลั๊กอินเวอร์ชันฟรีนี้สามารถใช้ได้กับโครงการที่ไม่ใช่เชิงพาณิชย์เท่านั้น
2. แถบเลื่อน “อะแดปเตอร์”
แถบเลื่อนพร้อมเอฟเฟกต์การเปลี่ยนแปลงต่างๆ (เอฟเฟกต์ 7 แบบ รวมถึง 3D) โครงการบน Github
3. ปลั๊กอินตัวเลื่อนพร้อมเอฟเฟกต์ต่าง ๆ “jQ-Tiles”
ปลั๊กอินที่มีเอฟเฟ็กต์การเปลี่ยนแปลงต่างๆ ความเร็วสไลด์ที่ปรับแต่งได้ และฟังก์ชันการเลื่อนอัตโนมัติ
4. ปลั๊กอิน jQuery “เจ้าเล่ห์”
ปลั๊กอินสำหรับใช้งาน scroller แนวตั้งและแนวนอน โครงการบน Github
5. เมนู CSS3 “Makisu” แบบเคลื่อนไหว
แถบเลื่อนเนื้อหา/สไลด์โชว์ (สไลด์สามารถมีได้ไม่เพียงแต่รูปภาพเท่านั้น แต่ยังมีคลิปวิดีโอและเนื้อหา HTML อื่น ๆ อีกด้วย) สำหรับการนำทาง คุณสามารถใช้: รูปขนาดย่อ, ปุ่มซ้าย/ขวา และการใช้แป้นพิมพ์ โครงการบน Github.com
8. ชุดปลั๊กอิน jQuery “Vanity”
ชุดประกอบด้วยปลั๊กอิน 7 ตัว: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder และ jCollapse ชุดโซลูชันเหล่านี้จะช่วยให้คุณใช้งานแถบเลื่อน คำแนะนำเครื่องมือ แท็บ คำอธิบายรูปภาพป๊อปอัป ฯลฯ
9. เอฟเฟกต์โฮเวอร์ CSS3
แถบเลื่อนที่ออกแบบมาเพื่อทำงานบนอุปกรณ์เคลื่อนที่
12. ตัวบ่งชี้การโหลด CSS3
ปลั๊กอินเป็นวิธีแก้ปัญหาง่ายๆ สำหรับการดูสินค้าในตัวเลือกสีต่างๆ (ที่เกี่ยวข้อง เช่น สำหรับร้านขายเสื้อผ้าออนไลน์เพื่อให้ผู้เข้าชมเลือกได้ โทนสีผลิตภัณฑ์จากหลายตัวเลือก) เพื่อให้ปลั๊กอินทำงานได้ คุณต้องมีรูปภาพเพียงสองรูปสำหรับแต่ละผลิตภัณฑ์ (สีทั้งหมดจะถูกใช้เป็นมาสก์) ปลั๊กอินใช้งานได้กับเบราว์เซอร์หลักๆ ทั้งหมด รวมถึง IE7+ (จะใช้งานได้ใน IE6 ด้วย หากคุณแก้ไขการแสดงภาพโปร่งใส PNG) โครงการบน GitHub
15. แผนภูมิภาพเคลื่อนไหว CSS3
เมื่อคุณคลิกที่รูปภาพ รูปภาพจะมืดลงและเข้าสู่พื้นหลัง และรายการที่มีคำบรรยายจะปรากฏขึ้น ด้วยวิธีนี้คุณสามารถให้ได้ คำอธิบายสั้นองค์ประกอบที่อยู่ในภาพ
17. การนำทางหน้าเป็นเมนูแบบเลื่อนลง
โซลูชันสำหรับการนำการนำทางเอกสารที่สะดวกในรูปแบบของเมนูแบบเลื่อนลง เนื้อหาได้รับการแก้ไขที่ด้านบนของหน้าจอและยังคงอยู่ในขอบเขตการมองเห็นของผู้ดูเสมอ เมื่อคุณเลือกส่วนในเมนู หน้าจะเลื่อนไปยังส่วนที่เลือกของเอกสารได้อย่างราบรื่น
18. แกลเลอรี CSS3 พร้อมเอฟเฟกต์โฮเวอร์
เมื่อคุณวางเคอร์เซอร์ไว้เหนือรูปภาพ รูปภาพจะเปลี่ยนไปอย่างรวดเร็ว แกลเลอรีมีการใช้งานในสองเวอร์ชัน: พร้อมคำอธิบายรูปภาพที่ปรากฏหลังจากที่ผู้เยี่ยมชมเลื่อนเคอร์เซอร์ออกจากแกลเลอรี และไม่มีคำอธิบาย
19. ตัวเลื่อน jQuery พร้อมเอฟเฟกต์ Parallax
คลิกที่ลูกศรที่ด้านล่างของหน้าจอในหน้าสาธิตเพื่อดูไอคอนป๊อปอัป
22. แกลเลอรี่ภาพ HTML5 ฟรี “Juicebox Lite”
แกลเลอรีรูปภาพใหม่ที่ใช้งานได้จริงสำหรับไซต์ แกลเลอรีอาจมีหรือไม่มีรูปขนาดย่อ มีหรือไม่มีคำอธิบายรูปภาพ สามารถขยายให้เต็มหน้าจอ หรือแสดงบนหน้าที่มีขนาดคงที่ได้ ในหน้าสาธิต คุณสามารถเลือกมุมมองแกลเลอรีที่คุณต้องการได้ แกลเลอรีเวอร์ชันฟรีพร้อมให้ดาวน์โหลดแล้ว คุณจะต้องจ่ายเงินสำหรับฟังก์ชันการทำงานขั้นสูงเพิ่มเติมและต้องลบโลโก้ของนักพัฒนาซอฟต์แวร์
23. ปลั๊กอิน “JQVMap”
ขนาดแกลเลอรี รูปภาพ และภาพขนาดย่อที่ตอบสนองจะเปลี่ยนไปตามขนาดของหน้าต่างเบราว์เซอร์
26. ปลั๊กอินตัวเลื่อนเนื้อหา jQuery “Horinaja”
ปลั๊กอินนี้ติดตั้งง่าย ปรับแต่งได้ และเข้ากันได้กับเบราว์เซอร์ต่างๆ เนื้อหา HTML ใดๆ ไม่ใช่แค่รูปภาพ สามารถทำหน้าที่เป็นสไลด์ได้ คุณสามารถเลื่อนสไลด์โดยใช้ล้อเลื่อนของเมาส์ในขณะที่เคอร์เซอร์อยู่บนพื้นที่สไลด์
27. ปลั๊กอินตัวเลื่อน jQuery “Pikachoose”
ในสามรูปแบบ: การใช้งานการเปลี่ยนแปลงรูปภาพอย่างง่าย ๆ โดยไม่มีคำอธิบายและภาพขนาดย่อ แถบเลื่อนพร้อมคำบรรยายภาพและภาพขนาดย่อ แถบเลื่อนพร้อมภาพขนาดย่อและเพิ่มการเปิดภาพขนาดใหญ่ในหน้าต่างป๊อปอัปพร้อมเอฟเฟกต์ FancyBox เวอร์ชันล่าสุดสามารถพบได้บน Github
28. สไตล์ CSS แบบกำหนดเองหลายแบบสำหรับรายการแบบเลื่อนลง
ห้าสไตล์รายการแบบเลื่อนลงที่แตกต่างกันโดยใช้เทคนิค CSS ที่แตกต่างกัน
29. เมนูร้านอาหารพร้อมเอฟเฟกต์ 3 มิติแบบเคลื่อนไหว
การนำเสนอข้อมูล CSS jQuery ที่น่าสนใจบนหน้า เมื่อคลิกที่ลิงก์ หนังสือเมนูจะเปิดขึ้น และผู้เยี่ยมชมสามารถอ่านเพิ่มเติมเกี่ยวกับอาหารที่จัดให้ได้ในหน้าต่างป๊อปอัป ภาพเคลื่อนไหวแสดงไม่ถูกต้องใน IE
30. ปลั๊กอิน “Elastislide”
จำหน่ายยาง ม้าหมุนแบบปรับได้(ภาพหมุนแนวตั้งและแนวนอน) และแกลเลอรี่ภาพ การลดขนาดหน้าต่างเบราว์เซอร์จะลดจำนวนภาพให้เหลือค่าขั้นต่ำ จากนั้นจึงปรับขนาดของภาพที่เหลือ โครงการบน Github
31. ตัวเลื่อน CSS3 jQuery ใหม่ “Slit Slider”
ปลั๊กอินตัวเลื่อนแบบปรับได้ (สามารถตั้งค่าความกว้างเป็นเปอร์เซ็นต์และจะปรับขนาดอัตโนมัติ) ในสองสไตล์พร้อมเอฟเฟกต์ภาพเคลื่อนไหวที่น่าสนใจเมื่อเปลี่ยนสไลด์ (สไลด์ถูกตัดครึ่งหนึ่งและเคลื่อนที่ไปในทิศทางที่ต่างกันและมีรูปแบบใหม่เข้ามาแทนที่ ). สามารถนำทางโดยใช้แป้นพิมพ์ได้ เวอร์ชันล่าสุดอยู่บน Github เสมอ
32. รุ่นใหม่แถบเลื่อนภาพ 3 มิติ “Slicebox”
เวอร์ชันใหม่ที่มีการเปลี่ยนแปลงและเพิ่มคุณสมบัติใหม่: ขณะนี้แถบเลื่อน 3D สามารถปรับขนาดได้ คุณจะเห็นสิ่งนี้ได้เมื่อคุณลดขนาดหน้าต่างเบราว์เซอร์ เพิ่มการรองรับ Firefox; คุณสามารถใช้เนื้อหา HTML ในคำอธิบายสไลด์ได้แล้ว (ก่อนหน้านี้คำอธิบายถูกดึงมาจากแอตทริบิวต์ลิงก์โดยไม่มีความสามารถในการใช้แท็ก HTML ในนั้น) ในหน้าสาธิต คุณจะเห็น 4 ตัวเลือกสำหรับการใช้ปลั๊กอิน รุ่นล่าสุดอาศัยอยู่บน Github.com
เอฟเฟกต์จะคล้ายกับแกลเลอรี Flash 3D CU3ER มาก (สาธิต ดาวน์โหลด) มีเพียงแถบเลื่อน 3 มิตินี้เท่านั้นที่สร้างขึ้นโดยไม่ใช้เทคโนโลยีแฟลช แต่ใช้จาวาสคริปต์
33. ปลั๊กอิน jQuery “PFold”
วิธีแก้ปัญหาการทดลอง ปลั๊กอินใช้เอฟเฟกต์ 3 มิติเพื่อจำลองการกางโน้ต ตัวเลือกต่างๆการดำเนินการ: ด้วยสามสเปรด โดยมีสองสเปรด และสเปรดโดยมีศูนย์กลางของโน้ตที่กางออกตามมา
34. ปลั๊กอิน jQuery “ลมแรง”
ปลั๊กอินสำหรับการนำทางผ่านเนื้อหา เช่น รูปภาพ เมื่อคุณเลื่อนดูรูปภาพ รูปภาพเหล่านี้จะกระจายไปในทิศทางที่ต่างกัน (เอฟเฟกต์ค่อนข้างชวนให้นึกถึงการแจกไพ่) เกมการ์ดโป๊กเกอร์). ในการนำทาง คุณสามารถใช้ปุ่มซ้าย/ขวาหรือแถบเลื่อนได้ (ดูตัวเลือกต่างๆ ในหน้าสาธิต) โครงการบน