การสร้างแถบเลื่อนอย่างง่ายโดยใช้ jQuery ตัวอย่างของตัวเลื่อนรูปภาพ JQuery ฟรี UnoSlider – ตัวเลื่อนหน้าจอสัมผัสแบบปรับได้

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

ซอร์สโค้ดและการเชื่อมต่อแถบเลื่อนเข้ากับไซต์

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

ลักษณะสำคัญของแถบเลื่อน:

• ปรับตัว;
• น้ำหนักเบา (ไม่มี jQuery);
• ง่าย (พร้อมชุดฟังก์ชันขั้นต่ำ);
• การมีกลไกในการเปลี่ยนสไลด์โดยอัตโนมัติในช่วงเวลาหนึ่ง
• สากล (ใช้สำหรับข้อมูลข้อความ รูปภาพ บทวิจารณ์ สินค้า ฯลฯ)

การเชื่อมต่อตัวเลื่อนเข้ากับเพจทำได้โดยทำตามขั้นตอนต่อไปนี้:

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

การสาธิตตัวเลื่อนอยู่ในหน้านี้

การเริ่มต้นและการตั้งค่าแถบเลื่อน

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

// การเริ่มต้นองค์ประกอบ .slider เป็นสไลด์โชว์แบบหมุน (".slider");

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

// เริ่มต้น element.slider เป็นแบบหมุนและกำหนดค่าโดยใช้พารามิเตอร์เพิ่มเติม slideShow(".slider", ( isAutoplay: false, // false (โดยค่าเริ่มต้น) หรือ true ทิศทางอัตโนมัติ: "next", // "next" (โดย default) หรือ "prev" DelayAutoplay: 5000, // 5000 (ค่าเริ่มต้น) หรือหมายเลขอื่นๆ isPauseOnHover: true // true (ค่าเริ่มต้น) หรือ false ));

การมอบหมายที่สำคัญ:

• isAutoplay – กำหนดว่าจำเป็นต้องเริ่มต้นแถบเลื่อนด้วยการเปลี่ยนแปลงองค์ประกอบโดยอัตโนมัติหรือไม่ (โดยค่าเริ่มต้น คีย์นี้เป็นเท็จ)
• ทิศทางเล่นอัตโนมัติ – กำหนดทิศทางสำหรับกลไกการเปลี่ยนสไลด์อัตโนมัติ (ค่าเริ่มต้น "ถัดไป"); เพื่อเปลี่ยนทิศทางชุด "ก่อนหน้า";
• DelayAutoplay – หน่วงเวลาเป็นมิลลิวินาทีก่อนกระบวนการเปลี่ยนสไลด์หนึ่งไปยังอีกสไลด์หนึ่งโดยอัตโนมัติ (ค่าเริ่มต้น 5,000 ms)
• isPauseOnHover - กำหนดว่าจำเป็นต้องหยุดการเปลี่ยนสไลด์อัตโนมัติหรือไม่เมื่อเคอร์เซอร์อยู่ในพื้นที่แถบเลื่อน (จริงตามค่าเริ่มต้น)

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

// เริ่มต้นองค์ประกอบ .slider เป็นแบบหมุนและกำหนดค่าโดยใช้พารามิเตอร์เพิ่มเติม slideShow(".slider", ( isAutoplay: true ));

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

// การเริ่มต้นองค์ประกอบ .slider เป็นภาพหมุนและปรับแต่งโดยใช้พารามิเตอร์เพิ่มเติม var sliderOne = slideShow(".slider");

หลังจากนั้นคุณสามารถใช้วิธีการของเขาได้ ตัวอย่างเช่น หากต้องการย้ายไปยังสไลด์ถัดไปโดยทางโปรแกรม คุณเพียงแค่ต้องเรียกใช้เมธอด show:

// เลื่อนไปที่สไลด์ถัดไป SliderOne.next();

รายการวิธีการเลื่อน:

• หยุด – หยุดการเปลี่ยนสไลด์อัตโนมัติ
• ถัดไป – เลื่อนไปยังสไลด์ถัดไป
• ก่อนหน้า – เลื่อนไปยังสไลด์ก่อนหน้า
• วงจร - เปิดใช้งานการเปลี่ยนสไลด์อัตโนมัติ

ตัวอย่างการใช้แถบเลื่อนเพื่อหมุนข้อมูลต่างๆ

การใช้แถบเลื่อนเพื่อหมุนภาพ:

การใช้แถบเลื่อนเพื่อหมุนข้อมูลข้อความ:

ตัวอย่างการใช้แถบเลื่อนเพื่อแสดงบทวิจารณ์:

การใช้แถบเลื่อนเพื่อหมุนผลิตภัณฑ์:

คำอธิบายของซอร์สโค้ดของแถบเลื่อนและวิธีการทำงาน

ซอร์สโค้ดของแถบเลื่อนประกอบด้วย:

• รหัสเอชทีเอ็ม;
• รหัส CSS (สไตล์);
• รหัสจาวาสคริปต์ (สคริปต์)

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

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

wrapper สำหรับ slides.slider__wrapper มี element.slider__items และในทางกลับกัน ก็จะมี element.slider__item การออกแบบนี้จะช่วยให้สามารถวางตัวบ่งชี้และการควบคุมทั้งภายในและภายนอกสไลด์ได้ หากจำเป็น

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

บล็อกที่มี indicators.slider__indicators ได้รับการออกแบบเป็นรายการลำดับเลข ประกอบด้วยองค์ประกอบ li พร้อมแอตทริบิวต์ data-slide-to จำนวนรายการในรายการจะพิจารณาจากจำนวนสไลด์ คุณลักษณะนี้ใช้เพื่อกำหนดดัชนีของสไลด์ที่จะไปเมื่อคลิกที่ตัวบ่งชี้นี้ ในแถบเลื่อน ตัวบ่งชี้ที่ใช้งานอยู่จะถูกทำเครื่องหมายโดยการเพิ่มคลาสที่ใช้งานอยู่

ปุ่มย้อนกลับและไปข้างหน้าถูกทำเครื่องหมายด้วยองค์ประกอบ ปุ่มเพื่อไปยังสไลด์ก่อนหน้ามีคลาส Slider__control และ Slider__control_prev และปุ่มสำหรับไปที่สไลด์ถัดไปมีคลาส Slider__control และ Slider__control_next

รูปแบบตัวเลื่อน:

/* ลักษณะสำหรับคอนเทนเนอร์ตัวเลื่อนหลัก */ .slider ( ตำแหน่ง: สัมพันธ์; ล้น: ซ่อน; ความกว้างสูงสุด: 600px; ระยะขอบซ้าย: อัตโนมัติ; ระยะขอบขวา: อัตโนมัติ; ) /* ลักษณะของกระดาษห่อหุ้มที่ล้อมรอบสไลด์ */ .slider__wrapper ( ตำแหน่ง: สัมพันธ์; ล้น: ซ่อน; ) /* สไตล์สำหรับคอนเทนเนอร์สไลด์ */ .slider__items ( จอแสดงผล: flex; การเปลี่ยนแปลง: แปลง 0.7s ง่าย; ) /* สไตล์สำหรับสไลด์ */ .slider__item ( ดิ้น : 0 0 100 %; ความกว้างสูงสุด: 100%; ) /* รูปแบบสำหรับปุ่มไปข้างหน้าและย้อนกลับ */ .slider__control ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; จอแสดงผล: ไม่มี; จัดเรียงรายการ: กึ่งกลาง; ปรับเนื้อหา : center; width: 40px; text-align: opacity: 0.5; ; โครงร่าง: 0; ความทึบ: 0.9; ) .slider__control_prev ( ซ้าย: 0; ) .slider__control_next ( ขวา: 0 ; ) .slider__control::before ( เนื้อหา: ""; จอแสดงผล: อินไลน์บล็อก; ความกว้าง: 20px; ความสูง: 20px; พื้นหลัง: กึ่งกลางโปร่งใสไม่ทำซ้ำ; ขนาดพื้นหลัง: 100% 100%; ) .slider__control_prev::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_next::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 "); ) /* รูปแบบสำหรับตัวบ่งชี้ */ .slider__indicators ( ตำแหน่ง: สัมบูรณ์; ขวา: 0; ด้านล่าง: 10px; ซ้าย: 0; ดัชนี z: 15; จอแสดงผล: ดิ้น; ปรับเนื้อหา: กึ่งกลาง; ช่องว่างภายในด้านซ้าย: 0; ขอบขวา: 15%; รายการสไตล์: ไม่มี; ขอบล่าง: 0; .slider__indicators li (ขนาดกล่อง: เนื้อหา-กล่อง; ดิ้น: 0 1 อัตโนมัติ; ความสูง: 4px; ขอบซ้าย: 3px; พื้นหลัง -เคอร์เซอร์: rgba (255, 255, 0.5); - คลิป: ช่องว่างภายใน; ขอบด้านบน: โปร่งใสทึบ 10px; ขอบล่าง: โปร่งใสทึบ 10px; ) .slider__indicators li.active ( สีพื้นหลัง: #fff; )

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

Slider__wrapper ( ล้น: ซ่อนไว้; )

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

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

Slider__items ( การเปลี่ยนแปลง: แปลงความง่าย 0.7 วินาที; )

ลอจิกของแถบเลื่อน:

"ใช้อย่างเข้มงวด"; var slideShow = (function () ( return function (selector, config) ( var _slider = document.querySelector(selector), // main block element _sliderContainer = _slider.querySelector(".slider__items"), // คอนเทนเนอร์ for.slider- item _sliderItems = _slider.querySelectorAll(".slider__item"), // collection.slider-item _sliderControls = _slider.querySelectorAll(".slider__control"), // ควบคุม _currentPosition = 0, // ตำแหน่งขององค์ประกอบที่ใช้งานอยู่ด้านซ้าย _transformValue = 0 , // การเปลี่ยนแปลง value.slider_wrapper _transformStep = 100, // ขนาดขั้นตอน (สำหรับการแปลง) _itemsArray = , // อาร์เรย์ขององค์ประกอบ _timerId, _indicatorItems, _indicatorIndex = 0, _indicatorIndexMax = _sliderItems.length - 1, _stepTouch = 50, _config = ( : false, // ทิศทางการเปลี่ยนสไลด์อัตโนมัติเล่นอัตโนมัติ: "ถัดไป", // ทิศทางการเปลี่ยนสไลด์ล่าช้าเล่นอัตโนมัติ: 5000, // ช่วงเวลาระหว่างการเปลี่ยนสไลด์อัตโนมัติ isPauseOnHover: จริง // ไม่ว่าจะหยุดชั่วคราวเมื่อเลื่อนเคอร์เซอร์ไปที่แถบเลื่อน ); // การตั้งค่าการกำหนดค่าตัวเลื่อนขึ้นอยู่กับคีย์ที่ได้รับสำหรับ (คีย์ var ใน config) ( ถ้า (คีย์ใน _config) ( _config = config; ) ) // กรอกอาร์เรย์ _itemsArray สำหรับ (var i = 0, length = _sliderItems. ความยาว;< length; i++) { _itemsArray.push({ item: _sliderItems[i], position: i, transform: 0 }); } // переменная position содержит методы с помощью которой можно получить минимальный и максимальный индекс элемента, а также соответствующему этому индексу позицию var position = { getItemIndex: function (mode) { var index = 0; for (var i = 0, length = _itemsArray.length; i < length; i++) { if ((_itemsArray[i].position < _itemsArray.position && mode === "min") || (_itemsArray[i].position >_itemsArray.position && mode === "สูงสุด")) ( ดัชนี = i; ) ) ส่งคืนดัชนี; ), getItemPosition: ฟังก์ชั่น (โหมด) ( return _itemsArray.position; ) ); // ฟังก์ชั่นที่เปลี่ยนสไลด์ในทิศทางที่ระบุ var _move = function (ทิศทาง) ( var nextItem, currentIndicator = _indicatorIndex;; if (direction === "next") ( _currentPosition++; if (_currentPosition >position.getItemPosition("max " )) ( nextItem = position.getItemIndex("min"); _itemsArray.position =position.getItemPosition("max") + 1; _itemsArray.transform += _itemsArray.length * 100; _itemsArray.item.style.transform = " TranslateX (" + _itemsArray.transform + "%)"; ) _transformValue -= _transformStep; _indicatorIndex = _indicatorIndex + 1; if (_indicatorIndex > _indicatorIndexMax) ( _indicatorIndex = 0; ) ) else ( _currentPosition--; ถ้า (_currentPosition< position.getItemPosition("min")) { nextItem = position.getItemIndex("max"); _itemsArray.position = position.getItemPosition("min") - 1; _itemsArray.transform -= _itemsArray.length * 100; _itemsArray.item.style.transform = "translateX(" + _itemsArray.transform + "%)"; } _transformValue += _transformStep; _indicatorIndex = _indicatorIndex - 1; if (_indicatorIndex < 0) { _indicatorIndex = _indicatorIndexMax; } } _sliderContainer.style.transform = "translateX(" + _transformValue + "%)"; _indicatorItems.classList.remove("active"); _indicatorItems[_indicatorIndex].classList.add("active"); }; // функция, осуществляющая переход к слайду по его порядковому номеру var _moveTo = function (index) { var i = 0, direction = (index >_indicatorIndex) ? "ถัดไป" : "ก่อนหน้า"; ในขณะที่ (ดัชนี !== _indicatorIndex && i<= _indicatorIndexMax) { _move(direction); i++; } }; // функция для запуска автоматической смены слайдов через промежутки времени var _startAutoplay = function () { if (!_config.isAutoplay) { return; } _stopAutoplay(); _timerId = setInterval(function () { _move(_config.directionAutoplay); }, _config.delayAutoplay); }; // функция, отключающая автоматическую смену слайдов var _stopAutoplay = function () { clearInterval(_timerId); }; // функция, добавляющая индикаторы к слайдеру var _addIndicators = function () { var indicatorsContainer = document.createElement("ol"); indicatorsContainer.classList.add("slider__indicators"); for (var i = 0, length = _sliderItems.length; i < length; i++) { var sliderIndicatorsItem = document.createElement("li"); if (i === 0) { sliderIndicatorsItem.classList.add("active"); } sliderIndicatorsItem.setAttribute("data-slide-to", i); indicatorsContainer.appendChild(sliderIndicatorsItem); } _slider.appendChild(indicatorsContainer); _indicatorItems = _slider.querySelectorAll(".slider__indicators >li") ); var _isTouchDevice = function () ( return !!("ontouchstart" ในหน้าต่าง || navigator.maxTouchPoints); ); // ฟังก์ชั่นที่ติดตั้งตัวจัดการเหตุการณ์ var _setUpListeners = function () ( var _startX = 0 ; if (_isTouchDevice()) ( _slider.addEventListener("touchstart", ฟังก์ชั่น (e) ( _startX = e.changedTouches.clientX; _startAutoplay(); )); _slider.addEventListener("touchend", ฟังก์ชั่น (e) ( var _endX = e.changedTouches.clientX, _deltaX = _endX - _startX; if (_deltaX > _stepTouch) ( _move("prev"); ) อื่น ๆ ถ้า (_deltaX< -_stepTouch) { _move("next"); } _startAutoplay(); }); } else { for (var i = 0, length = _sliderControls.length; i < length; i++) { _sliderControls[i].classList.add("slider__control_show"); } } _slider.addEventListener("click", function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); _move(e.target.classList.contains("slider__control_next") ? "next" : "prev"); _startAutoplay(); } else if (e.target.getAttribute("data-slide-to")) { e.preventDefault(); _moveTo(parseInt(e.target.getAttribute("data-slide-to"))); _startAutoplay(); } }); document.addEventListener("visibilitychange", function () { if (document.visibilityState === "hidden") { _stopAutoplay(); } else { _startAutoplay(); } }, false); if (_config.isPauseOnHover && _config.isAutoplay) { _slider.addEventListener("mouseenter", function () { _stopAutoplay(); }); _slider.addEventListener("mouseleave", function () { _startAutoplay(); }); } }; // добавляем индикаторы к слайдеру _addIndicators(); // установливаем обработчики для событий _setUpListeners(); // запускаем автоматическую смену слайдов, если установлен соответствующий ключ _startAutoplay(); return { // метод слайдера для перехода к следующему слайду next: function () { _move("next"); }, // метод слайдера для перехода к предыдущему слайду left: function () { _move("prev"); }, // метод отключающий автоматическую смену слайдов stop: function () { _config.isAutoplay = false; _stopAutoplay(); }, // метод запускающий автоматическую смену слайдов cycle: function () { _config.isAutoplay = true; _startAutoplay(); } } } }()); slideShow(".slider", { isAutoplay: true });

โค้ดตัวเลื่อนเขียนด้วย JavaScript "บริสุทธิ์" โดยไม่ต้องใช้ไลบรารี jQuery รหัสโปรแกรมมีโครงสร้างและจัดระเบียบในรูปแบบของ "โมดูล"

ฟังก์ชั่นหลักที่ดำเนินการตรรกะทั้งหมดที่ใช้ในโมดูลสไลด์โชว์คือ:

• _startAutoplay – ฟังก์ชั่นสำหรับเริ่มการเปลี่ยนแปลงสไลด์อัตโนมัติในช่วงเวลาที่กำหนดโดยพารามิเตอร์ DelayAutoplay (ค่าเริ่มต้น 5 วินาที)
• _stopAutoplay – ฟังก์ชั่นที่ปิดใช้งานการเปลี่ยนสไลด์อัตโนมัติ
• _move – ฟังก์ชั่นที่เปลี่ยนสไลด์ในทิศทางที่กำหนด
• _slideTo – ฟังก์ชันที่นำทางไปยังสไลด์ตามหมายเลขซีเรียล ใช้ในการประมวลผลเหตุการณ์ “คลิก” บนตัวบ่งชี้
• _addIndicators – ฟังก์ชั่นที่เพิ่มตัวบ่งชี้ให้กับแถบเลื่อน
• _setupListener – ฟังก์ชั่นที่ติดตั้งตัวจัดการเหตุการณ์สำหรับแถบเลื่อน

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

ในวันนี้ฉันขอเสนอให้คุณเลือก แถบเลื่อนที่สร้างสรรค์และมีคุณภาพสูงในการออกแบบเว็บไซต์.

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

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

โดยทั่วไปเรามาดูตัวเลือกสไลเดอร์สมัยใหม่ที่ไม่อาจผ่านไปได้ สนุก :)

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

สนทนา

ไซต์ที่น่าสนใจมากพร้อมแถบเลื่อนที่ออกแบบอย่างสร้างสรรค์มากมาย

อืม อังเดร

สี่เว็บไซต์ที่สวยงามและน่าดึงดูดใจที่เปลี่ยนแปลงโดยอัตโนมัติ

มาร์ค ดีไซน์

เมื่อมองดูแถบเลื่อนนี้ คุณจะดูเหมือนอยู่หน้าแล็ปท็อป

บอร์ดัม

ไซต์สุดเจ๋งพร้อมการออกแบบที่เรียบง่ายและแถบเลื่อนที่เจ๋งมาก

แอพ Tea Round

แหล่งข้อมูลสร้างสรรค์พร้อมแถบเลื่อนที่น่าสนใจในโทรศัพท์ของคุณ

สิ่งเหล่านี้คือสิ่งต่างๆ

ไซต์สุดเจ๋งพร้อมแถบเลื่อนขนาดใหญ่และสร้างสรรค์

สตูดิโอ เอ็กซ์แอล

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

ธีมฟิวส์

ไซต์ที่ยอดเยี่ยมพร้อมแถบเลื่อนขนาดใหญ่พร้อมเอฟเฟกต์การเลื่อนที่น่าสนใจ

จอช สมิธ ดีไซน์

นี่คือเว็บไซต์หรือค่อนข้างเป็นแถบเลื่อน โดยทั่วไปแล้วทั้งไซต์จะเป็นตัวเลื่อน :)

การเดินทางยูทาห์

แถบเลื่อนสุดเจ๋งที่ดูเหมือนกองภาพถ่าย

เยี่ยมชมฟิลลี

แถบเลื่อนรูปภาพขนาดใหญ่สุดเจ๋งที่สะดุดตามาก

ทราเวลบัซ

ห้าคลาสสิกที่แตกต่างกันและสไลด์ของสถานที่ที่สวยงามที่สุดในโลก คลิกที่ภาพขนาดย่อเพื่อดูภาพขนาดใหญ่

Wearesignals

ไซต์มืดพร้อมแถบเลื่อนที่เรียบง่ายแต่สร้างสรรค์มาก

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

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

การใช้ 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 และเดสก์ท็อปโดยไม่มีปัญหาความเข้ากันได้ เทมเพลตแบบหมุนที่น่าทึ่งในตัวช่วยให้คุณใช้แถบเลื่อนในโหมดแนวตั้ง แนวนอน และวงกลมได้

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

1. สไลด์โชว์ jQuery ที่ยอดเยี่ยม

สไลด์โชว์ขนาดใหญ่ที่น่าทึ่งโดยใช้เทคโนโลยี jQuery

2. ปลั๊กอิน jQuery “Scale Carousel”

สไลด์โชว์ที่ปรับขนาดได้โดยใช้ jQuery คุณสามารถกำหนดขนาดสไลด์โชว์ที่เหมาะกับคุณที่สุดได้

3. ปลั๊กอิน jQuery “slideJS”

แถบเลื่อนรูปภาพพร้อมคำอธิบายข้อความ

4. ปลั๊กอิน “JSliderNews”

5. แถบเลื่อน CSS3 jQuery

เมื่อคุณโฮเวอร์เหนือลูกศรนำทาง รูปขนาดย่อแบบวงกลมของสไลด์ถัดไปจะปรากฏขึ้น

6. แถบเลื่อน jQuery “Presentation Cycle” ที่ดี

แถบเลื่อน jQuery พร้อมตัวบ่งชี้การโหลดรูปภาพ มีการเปลี่ยนสไลด์อัตโนมัติ

7. ปลั๊กอิน jQuery “ตัวเลื่อน Parallax”

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

8. ตัวเลื่อน jQuery ที่สดใหม่และมีน้ำหนักเบา “bxSlider 3.0”

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

9. ตัวเลื่อนรูปภาพ jQuery, ปลั๊กอิน “slideJS”

แถบเลื่อน jQuery ที่มีสไตล์สามารถตกแต่งโครงการของคุณได้อย่างแน่นอน

10. ปลั๊กอินสไลด์โชว์ jQuery “Easy Slides” v1.1

ปลั๊กอิน jQuery ที่ใช้งานง่ายสำหรับการสร้างสไลด์โชว์

11. ปลั๊กอิน jQuery Slidy

ปลั๊กอิน jQuery น้ำหนักเบาในเวอร์ชันต่างๆ มีการเปลี่ยนสไลด์อัตโนมัติ

12. แกลเลอรี jQuery CSS พร้อมการเปลี่ยนสไลด์อัตโนมัติ

หากผู้เข้าชมไม่คลิกที่ลูกศร "ไปข้างหน้า" หรือ "ย้อนกลับ" ภายในเวลาที่กำหนด แกลเลอรีจะเริ่มเลื่อนโดยอัตโนมัติ

13. แถบเลื่อน jQuery “Nivo Slider”

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

14. แถบเลื่อน jQuery “MobilySlider”

สไลเดอร์สด. แถบเลื่อน jQuery พร้อมเอฟเฟกต์การเปลี่ยนรูปภาพต่างๆ

15. ปลั๊กอิน jQuery “Slider²”

สไลเดอร์น้ำหนักเบาพร้อมตัวเปลี่ยนสไลด์อัตโนมัติ

16. ตัวเลื่อนจาวาสคริปต์สด

แถบเลื่อนพร้อมการเปลี่ยนภาพอัตโนมัติ

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

ตัวเลื่อนรูปภาพ jQuery CSS โดยใช้ปลั๊กอิน NivoSlider

19. แถบเลื่อน jQuery “jShowOff”

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

20. ปลั๊กอินผลงานชัตเตอร์เอฟเฟกต์

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

21. ตัวเลื่อน CSS จาวาสคริปต์น้ำหนักเบา “TinySlider 2”

การใช้งานแถบเลื่อนรูปภาพโดยใช้ javascript และ CSS

22. สไลเดอร์สุดเจ๋ง “Tinycircleslider”

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

23. ตัวเลื่อนรูปภาพด้วย jQuery

สไลเดอร์น้ำหนักเบา “Slider Kit”. แถบเลื่อนมีให้เลือกหลายแบบทั้งแนวตั้งและแนวนอน มีการนำการนำทางประเภทต่าง ๆ ระหว่างรูปภาพไปใช้: ใช้ปุ่ม "ไปข้างหน้า" และ "ย้อนกลับ" โดยใช้ล้อเลื่อนของเมาส์โดยใช้การคลิกเมาส์บนสไลด์

24. แกลเลอรีพร้อมภาพจำลอง “Slider Kit”

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

25. ตัวเลื่อนเนื้อหา jQuery “Slider Kit”

แถบเลื่อนเนื้อหาแนวตั้งและแนวนอนโดยใช้ jQuery

26. สไลด์โชว์ jQuery “ชุดตัวเลื่อน”

สไลด์โชว์พร้อมการเปลี่ยนสไลด์อัตโนมัติ

27. ตัวเลื่อน CSS3 จาวาสคริปต์ระดับมืออาชีพน้ำหนักเบา

แถบเลื่อน jQuery และ CSS3 ที่เรียบร้อยสร้างขึ้นในปี 2011

สไลด์โชว์ jQuery พร้อมภาพขนาดย่อ

29. สไลด์โชว์ jQuery อย่างง่าย

สไลด์โชว์พร้อมปุ่มนำทาง

30. สไลด์โชว์ jQuery “Skitter” ที่ยอดเยี่ยม

ปลั๊กอิน jQuery Skitter สำหรับสร้างสไลด์โชว์ที่น่าทึ่ง ปลั๊กอินรองรับเอฟเฟกต์ภาพเคลื่อนไหวที่แตกต่างกัน 22 (!) ประเภทเมื่อเปลี่ยนรูปภาพ สามารถทำงานร่วมกับตัวเลือกการนำทางสไลด์ได้สองแบบ: การใช้หมายเลขสไลด์และการใช้ภาพขนาดย่อ อย่าลืมชมการสาธิตซึ่งเป็นการค้นหาคุณภาพสูงมาก เทคโนโลยีที่ใช้: CSS, HTML, jQuery, PHP

31. สไลด์โชว์ “อึดอัด”

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

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

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

34. แถบเลื่อน “Flux Slider” โดยใช้ jQuery และ CSS3

ตัวเลื่อน jQuery ใหม่ เอฟเฟกต์ภาพเคลื่อนไหวสุดเจ๋งมากมายเมื่อเปลี่ยนสไลด์

35. ปลั๊กอิน jQuery “jSwitch”

แกลเลอรี่ jQuery เคลื่อนไหว

สไลด์โชว์ jQuery ง่าย ๆ พร้อมการเปลี่ยนสไลด์อัตโนมัติ

37. ปลั๊กอินเวอร์ชันใหม่ “SlideDeck 1.2.2”

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

38. แถบเลื่อน jQuery “Sudo Slider”

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

39. สไลด์โชว์ jQuery CSS3

สไลด์โชว์พร้อมรูปขนาดย่อรองรับโหมดเปลี่ยนสไลด์อัตโนมัติ

40. ตัวเลื่อน jQuery “Flux Slider”

สไลเดอร์พร้อมเอฟเฟกต์การเปลี่ยนภาพมากมาย

41. ตัวเลื่อน jQuery อย่างง่าย

แถบเลื่อนรูปภาพที่มีสไตล์โดยใช้ jQuery

ในความคิดเห็นในโพสต์พวกเขาเพิ่งถามว่ามีบริการออนไลน์สำหรับการสร้างหรือไม่ โดยหลักการแล้ว หากโครงการของคุณทำงานบน CMS ยอดนิยม (WordPress, Drupal) ก็ควรมีปลั๊กอินที่เหมาะสมอยู่ที่นั่น แต่จะทำอย่างไรเมื่อไซต์เขียนด้วย HTML หรือไม่มีโมดูลที่เหมาะสม? วันนี้ฉันจะบอกคุณเกี่ยวกับตัวเลือกบางอย่างในการแก้ปัญหานี้

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

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

คอมไซเดอร์

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

ซินโคปา

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

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

HTML5Maker

HTML5Maker เป็นอีกตัวอย่างหนึ่งของบริการแบบชำระเงินที่ทำงานแบบสมัครสมาชิก ในเวอร์ชันฟรีคุณจะต้องทนกับลายน้ำ แต่ภาษีเริ่มต้นช่วยให้คุณสามารถกำจัดมันได้ ในขณะเดียวกันก็มีราคาที่ไม่แพง ($5/เดือน) และให้คุณสร้างแถบเลื่อนได้มากถึง 3 ตัวพร้อมเอฟเฟกต์ทั้งหมดและเทมเพลตมากมาย

ลื่น

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

เหิน

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

ทอสรัส

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

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

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

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

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

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

— สคริปต์ตัวเลื่อน jQuery ที่เรียบง่าย ใช้งานได้จริงและปรับแต่งได้ใน HTML5 และ CSS3 โซลูชันนี้เข้ากันได้กับเบราว์เซอร์ทั้งหมดและรองรับการออกแบบที่ตอบสนอง นักพัฒนาจะรักมัน

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

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

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

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

CU3OX

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

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

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