ตัวเลื่อน Vlasny บน jQuery ตัวเลื่อน jQuery แบบสัมผัสที่ปรับเปลี่ยนได้ง่าย ตัวเลื่อนที่สวยงามบน jquery

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

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

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

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

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

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

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

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

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

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

แถบเลื่อน chiefSlider ถูกสร้างขึ้นโดยใช้โค้ด HTML, CSS และ JavaScript (ไม่มี jQuery)

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

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

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

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

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

/* MAIN STYLES */ .slider ( ตำแหน่ง: สัมพันธ์; ล้น: ซ่อน; ) .slider__wrapper ( แสดง: flex; 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:focus ( การตกแต่งข้อความ: ไม่มี; โครงร่าง: 0; ความทึบ: .9; /* ความคมชัด */ ) .slider__control_left ( ซ้าย: 0; ) .slider__control_right ( ขวา : 0 ; ) .slider__control::before ( content: " "; display: inline-block; width: 20px; /* icon (arrow) width */ height: 20px; /* icon (arrow) height */ พื้นหลัง: โปร่งใส ไม่- ศูนย์กลางศูนย์ซ้ำ ขนาดพื้นหลัง: 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 = (function () ( return function (selector) ( var _mainElement = document.querySelector(selector), // องค์ประกอบหลักของบล็อก _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper for.slider- item_s = _mainElement.querySelectorAll(".slider__item"), // องค์ประกอบ (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // องค์ประกอบ _sliderControlLeft = _mainElement.querySelector(".slider__ ปุ่ม "ซ้าย" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // ปุ่ม "RIGHT" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // wrap width _itemWid.dth), // ความกว้างของหนึ่งองค์ประกอบ _positionLeftItem = 0, // ตำแหน่งซ้าย องค์ประกอบที่ใช้งานอยู่ _transform = 0, // ค่าการแปลง ด้านบนของอาร์เรย์ _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, Transformer: 0 ))); )); ตำแหน่ง var = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (ทิศทาง) ( if (ทิศทาง === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) ).getMax) ( กลับ; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) ถ้า (_sliderControlRight.classList.contains("slider__control _wrapperWidth / _itemWidth) >=position.getMax) ( _sliderCon trolRight .classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (ทิศทาง === "left") ( if (_ ; ) กลับ (element.contains(elemFromPoint(rect.left, rect. ด้านบน )) || element.contains(elemFromPoint (rect.right, rect.top)) || element.contains (elemFromPoint (rect.right, สี่เหลี่ยมผืนผ้าด้านล่าง)) || element.contains (elemFromPoint (rect.left, rect . ด้านล่าง)));

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

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

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

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

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

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

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

HiSlider - HTML5, ตัวเลื่อน Jquery และแกลเลอรีรูปภาพ ซึ่งเป็นปลั๊กอินฟรีสำหรับการแก้ไขพิเศษบนเว็บไซต์ที่จัดการโดยระบบยอดนิยม เช่น WordPress, Joomla, Drupal ด้วยความช่วยเหลือของเครื่องมือที่เรียบง่ายแต่ใช้งานได้จริงนี้ คุณสามารถสร้างสไลด์โชว์ที่น่าทึ่ง การนำเสนอที่มีประสิทธิภาพ และการประกาศข่าวใหม่บนหน้าเว็บไซต์ของคุณโดยไม่ต้องใช้ความพยายามมากนัก เทมเพลตและสกินสำเร็จรูปจำนวนหนึ่งสำหรับแถบเลื่อน เอฟเฟกต์การเปลี่ยนแปลงที่น่าสนใจ การแสดงเนื้อหามัลติมีเดียต่างๆ: วิดีโอจาก YouTube และ Vimeo เครื่องมือปรับแต่งสำหรับผู้ใช้ ฯลฯ

Nivo Slider เป็นโปรแกรมเก่าที่ดี เป็นที่รู้จักกันดีสำหรับทุกคนที่รู้จัก เป็นหนึ่งในโปรแกรมเลื่อนรูปภาพที่สวยงามและง่ายที่สุดในประวัติศาสตร์ ปลั๊กอิน JQuery Nivo Slider ไม่มีค่าใช้จ่ายสำหรับการใช้งานและการพัฒนาเพิ่มเติม ซึ่งขยายออกไปภายใต้ใบอนุญาต MIT นอกจากนี้ยังเป็นปลั๊กอินที่ยอดเยี่ยมสำหรับ WordPress แต่น่าเสียดายที่จ่ายให้และมีราคา 29 ดอลลาร์ต่อใบอนุญาตหนึ่งใบ สิ่งที่ดีที่สุดที่ควรทำคือใช้เวลาเพียงเล็กน้อยกับไฟล์ WP และแนบปลั๊กอิน Nivo Slider เวอร์ชัน jQuery ฟรีเข้ากับบล็อกของคุณ เพื่อให้คุณสามารถรับข้อมูลที่เพียงพอ
ในส่วนของฟังก์ชันการทำงาน ทุกอย่างเป็นไปตามลำดับ สำหรับงานดังกล่าว เราใช้ไลบรารี jQuery v1.7+ เอฟเฟกต์การเปลี่ยนแปลงที่ยอดเยี่ยม การปรับเปลี่ยนที่ง่ายและสะดวก รูปแบบที่ปรับเปลี่ยนได้ การครอบตัดรูปภาพอัตโนมัติ และอื่นๆ อีกมากมาย

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

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

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

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

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

ชื่อนี้อธิบายได้ในตัว มันอาจจะเป็นหนึ่งในแถบเลื่อนรูปภาพ jQuery ที่เบาที่สุดและเรียบง่ายที่สุดที่มีอยู่ (ปลั๊กอิน 1kb) ResponsiveSlides.js เป็นปลั๊กอิน JQuery ที่ยอดเยี่ยมที่สร้างสไลด์โชว์และองค์ประกอบป๊อปอัปที่อยู่ตรงกลางของคอนเทนเนอร์ ใช้งานได้กับเบราว์เซอร์ที่หลากหลาย รวมถึง IE ทุกรุ่น - งานกาล่าแห่งความก้าวหน้าอันโด่งดังใน IE6 และที่อื่นๆ โรบ็อตใช้การเปลี่ยน CSS3 ร่วมกับ JavaScript เพื่อให้แน่ใจ จัดเรียงรายการที่ไม่เรียงลำดับได้อย่างง่ายดาย ปรับการเปลี่ยนภาพและช่วงเวลา สลับสไลด์อัตโนมัติและด้วยตนเอง และรองรับการแสดงสไลด์หลายรายการพร้อมกัน เพลาเป็นเพลา "มายุค" ขี้โกง

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

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

FlexSlider 2 — เวอร์ชันอัปเดตของแถบเลื่อนชื่อเดียว พร้อมความเร็วในการตอบสนองที่เพิ่มขึ้น การแก้ไขสคริปต์ และลดการจัดเรียง/เขียนใหม่ให้เหลือน้อยที่สุด ปลั๊กอินประกอบด้วยแถบเลื่อนพื้นฐาน ตัวควบคุมสไลด์สำหรับภาพขนาดย่อเพิ่มเติม ลูกศรซ้าย-ขวา และแถบนำทางด้านล่างในลักษณะที่ปรากฏของปุ่ม ความเป็นไปได้ในการแสดงวิดีโอในสไลด์ (vimeo) การปรับแต่งพารามิเตอร์ที่ยืดหยุ่น (การเปลี่ยนภาพ การออกแบบ ช่วงเวลาชั่วโมง) รูปแบบที่ปรับเปลี่ยนได้อย่างสมบูรณ์

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

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

แถบเลื่อน jQuery ขนาดกะทัดรัดมากที่แสดงพร้อมกับองค์ประกอบไลท์บ็อกซ์ นายพลที่มีดอกกุหลาบที่ชั่วร้ายของพวกเขา มันแค่ต้องถูกบ่มในภาชนะ Be-Yaki เพียงอย่างเดียว Vygimyi Miniatur พร้อมคำสาปของ Mishka, Lightbox ZI Zy Zbilish พร้อมองค์ประกอบของ Olye ง่ายต่อการวางแถบเลื่อนดังกล่าวบนแผงอื่นเพื่อนำเสนอผลิตภัณฑ์และประกาศผลิตภัณฑ์ใหม่ โซลูชั่นที่ยอดเยี่ยมสำหรับไซต์ที่มีข้อมูลจำนวนมาก

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

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

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

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

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

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

ด้วยความเคารพ อังเดร

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

ดูแถบเลื่อน jQuery 20 ตัวบน Envato Market แล้วคุณจะเห็นว่ามีแถบเลื่อนที่เป็นมากกว่าบล็อกรูปภาพที่เปลี่ยนแปลงได้อย่างราบรื่น

แถบเลื่อนที่ปรับเปลี่ยนได้ง่ายและเป็นมิตรกับหน้าจอสัมผัส มีความหมายมากกว่าเดิมมาก RoyalSlider มีฟีเจอร์ที่น่าตื่นเต้น: ความสามารถในการปรับตัวและการใช้งานด้วยหน้าจอสัมผัส ทางเลือกที่ดี เนื่องจากแกลเลอรีเขียนด้วย HTML5 และ CSS3

รายการฟังก์ชั่น:

จาวาสคริปต์ เริ่มต้นอย่างรวดเร็ว

การเพิ่มประสิทธิภาพ SEO

การปรับตัวในระดับสูง

เทมเพลตซังมากกว่า 10 แบบ

Є ทางเลือกสำหรับการเปลี่ยน CSS3

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

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

รายการความเป็นไปได้สำหรับแถบเลื่อนเดสก์ท็อปนั้นยาวมาก ดังนั้นฉันจะแสดงรายการบางส่วน:

เอฟเฟกต์พารัลแลกซ์และภาพเคลื่อนไหวแบบโคริสตูแวค

ไม่จำกัดจำนวนลูกบอลและสไลด์พร้อมข้อความ

พร้อมใช้งาน ปรับสไตล์ได้อย่างละเอียด

และอีกมากมาย

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

นอกเหนือจากชื่อ “ปลั๊กอินตัวเลื่อน jQuery ที่ปรับเปลี่ยนได้ของ LayerSlider” แล้ว ไม่สามารถประเมินตัวเลื่อนนี้ได้อย่างถูกต้อง
การเปลี่ยนภาพ 2D และ 3D มากกว่า 200 แบบระหว่างสไลด์เพื่อหันหัวของใครก็ตาม

ฟังก์ชั่นที่น่าทึ่งสองสามอย่าง:

13 สกินและเมนู 3 ประเภท

ความสามารถในการวางภาพแช่แข็งไว้ด้านบนของแถบเลื่อน

І JQuery ทางเลือก

และอีกมากมาย

เช่นเดียวกับแถบเลื่อนก่อนหน้า คุณสามารถเพิ่มเนื้อหาใดๆ ได้ เช่น เนื้อหามัลติมีเดียที่ใช้ HTML5 LayerSlider ชอบแถบเลื่อนและมันแย่ยิ่งกว่านั้นอีก

jQuery Banner Rotator / Slideshow - เพิ่มแถบเลื่อนแบบธรรมดาโดยไม่ต้องเสียสละฟังก์ชันหลัก

ความเป็นไปได้:

ประเภทเครื่องมือ การแทรกข้อความ ฯลฯ

มุมมองไปข้างหน้าและตัวเลือกต่าง ๆ สำหรับการตรวจสอบส่วนประกอบ

ตัวจับเวลาพร้อมชัตเตอร์สำหรับตัวเลื่อนตัวเดียวหรือทั้งหมด

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

jQuery Banner Rotator / Slideshow ซึ่งสอดคล้องกับแถบเลื่อน jQuery อื่น ๆ มีความสามารถขั้นพื้นฐานเท่านั้น แต่มันไม่ง่ายเลยที่จะลืมมัน

แถบเลื่อนใด ๆ ที่ปรากฏตรงกลางจะมีรถถังที่เป็นเอกลักษณ์ของตัวเองและประสบปัญหากับกาลูซาของมัน ช่างเถอะ. All In One Slider เรียกได้ว่าเป็น "รวมทุกอย่าง" เลย

ฉันคิดว่านักพัฒนาและนักออกแบบเว็บไซต์ส่วนใหญ่อาจคิดมากเกินไปในการตัดสินใจ ไม่เช่นนั้นพวกเขาจะมองหาสิ่งใหม่ๆ และ “มีอะไรใหม่” นี้รวมถึง:

ตัวหมุนแบนเนอร์

แบนเนอร์พร้อมตัวอย่าง

แบนเนอร์พร้อมเพลย์ลิสต์

แถบเลื่อนเนื้อหา

ม้าหมุน

ตัวเลื่อนทุกประเภทมีฟังก์ชันการทำงานส่วนใหญ่ แต่ไม่ใช่ทั้งหมดที่จำเป็นสำหรับตัวเลื่อน jQuery All In One Slider รวมทุกอย่างของคุณแล้วหรือยัง?

หากแถบเลื่อนของคุณไม่ตอบสนองและไม่รองรับหน้าจอสัมผัส แสดงว่าคุณมีแถบเลื่อนผิด UnoSlider ถูกต้อง

แถบเลื่อนนี้รู้ตำแหน่งที่อยู่กลางแสงแดดระหว่างความเรียบง่ายและชุดฟังก์ชันที่หลากหลาย ฟังก์ชั่น:

การสนับสนุนหัวข้อ

12 ธีมสำเร็จรูป

40 ช่วงการเปลี่ยนภาพ

รองรับ IE6+

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

คุณกำลังพูดว่า “แถบเลื่อน jQuery หนึ่งตัวเพื่อแก้ไขทุกอย่าง” หรือไม่? ลองใช้ Master Slider - ตัวเลื่อนหน้าจอสัมผัส JQuery สำหรับขนาดหน้าจอที่แตกต่างกัน

หากไม่มีการออกแบบที่เหมาะสม สำเนานี้เป็นหนึ่งในสิ่งที่ดีที่สุด:

เทมเพลตมากกว่า 25 แบบ

ไปที่ความเร็วของฮาร์ดแวร์

สนับสนุนโดยการแตะและปัด

และอีกมากมาย

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

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

เนื่องจากชื่อมีคำว่า "สัมผัส" คุณจึงสามารถเดาได้ว่าแถบเลื่อนนั้นสามารถปรับได้อย่างเต็มที่และรองรับการสัมผัส ฟังก์ชั่นอื่นๆ:

การเพิ่มประสิทธิภาพ SEO

การสร้างอัตโนมัติที่ชาญฉลาดยิ่งขึ้น

CSS3 ไปที่ทางลัดฮาร์ดแวร์

UI ที่กำหนดเองและ 4 สกินสำหรับ Photoshop

TouchCarousel นำเสนอประสบการณ์ใหม่บนอุปกรณ์พกพาผ่านการเลื่อนสไลด์ทางกายภาพที่เป็นเอกลักษณ์

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

ด้วยเค้าโครง HTML หรือ XML แถบเลื่อนที่แทรกไว้จะสอดคล้องกับเป้าหมายที่หลีกเลี่ยงไม่ได้:

ลูกบอลเคลื่อนไหวและวิดีโออัจฉริยะ

การเปลี่ยนผ่านมากกว่า 100 รายการและสิทธิ์การใช้งานมากกว่า 150 รายการที่กำลังได้รับการปรับแต่ง

15 สกินสำหรับแถบเลื่อน, 7 สกินสำหรับแถบเลื่อนและรองรับไลท์บ็อกซ์

การนำทางด้วยคีย์บอร์ด การรองรับจุด และการปรับแต่ง

และอีกมากมาย

อย่างไรก็ตาม คุณลักษณะที่ยิ่งใหญ่ที่สุดของ Advanced Slider คือ jQuery XML Slider API ซึ่งทำให้แถบเลื่อนเป็นตัวเลือกที่เหมาะสำหรับโปรแกรมเว็บของคุณ

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

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

การเปลี่ยน CSS3 ระหว่างลูกบอล

พารามิเตอร์สิ้นสุดภาพเคลื่อนไหวสำหรับลูกบอล

ตัวเลือกความกว้างคงที่ เต็มหน้าจอ และเต็มความกว้าง

ข้อความเคลื่อนไหวในรูปแบบ HTML และ CSS

แถบเลื่อนส่วนใหญ่พยายามที่จะรวมเอฟเฟกต์เพิ่มเติม และ jQuery Slider Zoom In/Out Effect Fully Responsive มีเพียงเอฟเฟกต์ Ken Burns เท่านั้น แต่มีการใช้งานที่ดีกว่า

เช่นเดียวกับ Advanced Slider - jQuery XML Slider ที่รู้จักกันดี jQuery Carousel Evolution มี API ของตัวเองซึ่งสามารถปรับแต่งเพื่อปรับปรุงฟังก์ชันการทำงานหรือรวมตัวเลื่อนเข้ากับโครงการอื่น

จาวาสคริปต์ เริ่มต้นอย่างรวดเร็ว

เรียนรู้พื้นฐานของ JavaScript ในแอปพลิเคชันที่ใช้งานได้จริงเพื่อสร้างเว็บแอปพลิเคชัน

ด้วยรูปภาพ มาร์กอัป HTML วิดีโอ YouTube และ Vimeo คุณสามารถดู:

การเพิ่มประสิทธิภาพ SEO

9 รูปแบบม้าหมุน

ผลกระทบของเงาและภาพ

ปรับขนาดภาพได้ทั้งด้านหน้าและด้านหลัง

jQuery Carousel Evolution – ม้าหมุนเรียบง่ายพร้อมตัวเลือกไม่จำกัด

Sexy Slider จะไม่เซ็กซี่เหมือนเมื่อก่อนอีกต่อไป อย่างไรก็ตาม ตลอดศตวรรษที่ผ่านมา ตัวเลื่อนได้รับความไว้วางใจ

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

การเขียนโปรแกรมสไลด์อัตโนมัติ

คำบรรยายก่อนภาพ

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

เอฟเฟกต์การเปลี่ยนแปลง 6 แบบ

Sexy Slider รับรองว่าคุณจะปลดล็อกศักยภาพทั้งหมดของคุณ

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

jQuery Image & Content Scroller พร้อม Lightbox รองรับการป้อนข้อมูลด้วยแป้นพิมพ์และการป้อนข้อมูลล้อเมาส์ รวมถึงคุณสมบัติอื่น ๆ :

การวางแนวแนวนอนและแนวตั้ง

ลายเซ็นข้อความในสายกลางหรือแถบเลื่อน

ความสามารถในการตั้งค่าสไลด์ได้มากที่สุดเท่าที่จะมองเห็นได้ในคราวเดียว

รูปภาพที่ฝัง, Flash, iframe, Ajax และเนื้อหาออนไลน์

แถบเลื่อนยังมีไลท์บ็อกซ์ด้วย สำหรับ jQuery Image & Content Scroller w/ Lightbox คุณไม่สามารถเปิดแถบเลื่อนได้เอง แต่ยังเปิด lightbox ได้ด้วย

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

แถบเลื่อนมีการตั้งค่าล่วงหน้ามากมาย บางทีคุณเพียงแค่ต้องตั้งค่าเพลงเพื่อปรับแต่งเท่านั้นเอง ความเป็นไปได้:

6 สไตล์ที่แตกต่างกัน

เอฟเฟกต์การเปลี่ยนแปลง 4 แบบ

2 ผ่านไปด้วยการปัด

กำหนดค่าปุ่มและคำอธิบายภาพ

เช่นเดียวกับตัวเลื่อนอื่นๆ ตัวเลื่อนนี้รองรับทอร์แคนนิ่ง การปรับตัว และการเร่งความเร็วด้วยฮาร์ดแวร์ Translucent เป็นตัวเลื่อนที่มีการออกแบบที่เรียบง่ายซึ่งทำให้เนื้อหาอยู่แถวหน้า

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

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

การสนับสนุน AJAX

แถบเลื่อน

รองรับเทคโนโลยี Deep Link

เอฟเฟกต์การเปลี่ยนแปลงที่แตกต่างกัน 2 แบบ

นอกจากนี้ ให้ใช้ตัวกั้นแบบ 11 ด้านเพื่อรองรับแป้นพิมพ์ ป้องกันเว็บไซต์ศัตรูที่ถูกต้องคือ FSS vaga ขนาดน้อยกว่า 5Kb

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

ความงามที่มีภาพเคลื่อนไหว CSS3 นี้ยังสามารถให้ฟังก์ชันที่หลากหลาย:

หีบเพลงแนวนอนและแนวตั้ง

การเพิ่มประสิทธิภาพความหมาย HTML5 และ SEO

รองรับจุด คีย์บอร์ด และ WAI-ARIA

มากกว่า 10 สกินและ 6 เลย์เอาต์

และอีกมากมาย

Zozo Accordion มีการสนับสนุนที่ไม่เสียค่าใช้จ่ายและการอัปเดตอย่างต่อเนื่อง รวมถึงฟังก์ชันทั้งหมดที่คุณต้องการในหีบเพลง JQuery

ปลั๊กอิน jQuery Responsive OneByOne Slider เป็นเหมือนแอนิเมชั่นธรรมดามากกว่าตัวเลื่อน แทนที่จะแสดงทีละสไลด์ อินสแตนซ์นี้จะเต็มหน้าจอด้วยสไลด์ ทีละสไลด์ จนกว่าพื้นที่จะหมด จากนั้นจึงย้ายไปยังสไลด์ถัดไป

แอนิเมชัน CSS3 ขับเคลื่อนโดย Animate.css ซึ่งใช้งานง่าย สามารถประกอบขึ้นจากลูกบอลสองสามลูก และเข้ากันได้กับอุปกรณ์มือถือ ฟังก์ชั่น:

นอกจากนี้ยังมีตัวเลือกการนำทางโดยใช้การลากและวาง ปลั๊กอิน jQuery Responsive OneByOne Slider อิงตาม Twitter Bootstrap carousel

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

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

การนำทางจากแป้นพิมพ์

ปรับแต่งเอฟเฟกต์และปุ่มได้ง่าย

เทคนิคการลดแบบก้าวหน้า - ทำงานโดยไม่ต้องใช้ JavaScript

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

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

ภายใต้ประทุนคุณจะพบตัวเลือกมากมาย:

รองรับคีย์บอร์ด หมี และทอร์แคน

CSS3 ไปที่ทางลัดฮาร์ดแวร์

รูปแบบที่ถูกต้องและการเพิ่มประสิทธิภาพ SEO

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

API นั้นเข้มงวดและอ่อนโยนต่อพวกโจรมากขึ้น ซึ่งเผยให้เห็นถึงวิธีการเติบโตที่แตกต่างกัน MightySlider เป็นตัวเลื่อน JQuery ที่ยอดเยี่ยมและก้าวหน้าพร้อมโค้ดที่สะอาดตาและมีการแสดงความคิดเห็นที่ดี

Parallax Slider ทำงานเหมือนกับ jQuery Responsive OneByOne Slider Plugin และช่วยให้คุณสามารถสร้างภาพเคลื่อนไหวบริเวณกึ่งกลางของสไลด์เดียวได้ คุณสามารถทำให้สไลด์ทั้งหมดหรือเพียงสไลด์เดียวเคลื่อนไหว โดยเพิ่มภาพเคลื่อนไหวแบบพารัลแลกซ์

ในชุดประกอบด้วยแถบเลื่อน 4 แบบที่แตกต่างกัน โดยทั้งหมดมีเอฟเฟกต์พารัลแลกซ์ เช่นเดียวกับแถบเลื่อน jQuery อื่น ๆ ที่นี่:

อารมณ์ใหม่

สนับสนุนทอร์คาน

ปรับได้เต็มที่ ไม่จำกัดจำนวนลูก

การเขียนโปรแกรมอัตโนมัติ การวนซ้ำ การปรับความสูงและความกว้าง ตลอดจนตัวจับเวลา

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

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

หากคุณไม่ชอบแถบเลื่อนในรายการนี้ คุณสามารถใช้บทช่วยสอนโค้ด jQuery บน Envato เพื่อสร้างสิ่งใหม่และไม่เหมือนใครได้เสมอ

ลองดูแถบเลื่อนอื่นๆ ในตลาด Envato ซึ่งมีให้เลือกมากมาย ตัวเลื่อน JQuery ที่คุณชื่นชอบคืออะไรและเพราะเหตุใด

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

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

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

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


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


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

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

ตอนนี้มาเขียนกันเถอะ! ก่อนอื่น เรามาเปิดไฟล์ดัชนีของเราและเขียนเครื่องหมายที่เราต้องการที่นั่น:

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

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

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

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


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

มาดูกันที่ Slidewrapper กันดีกว่า ทำไม Position:relative และไม่ใช่สัมบูรณ์? ง่ายๆ เพราะ... หากเราเลือกตัวเลือกอื่นด้วยพลังงานล้นของวิวพอร์ต: ซ่อนไว้ เราจะไม่ได้อะไรเลยเพราะ วิวพอร์ตไม่ได้ปรับตามความสูงของตัวตัดสไลด์ ดังนั้นเราจึงตั้งค่าเป็นความสูง:0 เหตุใดความกว้างจึงมีความสำคัญ และเหตุใดเราจึงตั้งค่าไว้เสมอ ทางด้านขวา สไลด์ของเราจะมีความกว้างเท่ากับ 100% ของวิวพอร์ต และหากต้องการเว้นระยะห่างตามแนวเส้น เราจำเป็นต้องมีที่ที่สไลด์จะตั้งได้ ดังนั้นความกว้างของตัวห่อสไลด์ควรเท่ากับ 100% ของ ความกว้างของวิวพอร์ตคูณด้วยขนาดที่มีสไลด์ (ฉันเลือกได้ 4) มีความแตกต่างระหว่าง transition และ transition-timing-function ดังนั้น 1 วินาทีหมายความว่าการเปลี่ยนตำแหน่งของ Slidewrapper จะใช้เวลา 1 วินาที และเราจะระมัดระวัง และการค่อยๆ เข้า-ออก เป็นประเภทของแอนิเมชั่นที่คุณจะเคลื่อนไหวทันที แต่ให้เร่งความเร็วไปตรงกลางแล้วกลับมาหลับ ที่นี่ คุณสามารถตั้งค่าให้เจ้าหน้าที่ได้แล้ว

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

ต่อไป เราจะจัดสไตล์สไลด์ของเรา ความกว้างของมันจะต้องเท่ากับความกว้างของวิวพอร์ต เพราะ เนื่องจากความกว้างของ Slidewrapper เท่ากับความกว้างของ Viewport คูณด้วยจำนวนสไลด์ ดังนั้นเพื่อให้ได้ความกว้างของ Viewport อีกครั้ง เราจึงต้องใช้ 100% ของความกว้างของ Slidewrapper หารด้วยจำนวนสไลด์ (ในกรณีของฉัน ยังคงเป็นอีกครั้งในวันที่ 4) หลังจากนั้นเราจะแปลงพวกมันให้เป็นองค์ประกอบเล็กๆ โดยใช้ display:inline เพิ่มเติม และกำหนดกระแสรอบความชั่วร้าย เพิ่มพลังให้ float:left เกี่ยวกับ list-style:none ฉันสามารถพูดได้ว่า vikory yogo เพื่อให้ได้เครื่องหมายเริ่มต้น li ในกรณีส่วนใหญ่เป็นมาตรฐาน

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

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

เราเปิดไฟล์ js ของเราไม่ว่าจะมีโค้ดตัวเลื่อนใดก็ตาม อย่าลืมใส่ jQuery ด้วยเพราะว่า เราจะเขียนสำหรับกรอบการทำงานเพิ่มเติมนี้ ก่อนที่ฉันจะพูด ในขณะที่เขียนบทความนี้ ฉันใช้ jQuery 3.1.0 เวอร์ชัน vikory ไฟล์ที่มีสคริปต์จะต้องรวมอยู่ในแท็ก body เนื่องจาก เราจะทำงานกับองค์ประกอบ DOM ที่ต้องเริ่มต้นก่อน

สำหรับตอนนี้ เราจำเป็นต้องประกาศการเปลี่ยนแปลงบางอย่าง โดยรายการหนึ่งจะบันทึกจำนวนสไลด์ที่เราต้องการในปัจจุบันในวิวพอร์ต ฉันจะเรียกมันว่า slideNow และอีกรายการจะบันทึกจำนวนสไลด์เหล่านี้เอง เรียกว่า slideCount

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

ใน slideCount เราสามารถรองรับองค์ประกอบลูกจำนวนหนึ่งของ Slidewrapper ได้ ทุกอย่างมีเหตุผลที่นี่
ถัดไปคุณต้องสร้างฟังก์ชันที่รับผิดชอบในการสลับสไลด์จากขวาไปซ้ายดังนี้:

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

ก่อนอื่น เรามาตรวจสอบว่ามีอะไรอยู่ในสไลด์ที่เหลือของหน้าเราบ้าง? เพื่อจุดประสงค์นี้ เรานำจำนวนสไลด์ทั้งหมดของเราโดยใช้ $("#slidewrapper").children().length และจับคู่กับจำนวนสไลด์ของเรา เนื่องจากจำนวนสไลด์ปรากฏเท่ากัน ซึ่งหมายความว่าเราต้องเริ่มแสดง หน้าอีกครั้งจาก 1 สไลด์ ซึ่งหมายความว่าเราเปลี่ยนพลัง CSS ของการแปลงใน slidewrapper แปล (0, 0) เพื่อให้เราเปลี่ยนตำแหน่งเพื่อให้สไลด์แรกปรากฏในมุมมองของเรา อย่าลืมเกี่ยวกับ -webkit และ -ms เพื่อการเรนเดอร์ข้ามเบราว์เซอร์ที่เพียงพอ (div. .vidnik พร้อม css-powers) หลังจากนี้อย่าลืมอัปเดตค่าของการเปลี่ยนแปลง SlideNow โดยแจ้งว่าสไลด์หมายเลข 1 อยู่ในมุมมอง: slideNow = 1;

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

เนื่องจากใจแรกไม่อยู่ในหัว เราจึงไม่สามารถพูดถึงสิ่งที่เรากำลังอยู่ในสไลด์ถัดไปหรือสิ่งอื่นใดไม่ได้ ซึ่งหมายความว่า เราต้องเปลี่ยนไปใช้แนวรุกซึ่งเสร็จสิ้นโดย การเลื่อนตัวตัดสไลด์ไปทางซ้ายเป็นค่า p นอกวิวพอร์ตความกว้าง การกระจัดจะถูกจัดเตรียมอีกครั้งผ่านพลังที่รู้จักของ Translation ซึ่งค่าจะคล้ายกับ "translate(" + TranslateWidth + "px, 0)" โดยที่ TranslateWidth คือค่าของการแทนที่ Slidewrapper ของเรา ก่อนที่เราจะพูด เรามาพูดถึงการเปลี่ยนแปลงนี้ที่จุดเริ่มต้นของโค้ดของเรา:

หลังจากย้ายไปยังสไลด์ถัดไปแล้ว สมมติว่ามีสไลด์ถัดไปของเราตอนนี้: slideNow++;

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

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

ชั่วโมง js ระบุเป็นมิลลิวินาที

ตอนนี้เรามาเขียนโครงสร้างต่อไปนี้:

ทุกอย่างไม่สามารถง่ายกว่านี้ได้ที่นี่ ผ่านการก่อสร้าง $(document).ready(function()()) เรากำลังพูดถึงสิ่งที่จำเป็นต้องลบหลังจากดาวน์โหลดเอกสารแล้ว จากนั้นเราเพียงแค่เรียกใช้ฟังก์ชัน nextSlide โดยมีช่วงเวลาเท่ากับ slideInterval พร้อมด้วยฟังก์ชัน setInterval ที่เพิ่มเข้ามา

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


ต่อไปเราจะเพิ่มฟังก์ชันลงในแถบเลื่อนของเรา เช่น แถบเลื่อนเมื่อเคอร์เซอร์ถูกชี้ ซึ่งเราต้องเขียนสิ่งต่อไปนี้ในบล็อกโค้ดหลัก (ตรงกลางของ $(document).ready(function( ) ()) โครงสร้าง:

เพื่อเริ่มวิเคราะห์โค้ดนี้ เราจำเป็นต้องรู้ว่าช่วงสวิตช์คืออะไร ประการแรก สิ่งสำคัญคือต้องบันทึกการคลิกฟังก์ชัน nextSlide เป็นระยะ เพียงในลักษณะที่ปรากฏ เราสามารถใช้ชุดโค้ดนี้: setInterval(nextSlide, slideInterval); เปลี่ยนเป็น Qiu: switchInterval = setInterval(nextSlide, slideInterval); - หลังจากการดัดแปลงเหล่านี้ บล็อกโค้ดหลักของเราจะมีลักษณะดังนี้:

ในที่นี้ฉันใช้วิธีโฮเวอร์ ซึ่งหมายถึง "เมื่อโฮเวอร์" ฟังก์ชันนี้ช่วยให้ฉันตรวจจับช่วงเวลาที่ฉันวางเคอร์เซอร์ไว้เหนือวัตถุใดๆ ในส่วนนี้บนวิวพอร์ต

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

ดังที่เรายืนยันได้ในตอนนี้ สิ่งสำคัญคือวิธีที่แถบเลื่อนของเราตอบสนองต่อการเลื่อนเคอร์เซอร์ การสับสไลด์อย่างเชื่องช้า

ถึงเวลาแล้วที่จะต้องเพิ่มปุ่มต่างๆ ลงในแถบเลื่อนของเรา รวมถึงปุ่มย้อนกลับด้วย

ให้เราสังเกตพวกเขาก่อน:

การทำเครื่องหมายนี้อาจจะโง่ในตอนแรก ฉันจะบอกทันทีว่าการรวมสองปุ่มนี้ไว้ใน div เดียวด้วยคลาส prev-next-btns เพื่อความสะดวกของคุณเอง คุณไม่จำเป็นต้องรบกวนใคร ผลลัพธ์ที่ได้ ไม่เปลี่ยน เราจะเพิ่มมันตอนนี้ m สไตล์และทุกสไตล์ ชัดเจน:

ขั้นแรก เราวางตำแหน่งปุ่มของเราโดยใช้ตำแหน่ง:แน่นอน เพื่อให้เราสามารถควบคุมตำแหน่งของพวกเขาได้อย่างอิสระตรงกลางวิวพอร์ตของเรา จากนั้นเราสามารถปรับขนาดปุ่มเหล่านี้ และใช้รัศมีเส้นขอบ ปัดเศษเพื่อให้ปุ่มกลายเป็นวงกลม สีของพวกเขาจะเป็นสีขาวดังนั้น #fff และลักษณะที่ปรากฏที่ขอบด้านบนของวิวพอร์ตจะเท่ากับครึ่งหนึ่งของความสูงของวิวพอร์ตลบด้วยความสูงของปุ่มครึ่งหนึ่ง (ลักษณะที่ปรากฏของฉันคือ 25px) ด้วยวิธีนี้เราสามารถขยายได้ ในแนวตั้งตรงกลาง ต่อไป เราบอกว่าเมื่อเราวางเมาส์เหนือพวกมัน เคอร์เซอร์จะเปลี่ยนเป็นตัวชี้ และเมื่อบอกปุ่มของเรา พวกมันจะต้องยื่นออกมาจากขอบ 20px เพื่อที่เราจะได้เคลื่อนย้ายพวกมันตามที่เราต้องการ

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

หลังจากจัดสไตล์แล้ว แถบเลื่อนของเราอาจมีลักษณะดังนี้:


ต่อไป กลับไปที่ไฟล์ js ของเรา ซึ่งเราจะอธิบายหุ่นยนต์ของปุ่มต่างๆ ของเรา เรามาเพิ่มอีกหนึ่งฟังก์ชันกัน ซึ่งแสดงให้เราเห็นในสไลด์ด้านหน้า:

เรียกว่า prevSlide ซึ่งจะปรากฏเฉพาะเมื่อคุณคลิกที่ prev-btn ก่อนอื่น ให้ตรวจสอบสไลด์ที่อยู่ในสไลด์ที่ 1 อย่างละเอียด ที่นี่เรายังตรวจสอบด้วยว่า SlideNow ของเราไม่ได้สูงที่สุดในบรรดาช่วงที่แท้จริงของสไลด์ของเรา และตามที่ใจของเราถาม เราจะย้ายไปยังสไลด์ที่เหลือ เมื่อพบกระดาษห่อสไลด์ที่ต้องการแล้ว มันสำคัญสำหรับเรา ค่าสามารถคำนวณได้โดยใช้สูตรต่อไปนี้: (ความกว้างของหนึ่งสไลด์) * (สำหรับสไลด์ – 1) เรานำทุกอย่างที่มีเครื่องหมายลบเพราะ เราเลื่อนไปทางซ้าย ออก เพื่อให้วิวพอร์ตแสดงสไลด์ที่เหลือให้เราเห็น สุดท้ายนี้ เรายังต้องบอกบล็อกนี้ให้เปลี่ยนสไลด์ด้วย ตอนนี้มุมมองของเรามีสไลด์ที่เหลืออยู่แล้ว

หากเราไม่ได้อยู่บนสไลด์แรก เราจะต้องเลื่อนกลับไป 1 ซึ่งเราจะเปลี่ยนพลังการแปลงของ Slidewrapper อีกครั้ง สูตรคือ: (ความกว้างของหนึ่งสไลด์) * (จำนวนสไลด์ไหล - 2) เราใช้เครื่องหมายลบเหมือนกัน เหตุใด -2 และไม่ใช่ -1 เราจึงต้องเลื่อนกลับ 1 สไลด์ ทางด้านขวาอย่างที่เราทราบในสไลด์ที่ 2 พลังของการแปลง:แปล(x,0) ของตัวตัดสไลด์ของเรานั้นเท่ากับความกว้างของหนึ่งสไลด์อยู่แล้ว ดังนั้นเราจึงบอกได้ว่าคุณต้องเลือก จำนวนโฟลว์สไลด์ 1 จากนั้นเราจะลบออกอีกครั้งเนื่องจาก Slidewrapper ได้ชดเชย Slidewrapper แล้วซึ่งจะต้องถูกชดเชยด้วย 0 แม้แต่ความกว้างของวิวพอร์ตเองและบน SlideNow - 2

ตอนนี้เราไม่จำเป็นต้องเพิ่มแถวลงในบล็อกหลักของโค้ดอีกต่อไป:

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

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

ตามความเป็นจริง ตรงกลางวิวพอร์ตมีรายการไฟล์แนบ ฉันมีตัวระบุ nav-btns ตรงกลางมีปุ่มนำทางของเรา พวกเขามีคลาส slide-nav-btn จากนั้นด้วย การทำเครื่องหมายที่คุณสามารถเริ่มต้นให้เสร็จสิ้นได้ นี่คือสไตล์:

บล็อก nav-btns ซึ่งเป็นที่ตั้งของปุ่มของเรา จะได้รับตำแหน่งพลังงาน:สัมบูรณ์ เพื่อที่จะไม่ยืดความสูงของวิวพอร์ต เนื่องจาก Slidewrapper มีตำแหน่ง:กำลังสัมพัทธ์ ความกว้างเรากำหนดไว้ 100% ดังนั้นด้วยความช่วยเหลือของ text-align:center เราจึงจัดปุ่มให้อยู่ตรงกลางแนวนอนเพื่อที่จะวิวพอร์ต จากนั้นด้วยความช่วยเหลือจากกำลังล่างเราจึงปล่อยให้บล็อกของเรา รู้ว่าอันที่ขอบล่างมีหน้าที่รับผิดชอบอยู่ที่ด้านข้าง 2 0px

ปุ่มต่างๆ จะเหมือนกับสไลด์ ยกเว้นตอนนี้เราได้ตั้งค่าให้แสดง: inline-block เพราะ with display:inline พวกเขาไม่ตอบสนองต่อความกว้างและความสูงเพราะว่า อยู่ในตำแหน่งที่แน่นอน สีเป็นสีขาวมากและนอกเหนือจากรัศมีเส้นขอบที่คุ้นเคยอยู่แล้ว ยังทำให้มีรูปร่างเหมือนเสาอีกด้วย เมื่อวางเคอร์เซอร์ไว้เหนือเคอร์เซอร์ รูปลักษณ์ของเคอร์เซอร์จะเปลี่ยนไปเพื่อแสดงภาพได้

และตอนนี้เรามาดูส่วนของ jQuery กันดีกว่า:
เป็นครั้งแรกให้เปลี่ยน navBtnId ซึ่งจะบันทึกดัชนีของปุ่มที่เรากด:

ที่นี่ เมื่อเราคลิกที่ Slide-nav-btn ของเรา เราจะคลิกที่ฟังก์ชันที่กำหนดตัวแปร navBtnId ให้กับดัชนีของปุ่มที่ถูกคลิกซึ่งเป็นหมายเลขซีเรียล เนื่องจากตัวเลขเริ่มต้นจากศูนย์ จากนั้นเรากด บนปุ่มอื่น จากนั้นค่าจะถูกเขียนไปที่ navBtnId 1 ต่อไป เราจะดำเนินการตรวจสอบอีกครั้ง โดยเพิ่มค่าหนึ่งลงในหมายเลขซีเรียลของปุ่ม เพื่อลบตัวเลขดังกล่าว เนื่องจากผลลัพธ์ไม่ได้มาจาก 0 แต่จาก 1 เราจะทำให้ตัวเลขนี้เท่ากันกับจำนวนสไลด์โฟลว์หากหลีกเลี่ยงเราจะไม่ทำงานกับมัน กระบวนการ จากนั้นสไลด์ที่ต้องการจะอยู่ในวิวพอร์ตแล้ว

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

ดังนั้น ทุกสิ่งที่ยังไม่เข้าใจ ฉันจะลบโพสต์บน jsfiddle โดยที่โค้ดทั้งหมดที่เขียนในเนื้อหาจะได้รับ

ขอบคุณสำหรับความเคารพของคุณ!

แท็ก:

• ตัวเลื่อน jquery
• ซีเอสเอส
• แอนิเมชั่น CSS3
• html

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

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

รวมสไตล์พื้นฐานแล้ว

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

เราเปิดตัวแถบเลื่อนจากการปรับเปลี่ยนหลังจากการปรับเปลี่ยน

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

...หรือเราจะแก้ไขมันเอง

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

รายการพารามิเตอร์ที่ใช้ได้:

สำหรับ vikoristan API ให้เขียน glide ไปยังการเปลี่ยนแปลง

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

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

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

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