Поглед към инсталирането на гладкия плъзгач под библиотеката jQuery. Този плъгин заема едно от най-високите места в рейтинга на плъгините за създаване на слайдшоута.

Певче, заемайки това място заслужено, трябва да се свържете с него и да го поставите в съкровищницата си на уеб рекордера. Началната страница на плъгина с описание на инсталирането на различни приложения можете да намерите тук - гладки демонстрации. Плъгинът няма всичко - той има всички функции за управление в своя склад, той е лек и лесен за инсталиране, HTML оформлението за неговото създаване е просто и семантично. Гладкият плъгин идва с нов набор от настройки, които могат лесно да бъдат свързани към конфигурационния файл.

Свързване на гладкия плъгин

Процесът на свързване на гладкия плъгин в работещ проект е много прост, просто трябва да се уверите, че настройките са правилни.

Създаване на маркировки под гладкост

HTML оформлението за гладкия плъгин е семантично и просто. Достатъчно е да създадете списък с подходящи имена на класове. Потребителят Getting Started на официалната страница на гладкия плъгин показва следното HTML маркиране:

Моят опит да създам плъзгач въз основа на HTML оформление под формата на основен списък с водещи символи:

• 
• 
• 
• 

... не донесе успех - гладкият плъгин не беше спечелен! Може би можете да промените елементите с помощта на CSS стилове

1

ул

,

1

ли

Все още ли всичко работи за блока? Има обаче допълнителни стъпки, без които можете да се справите и да ги изпълните, както е описано в официалната документация. Редактиране на гладкия файл на приставката

В следващата стъпка ще извлечем архива на гладкия плъгин. Можете да печелите пари по няколко начина. Първият е да ви примами от тази страница Go Get It. Или отидете на страницата на GitHub на автора и вземете zip архивите на плъгина – гладък GitHub. И в двата случая архивите с имена се премахват

Възможно е да свържете готови CSS стилове на гладкия плъгин към HTML документ:

Основният текст на HTML документа преди тага, който се затваря

1

Вмъкваме три реда с js скриптове:

В интерес на истината, в първите два реда библиотеката jQuery-1.11.0 и плъгинът jQuery Migrate 1.2.1 се изтеглят чрез CDN. Трети плъгин

Включваме скрипта за инициализация на плъгина: $(документ). готов (функция ()( $ (".плъзгач") . гладък (( точки : вярно )); ));

HTML оформлението на Podsumkov и свързването на CSS таблици и JS скриптове ще изглежда така:

• 
• 
• 
• 
• 

Бих искал да знам за такова богато нещо като конзолата на браузъра Google Chrome. Защо има korisna? Защото също внезапно работи за мен (на първо място беше с плъгина jqFancyTransitions - jqFancyTransitions Slider) и помага да се открият грешките при свързване на скриптове към HTML документ. Незаменима вещ!

За да илюстрирам използването на браузъра и функционалността на конзолата на Chrome, стартирам файла index.html в браузъра, който създадох по-рано.

И какво?! Извинете, а тук е гладкият плъгин - плъзгач, творения за помощ? Що за красота са те, които са толкова ясно демонстрирани на официалния сайт на проекта – Demos?! Прекрасно е - но ги няма!

Хех, влязох ли правилно, за да свържа скрипта? Е, ще прегледам документацията още веднъж... Всичко е правилно, но не ми работи... Може би трябва да пренапиша индексната страница отново? Възможно е, но може да има много такива „или може би“, с различни вариации.

Нека отворим конзолата на браузъра Google Chrome и отидем в раздела „Мрежа“:

Това е основната причина, поради която гладкият плъгин не работи на моята страница! Просто библиотеката jQuery 1.11.0 и плъгинът jQuery Migrate 1.2.1 не можаха да бъдат изтеглени от браузъра Chrome чрез CDN. Колко часа и нерви бих загубил, за да използвам „научния метод“, за да установя причината за „повредата“, ако не беше самата конзола, не е известно.

Нямам търпение да разбера защо браузърът не може да изтегли файловете чрез CDN. Така че просто ще изтегля файловете „ръчно“ и ще ги свържа локално:

Отново стартирам индексната страница index.html в браузъра Google Chrome и... за Чудото! Гладкият плъгин прави:

Снимките се превъртат автоматично и в долната част можете да видите пагинацията, генерирана от гладкия скрипт, очевидно преди корекцията:

точки: вярно, автоматично пускане: вярно

... в конфигурационния файл. Освен това бяха генерирани стрелки за превъртане на изображението „ръчно“ напред и назад (не се вижда на белия фон на HTML страницата). Други настройки на плъгина slick можете да видите на официалната страница - Настройки.

ЗАБЕЛЕЖКА: Горещо препоръчвам да поставите вашия инициализиращ скрипт във външен JS файл.

Не написах тази статия по една проста причина - за прецизността на приклада и плавността на създаването му.

Редактиране на гладкия плъгин

Сега загубих малко отдясно - след като създадох инспектор на елементи на страница (например Firebug), „извадих“ от DOM дървото на нашата страница имената на класовете елементи, от които се нуждаем, и можем лесно да ги редактирам чрез CSS правила:

тяло (цвят на фона: изсветляване (#ccc, 5%); .плъзгач (ширина: 300px; поле: 10px автоматично; подложка: 5px; цвят на фона: #ccc; граница: 3px плътно #000; @включване на борда (3px ); .slick-dots( bottom : -30px ; ) ) )

Създавам за тялото на HTML документ

Ще добавя подложка, кордон със заоблени ръбове и запълване на фона; Ще го центрирам отстрани и ще го спусна малко надолу. И също малко нагоре по хълма

1	.slick-dots

със страниране.

Резултатът е невероятен:

Висновок

Плъгинът slick me определено беше успешен. Лесно се инсталира и свързва, генерира елементи чрез показване на слайдшоу и има голям брой различни настройки. За разнообразие от опции за персонализиране на новия външен вид можете и трябва да отидете на страницата на приложението - Демо. И се адаптирайте към необходимите специфични умове, както се изисква.

Сбогом на кодирането!

Здравейте, искам да ви разкажа за гладкия слайдер за сайта, който се показа като лек, универсален и лесен за инсталиране. Тук можете да внедрите всичко свързано със слайдери и въртележки. Както заявява създателят на плъгина, „последната въртележка, от която някога ще се нуждаете“, което може да се тълкува като единична универсална въртележка, която е подходяща за каквато и да е вашата идея. И това е вярно. В него има много, от основен плъзгач до адаптивен карусел със слайдове в до няколко реда.

Плъгинът може безопасно да се използва както от начинаещи, така и от напреднали уеб читатели. Това е много силен конкурент на всичко, което знаем. От кутията можем да извадим дори богат на задачи инструмент.

За да инсталирате слайдер/въртележка на уебсайта си, всичко, което трябва да направите, е да изпълните 3 прости стъпки.

Инсталиране на гладък слайдер Приложение № 1 (плъзгач)

1. Krok - Свързване на стиловете на скрипта и плъгина.

html страници.

$(document).ready(function())( $(".your-class").slick(); ));

Трябва да се свържете между таговете на вашата html страница, а не след кода, който сте поставили за работа №1

В този пример показахме как да инсталирате гладък плъзгач като въртележка с един основен плъзгач.

По-долу можете да се чудите на предницата на описаните по-горе.

Приклад №2 (Въртележка)

За да инсталирате въртележката, трябва да направите всички същите неща като в предишното описание, с изключение на това, че елемент № 2 и елемент № 3 са леко променливи.

2. Croc - вмъкване на HTML кода на самия слайдер.

Този код трябва да бъде вмъкнат между таговете, ако искате да покажете самия плъзгач.

3. Croc – инициализация на слайдера.

$(document).ready(function())( $(".your-class").slick(( infinite: true, slidesToShow: 3, slidesToScroll: 3 )); ));

И в това приложение използвахме гладък плъзгач като въртележка (с 3 основни слайда) и за който използвахме някои параметри на плъгина.

Можете да се възхитите на работата на тази въртележка в примера по-долу.

След като получите общо 3 броя, можете да изберете въртележка или плъзгач за вашите нужди. Има много повече възможности за този слайдер. Ако имате затруднения или проблеми с храненето, попитайте ги в коментарите и аз ще се опитам да им отговоря бързо.

Получихме скрипта на слайдера от екипа от миналата седмица

$ bower i slick.js

Можете също да намерите това в Google - първо попитайте slick http://kenwheeler.github.io/slick/

Предимства на слайдера: поддържа събития с докосване, можете да ги гледате на телефона си с пръст
- поддържа отзивчивост - можете да зададете броя на слайдовете в зависимост от размера на екрана: на големи екрани можете да видите 4 слайда, на средни 2-3, на телефони един по един

Добра практика е да включите скриптове от папката bower_components



Следователно, когато актуализирате скрипт с програмата Bower, няма да се налага да пренаписвате номера на версията в кода, така че Bower дава на скриптовете постоянни имена, които няма да се променят при актуализиране.

Какви са стиловете, които се намират в папката slick: slick.css, slick.less, slick.theme.less, по-добре е да ги копирате в папката с css и да ги включите. Ако ги лишите от мястото им и направите промени в стила на плъзгача, тогава когато скриптът се актуализира, всички промени ще бъдат загубени.

За разлика от други плъзгачи, рамките се поставят не в списък, а в блокове:

1 2 3 4 5 6

Щракване без параметри Когато щракнете върху приставката без параметри, можете да изберете проста опция с един слайд отстрани и стрелки за навигация.

$(".единичен елемент"). гладък ();

Показване на множество слайдове В приложението зададохме параметрите на „плавния плъзгач“ за циклично превъртане, активирахме показването на точки за навигация и посочихме броя на слайдовете, които се показват и превъртат.
$(".multiple-items"). гладък ((
безкрайно: вярно,
// завъртане на плъзгача - след оставащия слайд първият върви с точки: true,
// точки под плъзгача за показване на активния слайд
slidesToShow: 3,
//брой слайдове за показване на екрана slidesToScroll : 1
//колко слайда се записват наведнъж
)); Режим на центриране В режим на центриране активният слайд се поставя в центъра.
$(".център"). гладък ((
centerMode: вярно,
slidesToShow: 3,
});
Централният слайд има клас "slick-center", което означава, че може да бъде проектиран по различен начин. Адаптивност В плъзгача можете да персонализирате адаптивния дизайн на броя на слайдовете в зависимост от ширината на екрана. Например, трябва да покажете само 2 слайда, когато ширината на екрана е по-малка от 600 пиксела, и да ги смесите един по един. Този дворец ще изглежда така

$(".uncycle") . slick(( infinite: false , speed: 350 , // показва плавността на прегарянето slidesToShow: 4 , // броя на слайдовете за показване slidesToScroll: 2 , // колко слайда ще изгорят наведнъж responsive: [ ( breakpoint: 600 , // показва коя ширина на екрана трябва да активирате настройките за настройка: (slidesToShow: 2, slidesToScroll: 1, infinite: true,))))));

Плавно превключване При стандартната настройка на слайдера има внезапна смяна на слайдовете. В допълнение, функционалността Slick осигурява плавен режим на смяна на слайдовете. За да направите това, трябва да отидете на атрибута data-lazy, в който е написан пътят до изображението. Атрибутът трябва да бъде прикрепен не към самото изображение, а към самия етикет на изображението. Това позволява на js кода да бъде уникален. Алтернативата би била отборът

LazyLoad: "по заявка"

Напишете атрибута trace по този начин

< img data- lazy = " images/slaid.jpg" >

Особеността на такъв плъзгач се състои в това, че на екрана има само един слайд, който при превключване се движи стъпка по стъпка. Ефектът се основава на принципа на плавно увеличаване на видимостта. След това се избира сегментът от първия час, по време на който видимостта на първия слайд се променя от 0% на 100%, по време на който следващият слайд става видим. Скриптът за такъв плъзгач изглежда така

$(".избледняване") . slick(( infinite: true , speed: 400 , fade: true , cssEase: "linear" ) ) ;

Slick е най-универсалният и най-простият слайдер, наличен днес. Широкият интервал за регулиране на плъзгача се благоприятства от решението за внедряване на плъзгачи, което, разбира се, е най-важното предимство на този плъзгач. Регулиране на гладкия плъзгач

• Достъпност – първоначалната стойност на този параметър е зададена на true, указваща връзката на бутоните за навигация за плъзгача – стрелките напред и назад и насочването на бутоните като точка.
• adaptiveHeight – ограничен е само до един плъзгач, в който височината на оригиналния контейнер се променя в зависимост от височината на плъзгача. Умовете на кочана нямат връзка.
• autoplay – регулира възпроизвеждането на слайдове в автоматичен режим без помощта на учител. Стандартната стойност на този параметър е false.
• autoplaySpeed ​​​​– този параметър е допълнение към автоматичното пускане и задава времето, преди слайдът да се възпроизведе автоматично. Първоначалната стойност за това е 3000 милисекунди.
• стрелки – свързва стрелките напред и назад към плъзгача. С помощта на допълнителната таблица с външни стилове можете да промените позицията и външния вид на тези стрелки.
• asNavFor – вмъква навигационна връзка между два плъзгача, използвайки допълнителен идентификатор и клас. При царевичните черупки параметърът има нулева стойност.
• prevArrow – позволява ви да промените външния вид на стандартната стрелка за навигация, която върви нагоре по предния слайд.
• nextArrow – подобна на функцията на предишния параметър, но действа като стрелка, която придвижва слайда напред.
• centerMode – фиксира текущия слайд като център на контейнера на бащата, започвайки с параметъра за включване.
• centerPadding – когато слайдът на потока се показва в централния режим (предния параметър), той задава вътрешна подложка за този слайд, което визуално позволява слайдът на потока да бъде увеличен.
• cssEase - предоставя анимация за смесване на картини, която може да бъде плавна или рязка. Извежда стандартната стойност "лекота".
• customPaging – позволява ви да вмъкнете персонализиран шаблон в изгледа на плъзгача.
• точки – свързва джъмперните точки и остава в пералната станция.
• draggable - дава възможност за плъзгащи се слайдове при стискане на мечката. След това, ако преместите курсора на мишката върху плъзгача, стиснете го и го преместете, слайдът ще се превключи към напредващия.
• избледняване – създава ефект на избледняване на слайда по време на смесване, анимационен ефект.
• focusOnSelect – фокусира задачите върху плъзгача.
• облекчаване – позволява ви да зададете специален режим на анимация, когато изображенията се превключват.
• edgeFriction – вибрира смесването на слайдовете върху останалия елемент. Това е особено вярно, защото плъзгачът не се върти.
• безкрайно – повтаря слайдшоуто. Това означава, че когато ремиксирате останалите снимки от слайдшоуто, то ще започне да се появява.
• initialSlide – показва изображението, от което ще започне слайдшоуто. След това плъзгачът за стартиране избира първото изображение.
• lazyLoad – позволява ви да зададете режима за зареждане на следващите слайдове. Има само 2 стойности, налични за персонализиране: „ondemand“ и „progressive“, а останалите стойности са за персонализиране.
• pauseOnHover – поставя на пауза превъртането на слайдовете, когато курсорът на мишката се движи над тялото на плъзгача. Това е така, защото е посочено автоматично смесване на слайдовете.
• pauseOnDotsHover - поставя на пауза превъртането на слайдове, когато курсорът на мишката се движи над джъмпери на точки. Това е така, защото е посочено автоматично смесване на слайдовете.
• respondTo – задейства реакцията на промяна на ширината на прозореца на браузъра. Налични са три стойности: "прозорец", "плъзгач" или "мин".
• отзивчив – позволява ви да адаптирате настройките на плъзгача към ширината на екрана. Тя се различава от предишната корекция по това, че границите на ширината са присвоени на точни стойности на пикселите. Vikorist за адаптивно оформление за мобилни устройства.
• slidesToShow – позволява ви да зададете броя на снимките, които да се показват във видимата област. Първо се показва един слайд, а други стойности могат да се променят.
• slidesToScroll – информира плъзгача колко изображения трябва да бъдат сменени при превключване.
• скорост – фиксира скоростта, която кара слайдовете да се смесват.
• variableWidth – адаптира ширината на контейнерите на плъзгача към ширината на изображението на кожата, което се показва.

UPD: Опитах се да създам слайдер за този урок и се оказа, че не е много добър.
Ще добавя още.

1. Разгледайте хранилището тук https://github.com/kenwheeler/slick
2. Във файла index.html, преди този, който се отваря, добавете стилове на слайдера:

Преди затваряне включваме скриптове

Този плъзгач ще изисква шрифтове. Папката с шрифтове от папката на слайдера трябва да бъде поставена в папката css на проекта.
И в папката на слайдера трябва да знаете малкия ajax-loader.gif и във файла slick-theme.css да напишете пътя до новия

3. Сега на дивата на обвивката на слайдера е присвоен клас, например множество елементи
И във файла script.js записваме кода

$(документ).готов(функция())(
$(".multiple-items").slick((
автоматично пускане: невярно,
скорост на автоматично пускане: 6000,
стрелки: вярно,
безкрайно: вярно,
точки: вярно,
CenterMode: вярно,
slidesToShow: 3,
slidesToScroll: 1
});
});

4. Плъзгачът вече работи. Оста само на стрелките не се вижда, защото зад границите на плъзгача има воня, а ширината на плъзгача покрива целия екран. Стрелките се намират във файла slick-theme.css и входовете се променят така, че стрелките да са разположени в средата на плъзгача, а не в средата.

5. Добре. Сега, по мое мнение, централният слайд на плъзгача е виновен, че е разрушителен.
напишете това, което е достатъчно да напишете в кода

$(".среда").slick((
CenterMode: вярно,
//Центрирайте слайда на потока
centerPadding: "50px",
// малко по-прецизен слайд
slidesToShow: 3
//видими 3 слайда за преглед
});

За да увеличите размера на централния плъзгач. В действителност този метод не работи
Подобрен централен слайд със стил
.slick-center(
цвят на фона: #8cc63f;
трансформиране: мащаб (1.3);
}

Здравейте на всички и днес ви разказвам за един много готин и прост слайдер – гладък.

Отидете на сайта http://kenwheeler.github.io/slick/Там можете да намерите много приложения на плъзгащия се робот. Този плъзгач всъщност има много различни ефекти и също така се превърта с мишката. Tobto. Можете да щракнете върху който и да е елемент в плъзгача с левия бутон на мишката и с помощта на мишката да превъртите плъзгача назад с лява или дясна ръка. Тази функция не е напълно полезна за компютри, но за смартфони и таблети – точно така!

Така че, за да го свържете, изтеглете файловете от този сайт. Сега можем да създадем HTML и да включим необходимите компоненти, използвайки jquery, защото... Плъзгачът vikory съдържа тази библиотека за своята работа.

вашето съдържание
вашето съдържание
вашето съдържание

Свържете стилове

Активирам скриптове

За да инициализирате плъзгача, напишете следното в тага на скрипта:

$(".вашият-клас").slick((
име на настройка: стойност на настройка
});
});

След като бъде завършен, вашият html файл ще изглежда по следния начин:

хлъзгав

вашето съдържание
вашето съдържание
вашето съдържание

$(документ).готов(функция())(
$(".вашият-клас").slick((
име на настройка: стойност на настройка
});
});

Този плъзгач има редица настройки, които можете да зададете сами. Можете да намерите всички тях на същия сайт в долната част на страницата в таблицата. Задайте техните инструкции за инициализация в обекта.

$(document).ready(function())( $(".your-class").slick(( autoplay: true; )); ));

На чиито задници им беше казано, че могат автоматично да изгорят слайдовете.

Освен това, както можете да видите, слайдерът е много лесен за инсталиране и конфигуриране, но ви позволява да правите страхотни речи. Благодаря за уважението и към шведа!

слик - по-цялостно решение на функционалността на въртележката, в различни проявления. Могат да се видят/получат демонстрации, типични опции и публикации.

Изпратете вашата кандидатура

Основната конфигурация на slick включва редица скриптове, редица стилове и прост шрифт. Използвам съкратената версия:

• slick.min.js (минимизиране)
• slick.css (+ стиловете могат да се почистват)
• slick-theme.css (+ стиловете могат да се почистват)

Стиловете, за чантата могат да се комбинират в едно.
Заменям гладкия шрифт с по-големия FontAwesome

Базов въртележка Блок за повторение

Основната функционалност на въртележката се задава от div class="multiple-items". div class="carousel" е необходим само за дефиниране на записите на въртележката.

Скрипт за инициализация на скрипт

$(document).ready(function() ( $(".multiple-items").slick(( //безкрайно: вярно, //автоматично пускане при превъртане: вярно, slidesToShow: 3, slidesToScroll: 3 )); ) );

Slick-slider (ширина: 100%; float: ляво;).slick-slide (курсор: показалец;).multiple-items .slick-slide (марж: 0 15px;).carousel (padding: 0 3%; float: left;width:100%;box-sizing:border-box;) /* за продукти на woocommerce */ .carousel .woocommerce ul.products li.product (марж: 1em 0 1,992em 0; ширина: 100%;)

Въртележка за продукти на woocommerce

Актуализирана версия

Няколко минути след показване на продукти за въртележката (! Не е универсално решение, различните опции за оформление може да изглеждат различно):

При използване на въртележки скриптове възникват изкривявания на оформлението. Можем да създадем стилове на кочан, които подрязват въртележката в рамките на оформлението на потока:

Множество елементи (дисплей: flex !important; flex-wrap: wrap; margin-bottom: 25px;).multiple-items img ( -moz-backface-visibility: видим; -webkit-backface-visibility: видим; backface-visibility : видим;) .slick-list (поле: 0 -1px 0 0 !important; padding: 0 1px 0 0 !important; width: 100%;) .slick-track (border: solid #e9eaec; border-width: 0 0 0 1px; дисплей: flex !important; padding-bottom: .1rem;) .carousel .product ( border: solid #e9eaec; border-width: 1px 1px 1px 0; background: #fff; : none, text-align: център; позиция: марж-долу: -.1rem;

Power backface за изображението чрез посочване, защото Ако искате да лишите скрити тогава, когато пренавивате вонята на етикетите в коридора.

Адаптивност на въртележка

Скриптът може да бъде конфигуриран за различни размери на екрана. За тази цел в настройките се задават параметрите за реагиране

Отзивчив: [ ( точка на прекъсване: 1280, настройки: ( slidesToShow: 4, slidesToScroll: 4, ) ), ( точка на прекъсване: 1024, настройки: ( slidesToShow: 3, slidesToScroll: 3, ) ) ( ( точка на прекъсване: : 2, slidesToScroll: 2 ) ), ( точка на прекъсване: 480, настройки: ( slidesToShow: 1, slidesToScroll: 1 ) ) ]

Или просто го включете отделно - настройки: „unslick“

Плъзгащ плъзгач

През останалото време изграждам основния слайдер на базата на слик. Това не е голям проблем - когато се щракне върху страницата, всички слайдове се показват за няколко секунди и след това се сгъват. Маскирах го така:

Всичко освен един слайд е невидимо:

Slick-track > div:nth-child(2) img (дисплей: блок !important;) #index-slider img (дисплей: няма;)

И когато страницата бъде привлечена, ще се чуе нещо друго:

JQuery(document).ready(function())( jQuery("#index-slider img").css("display", "block"); ));

Подобряване на слайдове

Slick добавя друга полезна функция, lazyload(). Трябва само да добавите мощността на lazyLoad: 'ondemand' към скрипта. Променям предния план на изображението:

Или можете също да го кажете така:

">

И за да станат слайдовете веднага завладяващи, е необходимо да запишете мощността lazyLoad: 'progressive'

Стандартното изображение не работи напълно правилно, препоръчвам да проверите връзката с lazyload.

Мобилна версия на слайдера
Можете да получите повече от мобилното устройство. версия, височината на плъзгача, което ще накара краищата на изображението да се появят и изображението ще бъде по-голямо:

@медиен екран и (max-device-width: 480px) ( #index-slider, .hotel-photos (height: 200px;).slick-list, .slick-track (height: 100%;) #index-slider img , .hotel-photos img (височина: 100%; напасване на обект: корица;) )

обектно прилягане: покритие; - Мощен CSS 3, поддържан от повечето браузъри

Галерия

Наскоро в един от сайтовете спечелих уважение към Slick vikoristan в галерията. Особеността е, че изображенията в галерията се простират до краищата на екрана (една миля от сайта на целия екран).

За да реализирате това, трябва да поставите плъзгач (#index-slider) върху контейнера (.s2) и да добавите следните стилове:

S2 (препълване: скрито; показване: блокиране;) #index-slider (максимална ширина: 1000px; поле: 0 автоматично;) .s2 .slick-list (препълване: видимо;) #index-slider .slick-slide img ( максимална ширина: 800 пиксела; поле: 0 автоматично;)

или още по-просто:

За да създадете такава галерия, трябва само да въведете 2 стила:

#index-slider (max-width: 1280px; margin: 0 auto;) #index-slider .slick-list (overflow: visible;)

лаптопи