<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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 .... Помогите разобраться! Спасибо....

Ответить

andr.kurmaev andr.kurmaev 03.09.2017 12:48:35

Здравствуйте миша вот ссылка на слайд с htmlacademy.ru https://up.htmlacademy.ru/htmlcss/16/resources/975#step26. Можно сделать автоматическую прокрутку слайдера, только я не знаю как? Подскажите!

Ответить

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