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

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

ОБСУЖДЕНИЕ

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

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

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

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

Скроллер картинокСкроллер картинок

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

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

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

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

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

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

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

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

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

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

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

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

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

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......

The RockThe Rock

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

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

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

VIP кнопка на css3VIP кнопка на css3

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

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Responsive...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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