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

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

ОБСУЖДЕНИЕ

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

Слайдер на jQuery
Просмотров: 892  Скачан: 168 раз  Комментариев в теме: 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....

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

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

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

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

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......
Интересные публикации:

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Выпадающее меню в темном стиле, реализованное полностью на css...

Галерея на jQueryГалерея на jQuery

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

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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