RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Слайдер на jQuery
Просмотров: 984  Скачан: 185 раз  Комментариев в теме: 0

Простой слайдер для сайта «Featured Content Slider» с слайдшоу на jquery, в слайдере вы множите полноценно использовать текст, изображения.

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

 

HTML

<div id="page-wrap">
    <div class="slider-wrap">
        <div id="main-photo-slider" class="csw">
            <div class="panelContainer">
                <div class="panel" title="Panel 1">
                    <div class="wrapper">
                        <img src="images/tempphoto-1.jpg" alt="temp" />
                        <div class="photo-meta-data">Photo Credit: <a href="#">Kaustav Bhattacharya</a><br />
                            <span>"Free Tibet" Protest at the Olympic Torch Rally</span>
                        </div>
                    </div>
                </div>
                <div class="panel" title="Panel 2">
                    <div class="wrapper">
                        <img src="images/tempphoto-2.jpg" alt="temp" />
                        <div class="photo-meta-data">Chicago Bears at Seattle Seahawks<br />
                            <span>Fifth field goal, overtime win for the Seahawks</span>
                        </div>
                    </div>
                </div>
                <div class="panel" title="Panel 3">
                    <div class="wrapper">
                        <img src="images/tempphoto-3.jpg" alt="scotch egg" class="floatLeft"/>
                        <h1>How to Cook a Scotch Egg</h1>
                        <ul>
                            <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage,
                                then stick them in the coldest part of the fridge to firm up)</li>
                            <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, 
                                white pepper, salt and a tiny bit of maple syrup)</li>
                            <li>1/2 cup AP flour</li>
                            <li>1-2 eggs, beaten</li>
                            <li>3/4 cup panko-style bread crumbs</li>
                            <li>Vegetable oil for frying</li>
                        </ul>
                    </div>
                </div>
                <div class="panel" title="Panel 4">
                    <div class="wrapper">
                        <img src="images/tempphoto-4.jpg" alt="temp" />
                        <div class="photo-meta-data">A Poem by Shel Silverstein<br />
                            <span>Falling Up</span>
                        </div>
                    </div>
                </div>
                <div class="panel" title="Panel 5">
                    <div class="wrapper">
                        <img src="images/tempphoto-5.jpg" alt="temp" />
                        <div class="photo-meta-data">New Video on CSS-Tricks<br />
                            <span>Using Wufoo for Web Forms</span>
                        </div>
                    </div>
                </div>
                <div class="panel" title="Panel 6">
                    <div class="wrapper">
                        <h1>A Tale of Two Cities</h1>
                        <p><em>Charles Dickins</em></p>
                        <blockquote>
                        It was the best of times, it was the worst of times, it was the age of wisdom, 
                        it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, 
                        it was the season of Light, it was the season of Darkness, it was the spring of hope, 
                        it was the winter of despair, we had everything before us, we had nothing before us, 
                        we were all going direct to heaven, we were all going direct the other way - in short, 
                        the period was so far like the present period, that some of its noisiest authorities insisted on its being received, 
                        for good or for evil, in the superlative degree of comparison only.
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
        <a href="#1" class="cross-link active-thumb"><img src="images/thumb/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
        <div id="movers-row">
            <div><a href="#2" class="cross-link"><img src="images/thumb/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
            <div><a href="#3" class="cross-link"><img src="images/thumb/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
            <div><a href="#4" class="cross-link"><img src="images/thumb/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
            <div><a href="#5" class="cross-link"><img src="images/thumb/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
            <div><a href="#6" class="cross-link"><img src="images/thumb/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
        </div>
    </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.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.js"></script>
<script type="text/javascript" src="js/coda-slider.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
$(function(){
    $("#main-photo-slider").codaSlider();
    $navthumb = $(".nav-thumb");
    $crosslink = $(".cross-link");
    $navthumb
    .click(function() {
        var $this = $(this);
        theInterval($this.parent().attr('href').slice(1) - 1);
        return false;
    });
    theInterval();
});
</script>
Материалы по теме:

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

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

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

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

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

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

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

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

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

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

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

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Inf...

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

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

Sooshal v2.4Sooshal v2.4

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

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимися ико...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Сборка кнопок #2 на css3Сборка кнопок #2 на css3

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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