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

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

ОБСУЖДЕНИЕ

Слайдер на jquery

Слайдер в стиле Apple
Просмотров: 1522  Скачан: 167 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

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

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Таблица тарифных плановТаблица тарифных планов

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

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

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

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....
Интересные публикации:

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

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

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Music v1.4.3Music v1.4.3

Music - это шаблон музыкального портала для wordpress с уникальным набором функций и настроек....

OblivionOblivion

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

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

Room 09 v1.4.0Room 09 v1.4.0

Room 09 - это довольно популярная тема для создания интернет магазинов, которая пользуется большим спросом среди разработчиков на WordPress....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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