Простая адаптивная галерейка
http://ruseller.com/css/images/demo.png
responsiveslides.js это легковесный jQuery плагин для создания простой адаптивной галереи. Размер библиотеки 1Kb.
Шаг 1. Подключить файлы

Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://forumstatic.ru/files/0014/4d/32/28177.js"></script>

Шаг 2. Готовим html код для галереи

Код:
<ul class="rslides">
  <li><img src="http://se.uploads.ru/qhdZt.jpg" alt=""></li>
  <li><img src="http://sa.uploads.ru/6h5nq.png" alt=""></li>
  <li><img src="http://se.uploads.ru/qhdZt.jpg" alt=""></li>
  <li><img src="http://sa.uploads.ru/6h5nq.png" alt=""></li>
</ul>

Шаг 3. Добавляем CSS

Код:
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 50%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 50%;
  border: 0;
  }

Шаг 4. Активируем слайдшоу

Код:
<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

Шаг 5. Настройки

$(".rslides").responsiveSlides({
  auto: true,             // Boolean: автоматическая прокрутка, true или false
  speed: 500,            // Integer: скорость в миллисекундах
  timeout: 4000,          // Integer: время между анимацией в миллисекундах
  pager: false,           // Boolean: показывать слайдовую навигацию, true или false
  nav: false,            // Boolean: показывать навигацию, true или false
  random: false,          // Boolean: случайный порядок слайдов, true или false
  pause: false,          // Boolean: пауза при наведении мыши, true или false
  pauseControls: true,    // Boolean: пауза при наведении мыши на элементы управления, true или false
  prevText: "Previous",  // String: текст для кнопки "предыдущий"
  nextText: "Next",      // String: текст для кнопки “следующий"
  maxwidth: "",          // Integer: минимальная ширина, в пикселях
  navContainer: "",       // Selector: контейнер для элементов управления, по умолчанию 'ul'
  manualControls: "",    // Selector: собственная навигация
  namespace: "rslides",   // String: сменить пространство имён
  before: function(){},   // Function: колбэк “до”
  after: function(){}     // Function: колбэк “после”
});

Источник урока: http://responsiveslides.com/
Перевел: Станислав Протасевич