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

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

ОБСУЖДЕНИЕ

Слайдер на jquery

Слайдер в стиле Apple
Просмотров: 1687  Скачан: 181 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="cont">
    <div class="container">
        <div id="container_wide">
            <div class="product_container" id="product_browser">
                <a href="#"><img src="images/browser/Chrome.png"></a>
                <a href="#"><img src="images/browser/Safari.png"></a>
                <a href="#"><img src="images/browser/Firefox.png"></a>
                <a href="#"><img src="images/browser/IE.png"></a>
                <a href="#"><img src="images/browser/Maxthon.png"></a>
                <a href="#"><img src="images/browser/Opera.png"></a>
            </div>
            <div class="product_container" id="product_apple">
                <a href="#"><img src="images/apple/iMac.png"></a>
                <a href="#"><img src="images/apple/MacBook.png"></a>
                <a href="#"><img src="images/apple/MacMini.png"></a>
                <a href="#"><img src="images/apple/iPhone.png"></a>
                <a href="#"><img src="images/apple/Macpro.png"></a>
            </div>
            <div class="product_container" id="product_construction">
                <a href="#"><img src="images/construction/01.png"></a>
                <a href="#"><img src="images/construction/02.png"></a>
                <a href="#"><img src="images/construction/03.png"></a>
                <a href="#"><img src="images/construction/04.png"></a>
            </div>
             <div class="product_container" id="product_cake">
                <a href="#"><img src="images/cake/01.png"></a>
                <a href="#"><img src="images/cake/02.png"></a>
                <a href="#"><img src="images/cake/03.png"></a>
                <a href="#"><img src="images/cake/04.png"></a>
                <a href="#"><img src="images/cake/05.png"></a>
                <a href="#"><img src="images/cake/06.png"></a>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="nav">
        <a href="#" class="product_nav" id="nav_browser">Browser</a>
        <a href="#" class="product_nav" id="nav_apple">Apple</a>
        <a href="#" class="product_nav" id="nav_construction">Construction</a>
        <a href="#" class="product_nav" id="nav_cake">Cake</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.6.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
Материалы по теме:

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

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

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

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

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

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

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

Navigation SlaiderNavigation Slaider

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

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

Шаблон Desire Night ClubШаблон Desire Night Club

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

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

XMarket v1.1XMarket v1.1

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

Футер на cssФутер на css

Красивый и в тоже время довольно оригинальный футер на css, он же подвал сайта....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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