<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Слайдер Slick.

Слайдер Slick.

Привет всем и сегодня я расскажу про очень классный, а главное простой слайдер - slick.

Зайдите на сайт http://kenwheeler.github.io/slick/ Там вы сможете найти очень много примеров работы слайдера slick. У данного слайдера правда очень много самых разных эффектов и, также, есть прокрутка мышкой. Т.е. вы можете нажать на какой-нибудь элемент в слайдере левой кнопкой мышки и, удерживая ее, перемотать слайдер влево или вправо. Эта функция не совсем полезна для компьютеров, но на смартфонах и планшетах - самое то!

Итак, чтоб его подключить, скачайте файлы с сайта, данного выше. Теперь создадим html и подключим необходимые компоненты, в частности jquery, т.к. слайдер использует эту библиотеку для своей работы.

<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>

Подключите стили

<link rel="stylesheet" href="slick/slick.css"/>

И подключите скрипты

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="slick/slick.min.js"></script>

Чтобы инициализировать слайдер, в теге script пропишите следующее:

$(document).ready(function(){
  $('.your-class').slick({
   setting-name: setting-value
  });
});

В конечном итоге ваш html файл будет выглядеть примерно так:

<html>
<head>
<title>Slick</title>
  <link rel="stylesheet" href="slick/slick.css"/>
</head>
<body>

  <div class="your-class">
   <div>your content</div>
   <div>your content</div>
   <div>your content</div>
  </div>

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="slick/slick.min.js"></script>

  <script>
   $(document).ready(function(){
    $('.your-class').slick({
     setting-name: setting-value
    });
   });
  </script>

</body>
</html>

У данного слайдера немало установок, которые вы можете задать сами. Найти их все вы можете все на том же сайте внизу страницы в табличке. Задавать их стоит при инициализации в объекте.

$(document).ready(function(){   $('.your-class').slick({    autoplay: true;   }); });

В данном примере мы указали, что стоит автоматически перелистывать слайды.

Итак, как вы можете видеть, слайдер очень прост в установке и настройке, но позволяет делать по-правде шикарные вещи. Спасибо за внимание и до скорого!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (5):

irin irin 03.07.2014 01:05:15

Простите, а что означает запись <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>? Почему двойной слэш? В скачанной на указанном сайте папке нет таких файлов.

Ответить

tikkiwiki tikkiwiki 07.07.2014 09:53:54

Почему двойной слэш? Потому, что так принято вообще-то. Я перешел по адресу, и там есть файл jquery-1.11.0.min.js который содержит в себе код. А, сама надпись означает, что мы подключаем удаленную библиотеку jQuery.

Ответить

irin irin 08.07.2014 00:10:34

Я думала что должно быть http:// и далее название файла, получается что http можно опустить. Спасибо за ответ

Ответить

Jo-jo Jo-jo 06.11.2016 21:41:36

Вы очень плохо отвечаете на поставленные вопросы. Не в первый раз замечаю.

Ответить

novichok55 novichok55 28.09.2015 23:50:43

Здравствуйте! У меня проблема с этой каруселью... Я новичок и в скриптах мало еще разобрался! делаю сайт по шаблону в котором много разных скриптов... когда вставляю весь дистрибутив slick на странице возникают конфликты с jquery.contentcarousel.js .... Помогите разобраться! Спасибо....

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.