Главная Тарифы МТС

Делаем хороший слайдер на jQuery своими руками. Как сделать слайдер на jQuery

Если вам нужно добавить на свой сайт качественный JQuery-слайдер изображений, то в этой статье вы найдете описание нужных плагинов. Несмотря на то, что JQuery существенно упростил работу с JavaScript , мы по-прежнему нуждаемся в плагинах, чтобы ускорить процесс создания веб-дизайна.

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

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

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

JQuery-слайдеры изображений Jssor Responsive Slider

Недавно я наткнулась на этот функциональный JQuery -слайдер, и смогла воочию убедиться, что он справляется со своей работой очень хорошо. Он содержит в себе безграничные возможности, которые можно расширить за счет открытого исходного кода слайдера:

Адаптивный дизайн;
Более 15 параметров настройки;
Более 15 эффектов смены изображения;
Галерея изображений, карусели, поддержка полноэкранного размера;
Вертикальный ротатор баннеров, список слайдов;
Поддержка видео.

Демо | Скачать

PgwSlider — адаптивный слайдер на основе JQuery / Zepto

Единственной задачей данного плагина является демонстрация слайдов изображений. Он очень компактный, так как размер JQuery-файлов составляет всего 2,5 КБ, что позволяет подгружать его действительно быстро:

Адаптивный макет;
SEO-оптимизация;
Поддержка разными браузерами;
Простые переходы изображений;
Размер архива всего 2,5 КБ.

Демо | Скачать

Jquery Vertical News Slider

Гибкий и полезный JQuery -слайдер, предназначенный для новостных ресурсов с перечнем публикаций с левой стороны и выводом изображения справа:

Адаптивный дизайн;
Вертикальная колонка переключения новостей;
Расширенные заголовки.

Демо | Скачать

Wallop Slider

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

Адаптивный макет;
Простой дизайн;
Различные варианты смены слайдов;
Минимальный код JavaScript ;
Размер всего 3KБ.

Демо | Скачать

Flat-style Polaroid gallery

Галерея в стиле разбросанных на столе документов с гибким макетом и красивым дизайном должна заинтересовать многих из вас. Больше подходит для планшетов и больших дисплеев:

Адаптивный слайдер;
Плоский дизайн;
Случайная смена слайдов;
Полный доступ к исходному коду.

Демо | Скачать

A-Slider

Демо | Скачать

HiSlider – HTML5, jQuery и WordPress слайдер изображений

HiSlider представил новый бесплатный плагин JQuery-слайдера , с помощью которого можно создавать разнообразные галереи изображений с фантастическим переходами:

Адаптивный слайдер;
Не требует знания программирования;
Несколько удивительных шаблонов и скинов;
Красивые эффекты переходов;
Поддержка разных платформ;
Совместимость с WordPress, Joomla, Drupal;
Возможность отображения контента разных типов: изображений, видео YouTube и видео Vimeo;
Гибкая настройка;
Полезные дополнительные функции;
Неограниченный объем отображаемого контента.

Демо |Скачать

Wow Slider

WOW Slider — это адаптивный JQuery-слайдер изображений с удивительными визуальными эффектами (домино, поворот, размытие, переворот и вспышка, вылет, жалюзи ) и профессиональными шаблонами.

WOW Slider поставляется вместе с мастером установки, что позволяет создавать фантастические слайдеры за считанные секунды без необходимости разбираться в коде и редактировать изображения. Также доступны для скачивания версии плагина под Joomla и WordPress :

Полностью адаптивный;
Поддержка всех браузеров и всех типов устройств;
Поддержка сенсорных устройств;
Простая установка на WordPress ;
Гибкость в настройке;
SEO -оптимизированный.

Демо |Скачать

Nivo Slider – бесплатный jQuery-плагин

Nivo Slider известен всему миру как самый красивый и простой в использовании слайдер изображений. Плагин Nivo Slider является бесплатным и выпускается по лицензии MIT :

Требуется JQuery 1.7 и выше;
Красивые эффекты перехода;
Простой и гибкий в настройке;
Компактный и адаптивный;
Открытый код;
Мощный и простой;
Несколько различных шаблонов;
Автоматическая обрезка изображения.

Демо |Скачать

Простой JQuery слайдер с технической документацией

Идея была навеяна слайдерами от Apple , в которых несколько маленьких элементов могут вылетать с различными эффектами анимации. Разработчики попытались воплотить эту концепцию с учетом минимальных требований для создания простого дизайна интернет-магазина, в котором «вылетающие » элементы представляют собой различные категории:

Адаптивный макет;
Минималистичный дизайн;
Различные эффекты выпадения и смены слайдов.

Демо |Скачать

Полноразмерный JQuery-слайдер изображений

Очень простой слайдер, занимающий 100% ширины страницы и подстраивающийся под размеры экранов мобильных устройств. Он работает с CSS переходами, а изображения «укладываются» вместе с анкорами. Анкор может быть заменен или удален, если вы не хотите привязывать к изображению ссылку.

При установке слайдер разворачивается на 100% ширины экрана. Также он может автоматически уменьшает размер изображений слайдов:

Адаптивный JQuery -слайдер;
Полноразмерный;
Минималистичный дизайн.

Демо |Скачать

Elastic Content Slider + пособие

Elastic Content Slider автоматически регулирует ширину и высоту в зависимости от размеров родительского элемента. Это простой JQuery-слайдер . Он состоит из слайд-зоны вверху, и панели навигационных вкладок в нижней части. Слайдер подстраивает свою ширину и высоту в соответствии с размерами родительского контейнера.

При просмотре на маленьких по диагонали экранах вкладки навигации превращаются в маленькие иконки:

Адаптивный дизайн;
Прокрутка кликом мыши.

Демо |Скачать

Free 3D Stack Slider

Экспериментальный слайдер, пролистывающий изображения в 3D . Два стека напоминают стопки бумаги, из которых при пролистывании изображения выводятся в центр слайдера:

Адаптивный дизайн;
Flip -переход;
3D -эффекты.

Демо |Скачать

Fullscreen Slit Slider на основе JQuery и CSS3 + руководство

Из руководства вы узнаете, как создать слайдер с изюминкой: идея заключается в том, чтобы «разрезать » и вывести в таком виде текущий слайд, в то время, когда вы открываете следующее или предыдущее изображение. Используя JQuery и CSS -анимацию, мы можем создавать уникальные эффекты переходов:

Адаптивный дизайн;
Сплит-переход;
Полноэкранный слайдер.

Демо |Скачать

Unislider – очень маленький JQuery-слайдер

Никаких ненужных наворотов и разметки, размер менее 3КБ. Используйте любой HTML-код для своих слайдов, расширяйте его с помощью CSS . Все, что связано с Unslider , размещается на GitHub :

Поддержка различными браузерами;
Поддержка клавиатуры;
Регулировка по высоте;
Адаптивный дизайн;
Поддержка сенсорного ввода.

Демо | Скачать

Minimal Responsive Slides

Простой и компактный плагин (размер всего 1 Кб ), который создает адаптивный слайдер, используя элементы внутри контейнера. ResponsiveSLides.js работает с большим количеством браузеров, включая все версии IE от IE6 и выше:

Полностью адаптивный;
Размер 1 КБ;
CSS3 переходы с возможностью запуска через JavaScript ;
Простая разметка с использованием маркированного списка;
Возможность настройки эффектов переходов и длительности просмотра одного слайда;
Поддерживает возможность создания нескольких слайд-шоу;
Автоматическая и ручная прокрутка.

Демо |Скачать

Camera — бесплатный JQuery слайдер

Camera — плагин с множеством эффектов переходов, адаптивным макетом. Прост в настройке, поддерживается мобильными устройствами:

Полностью адаптивный дизайн;
Подписи;
Возможность добавления видео;
33 различных цвета иконок.

Демо |Качать

SlidesJS, адаптивный JQuery плагин

SlidesJS — это адаптивный плагин для JQuery (1.7.1 и выше ) с поддержкой сенсорных устройств и CSS3-переходов . Поэкспериментируйте с ним, попробуйте несколько готовых примеров, которые помогут вам разобраться, как добавить SlidesJS в свой проект:

Адаптивный дизайн;
CSS3 -переходы;
Поддержка сенсорных устройств;
Прост в настройке.

Демо | Скачать

BX Jquery Slider

Это бесплатный адаптивный JQuery слайдер:

Полностью адаптивный — подстраивается под любое устройство;
Горизонтальная, вертикальная смена слайдов;
Слайды могут содержать изображения, видео или HTML -контент;
Расширенная поддержка сенсорных устройств;
Использование CSS -переходов для слайд-анимации (аппаратное ускорение );
API обратных вызовов и полностью публичные методы;
Небольшой размер файла;
Прост в реализации.

Демо |Скачать

FlexSlider 2

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

Демо | Скачать

Galleria — адаптивная фотогалерея на основе JavaScript

Galleria используется на миллионах сайтов для создания галереи изображений в высоком качестве. Количество позитивных отзывов о ее работе просто зашкаливает:

Полностью бесплатный;
Режим полноэкранного просмотра;
100% адаптивный;
Не требуется опыта программирования;
Поддержка iPhone , IPad и других сенсорных устройств;
Flickr , Vimeo , YouTube и многое другое;
Несколько тем.

Демо | Скачать

Blueberry — простой адаптивный JQuery-слайдер изображений

Представляю вам JQuery-слайдер изображений, написанный специально для адаптивного веб-дизайна. Blueberry — это экспериментальный плагин слайдера изображений с открытым исходным кодом, который был написан специально для работы с адаптивными шаблонами:

Минимальный дизайн;
Адаптивный макет;
Презентации.

Демо | Скачать

JQuery Popeye 2.1

Используются стандартные элементы первой версии программы: слайдер скрывается в левую сторону и всплывает направо. Те же элементы навигации и подписи, всплывающие при наведении курсора мыши:

Адаптивный дизайн;
Поддержка подписей;
Режим слайд-шоу.

Демо | Скачать

Уже несколько раз меня просили рассказать, как сделать слайдер на JS, а я все не рассказывал. Главная причина - потому что не знал, как.

В какой-то момент я понял, что слайдер иногда проще написать, чем искать готовый. Поэтому хочу предложить вам урок по созданию такого слайдера. Его легко сделать своими руками, а код занимает меньше 2 Кб.

Задача

Создать слайдер изображений. Размеры роли не играют, только изображения должны быть одинакового размера. Перед подключением скрипта не забудьте подключить jQuery:

Создание слайдера

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

Код слайдера будет таким:

Для управления слайдером нужен такой код:

$(document).ready(function() { $(".slider").each(function () { // обрабатываем каждый слайдер var obj = $(this); $(obj).append(""); $(obj).find("li").each(function () { $(obj).find(".nav").append(""); // добавляем блок навигации $(this).addClass("slider"+$(this).index()); }); $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню }); }); function sliderJS (obj, sl) { // slider function var ul = $(sl).find("ul"); // находим блок var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока var step = $(bl).width(); // ширина объекта $(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки } $(document).on("click", ".slider .nav span", function() { // slider click navigate var sl = $(this).closest(".slider"); // находим, в каком блоке был клик $(sl).find("span").removeClass("on"); // убираем активный элемент $(this).addClass("on"); // делаем активным текущий var obj = $(this).attr("rel"); // узнаем его номер sliderJS(obj, sl); // слайдим return false; });

А стили для слайдера нужны такие:

.slider { z-index: 9; width: 700px; height: 290px; overflow: hidden; margin: 0 0 7px; position: relative; } .slider ul, .slider li { padding: 0; margin: 0; list-style-type: none; } .slider ul { width: 9999px; } .slider ul li { list-style-type: none; float: left; width: 700px; height: 290px; } .slider .nav { position: absolute; left: 15px; bottom: 12px; } .slider .nav span { opacity: 0.9; background: #fff; margin: 0 8px 0 0; width: 16px; height: 16px; border-radius: 8px; cursor: pointer; overflow: hidden; display: block; float: left; box-shadow: 0 1px 2px #000; } .slider .nav span.on { background: #2e9419; }

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

Сегодня мы рассмотрим как можно сделать слайдер на jQuery своими руками.

Слайдер (или как некоторые его называют Ротатор) - это блок на сайте, который состоит из набора картинок со ссылками (и возможно текстом), которые время от времени меняют друг друга.

Итак. Для начала нам нужно сделать блок, который будет содержать все картинки (назовём его viewport, так сказать «область видимости слайдера»).
В него положим ненумерованный список (ul) для того, чтобы можно было удобно хранить все слайды в одном месте (в принципе можно использовать любой блочный контейнер с поддержкой внутренних элементов).
Ну и соответсвенно сами слайды, которые будут находится в слайдер на jQuery.

HTML. Слайдер на jQuery

Вот такой вот HTML должен получится:

Slide 1
Slide 2
Slide 3

CSS. Слайдер на jQuery

Сразу пропишем CSS, чтобы свёрстанный HTML правильно работал.
Итак:
1) нам нужно сделать так, чтобы viewport показывал только нужный в данный момент контент, а остальные слайды были скрыты
2) чтобы контейнер для слайдов (ul, который лежит внутри viewport) мог спокойно двигаться влево и вправо
3) чтобы слайды (которые у нас сделаны в виде элементов списка располагались друг за другом слева направо).

Вот CSS, с ним всё просто: overflow:hidden для vieport, position: absolute для ul и float: left для li.

Viewport{ width: 300px; height: 100px; overflow: hidden; position: relative; } .slidewrapper{ position: absolute; left: 0; top: 0; height: 100px; margin: 0; padding: 0; } .slide{ width: 300px; height: 100px; float: left; list-style: none; margin: 0; padding: 0; background: #ff0000; } .second{ background: #00ff00; } .third{ background: #0000ff; }

Для примера выбарны размеры viewport и слайдов 300х100 пикселей (но они обязательно должны совпадать у vieport и слайда). Классы first, second и third - используются только для того, чтобы задать цвета слайдов для наглядности, в вашей реализации этих классов может и не быть.

JS. Слайдер на jQuery

Теперь перейдём к jQuery коду, который сам по себе также не представляет из себя ничего сверх-сложного.
Нам нужно сделать так, чтобы слайды пролистывались с определённым периодом времени (javascript setInterval), и чтобы при наведении на слайд, движение приостанавливалось (чтобы человек мог прочитать содержимое слайда).

Вот и получаем такой вот jQuery код:

Var slideWidth=300; var sliderTimer; $(function(){ $(".slidewrapper").width($(".slidewrapper").children().size()*slideWidth); sliderTimer=setInterval(nextSlide,1000); $(".viewport").hover(function(){ clearInterval(sliderTimer); },function(){ sliderTimer=setInterval(nextSlide,1000); }); }); function nextSlide(){ var currentSlide=parseInt($(".slidewrapper").data("current")); currentSlide++; if(currentSlide>=$(".slidewrapper").children().size()) { currentSlide=0; } $(".slidewrapper").animate({left: -currentSlide*slideWidth},300).data("current",currentSlide); }

По порядку:
1) объявляем переменную = длинне слайда
2) объявляем переменную-хендлер таймера (который будет отсчитывать период смены слайдов)
3) когда страница загрузится запускаем таймер и привязываем действия на наведение мышки на слайд (чтобы приостановить движение слайдов под мышкой)
4) ставим длинну ul-контейнера = длинне слайда*на количесвто слайдов (чтобы слайды не перекидывались на 2-рую строку).
5) пишем функцию, которая и делает смену слайдов (проверяем где сейчас находимся - на каком слайде, при помощи аттрибута data-current ul-контейнера; увеличиваем текущую позицию; проверяем, чтобы не вылезала за рамки всех слайдов; смещаем слайдер-контейнер влево на нужное количество пикселей).

Мы разработали рабочий вариант слайдер на jQuery, который работает, и можно легко применить в работе над сайтом.
На последок код выложен на jsfiddle.net, где можно поклацать и поиграться.
http://jsfiddle.net/FUxWc/

Если будут вопросы - комменты открыты, ответим, поможем, подскажем.

Нужен простой слайдер с автоматической прокруткой. Приступим...

Описание работы слайдера.

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

Красной рамкой показана видимая часть слайдера.

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

Когда слайдер доходит до конца, на место последнего слайда мгновенно помещается его копия из начала слайдера. Затем цикл снова повторяется. Таким образом создается иллюзия бесконечного слайдера.

HTML разметка

Для начала сделаем простой слайдер с автоматической прокруткой. Для его работы нужно два контейнера. Первый будет задавать размер видимой области слайдера, а второй нужен для размещения в нем слайдеров. Разметка слайдера будет иметь следующий вид:

Стили слайдера .slider-box{ width : 320px ; height : 210px ; overflow : hidden ; } .slider{ position : relative ; width : 10000px ; height : 210px ; } .slider img{ float : left ; z-index : 0 ; }

Контейнер.slider-box задает размеры слайдера. С помощью свойства overflow:hidden скрываются все элементы которые не входят в область внутри элемента.

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

Слайды выравниваются с помощью свойства float:left.

Ниже показано схематичное расположение блоков слайдера.

Скрипт

Движение слайдов будет осуществляться с помощью плавного изменения свойства margin-left контейнера.slider.

$(function () { var width= $(".slider-box" ) .width () ; // Ширина слайдера. interval = 4000 ; // Интервал смены слайдов. $(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Копия последнего слайда помещается в начало. $() .eq (1 ) .clone () .appendTo (".slider" ) ; // Копия первого слайда помещается в конец. // Контейнер.slider сдвигается влево на ширину одного слайда. setInterval("animation()" , interval) ; // Запускается функция animation(), выполняющая смену слайдов. } ) ; function animation() { var margin = parseInt($(".slider" ) .css ("marginLeft" ) ) ; // Текущее смещение блока.slider width= $(".slider-box" ) .width () , // Ширина слайдера. slidersAmount= $(".slider" ) .children () .length ; // Количество слайдов в слайдере. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Если текущий слайд не последний, { margin= margin- width; // то значение margin уменьшается на ширину слайда. } else { // Если показан последний слайд, $(".slider" ) .css ("margin-left" , - width) ; // то блок.slider возвращается в начальное положение, margin=- width* 2 ; } $(".slider" ) .animate ({ marginLeft: margin} , 1000 ) ; // Блок.slider смещается влево на 1 слайд. } ;

В итоге получился простой слайдер с бесконечной автоматической прокруткой.

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

Какие виды слайдеров бывают и где они могут понадобится?

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

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

В основном заказчики просят внедрять на галереи типа «Карусель». Это удобный инструмент для просмотра изображений в крупном размере с возможностью переключения юзером слайдов вперед и назад. При этом сами картинки обычно переключаются автоматически через определенное время. такой механизм прозвали из-за того, что показ картинок повторяется по кругу.

На сегодняшний день при желании в интернете можно найти самые необычные и привлекательные плагины для просмотра набора фотографий.

Самостоятельная деятельность

Ну а теперь займемся созданием своего слайдера. На данном этапе обучения для его реализации я предлагаю вам использовать чистый . Это будет автоматический переключатель картинок по кругу.

Ниже я прикрепил программный код своего приложения. По ходу кода я оставлял для вас комментарии.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Автоматический переключатель изображений /*Описываю внешний вид каркаса, основы для будущего слайдера */ #slides{ position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; } /* Редактирую отображение картинок*/ img { width: auto; height: 390px; padding: 13px; } /*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */ li { text-align: center; } /*Описываю внешний вид самих слайдов */ .slide{ position: absolute; opacity: 0; top: 0px; left: 0px; height: 100%; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*При отображении объект становится видимым и выдвигается на передний план*/ .showing{ opacity: 1; z-index: 4; }

var MySlider = document.querySelectorAll("#slides .slide"); var currentPicture = 0; var IntervalForChange = setInterval(nextSlide,2700); function nextSlide(){ MySlider.className = "slide"; currentPicture = (currentPicture+1)%MySlider.length; MySlider.className = "slide showing"; }

Я надеюсь, что никаких проблем с кодом на css и html у вас не возникло. А вот работу скрипта я считаю нужным разобрать. Поэтому давайте перейдем к расшифровке написанного.

Итак, сначала при помощи метода querySelectorAll переменной MySlider я присваиваю список всех элементов в переделах указанных. Указывает это запись

document.querySelectorAll ("#slides .slide")

Таким образом, в MySlider хранится коллекция из четырех элементов.

Далее я задаю, с какого изображения начинать показ, присваивая переменной currentPicture нуль. После указываю, что смена слайдов происходит через 2,7 секунды и при этом должна быть вызвана функция обработки nextSlide .

Переходим к самой функции.

Изначально для текущего элемента списка я меняю описание классов, т.е. переписываю «slide showing » на «slide ». Следовательно, изображение становится невидимым.

Теперь определяю новый элемент коллекции, который будет отображаться на экране. Для этого я беру текущую позицию +1. Вы могли заметить, что я также использую деление с остатком (%) на количество имеющихся слайдов. Этот финт ушами необходим для того, чтобы запустить показ по новому кругу. Вот как это будет выглядеть буквально:

А вот теперь полученному элементу присваиваю описание классов «slide showing ». Как видите, все реализуется проще простого.

Спасибо за внимание. Не забывайте вступать в группу моих подписчиков, читать новые статьи и конечно же делиться ссылками на понравившиеся публикации с друзьями. Желаю удачи в изучении JavaScript. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 256 раз

Статьи по теме