<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

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

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

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

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

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

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

Красивые и эффектные слайдеры на JQuery.

Красивые и эффектные слайдеры на JQuery.

Всем привет! Сегодня я хочу рассказать вам про слайдер на JQuery, да не один, а сразу несколько очень красивых и эффектных слайдеров разного типа.

Перейдите по ссылке:

http://www.jssor.com/demos/index.html

Здесь вы сразу можете увидеть работу слайдера. Ниже вы найдете все типы слайдеров, которых, кстати, очень даже немало. Там есть и слайдеры на всю ширину, и простые исчезающие слайдеры, слайдеры картинок, баннеров, карусель и очень интересный слайдер контента, который можно использовать для рекламы каких-то своих продуктов.

Выше, в меню, вы найдете кнопку Download, по которой можно скачать исходники.

А здесь вы можете найти инструкцию по работе с данной библиотекой:

http://www.jssor.com/development/index.html

Добавляем следующий код:

<!-- это работает одинаково со всеми версиями jquery от 1.x до 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
  jQuery(document).ready(function ($) {
   var options = { $AutoPlay: true };
   var jssor_slider1 = new $JssorSlider$('slider1_container', options);
  });
</script>

Здесь вы передаете опции и id вашего контейнера.

HTML код также несложен:

<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
  <div u="slides" style="cursor:move;position:absolute;overflow:hidden;left:0px;top:0px;width:600px;height:300px;">
   <div><img u="image" src="image1.jpg" /></div>
   <div><img u="image" src="image2.jpg" /></div>
  </div>
</div>

Это все, что вам нужно.

Более подробную информацию по установке и настройке слайдера вы можете найти все по той же ссылке выше. Документация очень качественная и понятная так что комментировать, как мне кажется, нет смысла.

Надеюсь, вам пригодится данная библиотека, и вы найдете слайдер, который вам нужен.

Спасибо за внимание и удачи!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Gorbunko Gorbunko 05.04.2015 12:17:38

Михаил, а код javascript писать в теге head или где? Заранее спасибо.

Ответить

An84Drew An84Drew 22.04.2015 20:59:26

Михаил, спасибо за рассмотрение данного слайдера. Установил один из вариантов у себя на сайте. Но столкнулся с одной из проблем - валидностью. Из-за использования почти в каждом теге атрибута "u": <img u="image" ... /> данный код не проходит валидность. Возможно ли устранить эту проблему, не внедряясь в дебри исходно кода слайдера?

Ответить

lesy lesy 03.11.2015 20:35:19

Спасибо большое, очень интересный сайт

Ответить

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