qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Слайдер картинок на Jquery

Слайдер картинок на Jquery
Просмотров: 1249  Скачан: 189 раз  Комментариев в теме: 0

Отличный слайдер картинок на Jquery для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки Play и Stop (которые запускают слайд-шоу и останавливают его).

Шаг 1 - создание разметки

 

HTML

<div class="custom-wrap" id="default">
    <div id="slider1" class="slider">
        <div class="slider-box">
            <a href="#"><img src="images/foto/1.jpg" alt="" class="slider-item" /></a>
            <a href="#"><img src="images/foto/2.jpg" alt="" class="slider-item" /></a>
            <a href="#"><img src="images/foto/3.jpg" alt="" class="slider-item" /></a>
            <a href="#"><img src="images/foto/4.jpg" alt="" class="slider-item" /></a>
            <a href="#"><img src="images/foto/5.jpg" alt="" class="slider-item" /></a>
        </div>
        <div class="slider-control">
            <a href="#" class="slider-play"></a>
            <a href="#" class="slider-stop"></a>
        </div>
        <div class="slider-nav">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
        <a href="#" class="slider-arrow slider-prev"></a>
        <a href="#" class="slider-arrow slider-next"></a>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.easing.compatibility.js"></script>
<script type="text/javascript" src="js/jquery.slider.js"></script>
<script type="text/javascript">
$(function () {
    $("#slider1").slider({
        speed: 700,
        width: 600,
        height: 400,
        autoPlay: true
    });
});
</script>
Материалы по теме:

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carou...

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....
Интересные публикации:

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Шаблон EnvisionШаблон Envision

Качественный HTML шаблон Envision, на главной странице располагается красивый слайдер, есть галерея, контактная форма, табы, набор кнопок......

LibertyLiberty

Универсальный html шаблон Liberty, созданный с уклоном на интерьер, на главной странице располагается адаптированы слайдер с комментариями к изображен...

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....
  • Текущий 1.89/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.9/5( Голосов 9 )

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

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить