Як зробити слайдер за допомогою jquery, ротатор зображень на jquery

Слайдер, він же фотогалерея та просто ротатор картинок, можна зустріти майже на кожному сайті або блозі. Найчастіше, щоб вбудувати слайдер собі на сайт потрібно встановити плагін або скрипт, який би змінював потрібні нам картинки. Я ж пропоную Вам використовувати слайдер, який не обтяжить сайт великою кількістю непотрібного коду і Ви легко зможете його вбудувати. Почнемо.

Відберемо наприклад 7 картинок потрібного нам розміру (відкриваємо картинку програмою Adobe Photoshop вибираємо пункт Image -> Image Size і вводимо потрібну нам ширину і висоту картинки, далі вибираємо File -> Save for Web Devices і зберігаємо).

Наступним кроком закачайте Ваші картинки на сервер.

Виведемо блок із зображенням відібраних картинок і їх нумерований список над самим блоком:

Ви бачите що в нумерованому списку ми кожному елементу задали посилання на зображення в тій черговості, в якій нам це потрібно (все одно в який), навіщо це потрібно Ви прочитаєте далі.

Наступний код нам потрібно додати безпосередньо між тегами . :

Сенс наведеного вище коду полягає в тому, що в нумерованому списку ми забороняємо звичайну поведінку посилань і змушуємо їх працювати так як треба нам. А це означає, що при натисканні на будь-яку цифру, шлях до інформації, що відображається зображенні змінюється на той що прихований в цифрі. Ось і весь фокус

В принципі слайдер зображень готовий, але надамо йому стилів, щоб він виглядав ефектно. Для цього відкрийте свій файл з таблицями каскадних стилів - зазвичай style.css і в самому низу додайте наступні рядки:

Оптимізація підключення Google Maps, відключення непотрібних файлів стилів і шрифтів, отрисовка карти струму в разі наявності контейнера на сторінці

Сьогодні поділюся з Вами моїм скриптом, який я використовую для простої перевірки полів форм на заповненість перед відправкою їх на сервер, за допомогою jQuery (скрипт може перевіряти відразу кілька форм на сторінці)

Давненько, я нічого не писав про jQuery, все якось руки не доходили. Будемо вирішувати завдання по роботі з рядком товарів / послуг / статей, приховуючи останній елемент рядка при зміні ширини рядка з елементами

Хочу поділитися з Вами HTML розміткою секції head, яку я використовую для верстки сайтів

В даному уроці ми розглянемо 5 кросбраузерності, сучасних рішень CSS3, вельми полегшують верстку складних, креативних проектів. Зокрема розберемося як зробити прозорість, тінь, поворот, градієнт і інверсію елементів

Нарешті випала вільна хвилина і за Вашими проханнями я написав ще один, маленький скрипт для НЕ циклічного слайдера з горизонтальною прокруткою, без використання плагінів

Responsive design = чуйний дизайн = аксіома. Мінімальна історія розвитку веб дизайну: його шлях від фіксованого до рідкого і до чуйного (реагує, адаптивного, responsive) дизайну