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

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

ОБСУЖДЕНИЕ

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

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

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

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

Navigation SlaiderNavigation Slaider

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

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

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

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

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

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

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

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

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

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

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Menu»

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

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

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

Web StoreWeb Store

Шаблон интернет магазина Web Store, в шаблоне имеется готовое решение для корзины, детального просмотра товара и каталога,...

Стильная форма пошаговой установкиСтильная форма пошаговой установки

Это комплект пошаговой установки, которая состоит из четырёх этапов и включает в себя проверку полей....

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

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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