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

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

ОБСУЖДЕНИЕ

Jquery карусель контента

Jquery карусель контента (плагин Circular Content)
Просмотров: 2576  Скачан: 278 раз  Комментариев в теме: 0

На данной странице представлена Jquery карусель бесконечной прокрутки контента, если быть точнее то это плагин Circular Content. Идея заключается в том, что бы вращать содержимое по кругу (прокручивать содержимое вы можете с помощью стрелок, а также колёсиком мыши). При клике по кнопке БОЛЬШЕ, открывается информационная панель, таким образом пользователю предоставляется более раскрытая информация, при клике по крестику, панель закрывается и все возвращается в изначальный вид (но можно вращать контент и в раскрытом виде, то есть не закрывая его).

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

 

HTML

<div id="ca-container" class="ca-container">
    <div class="ca-wrapper">
        <div class="ca-item ca-item-1">
            <div class="ca-item-main">
                <div class="ca-icon"></div>
                <h3>Stop factory farming</h3>
                <h4>
                    <span class="ca-quote">“</span>
                    <span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span>
                </h4>
                <a href="#" class="ca-more">БОЛЬШЕ</a>
            </div>
            <div class="ca-content-wrapper">
                <div class="ca-content">
                    <h6>Animals are not commodities</h6>
                    <a href="#" class="ca-close">close</a>
                    <div class="ca-content-text">
                        <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                        <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
                        <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    </div>
                    <ul>
                        <li><a href="#">Read more</a></li>
                        <li><a href="#">Share this</a></li>
                        <li><a href="#">Become a member</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ca-item ca-item-2">
            <div class="ca-item-main">
                <div class="ca-icon"></div>
                <h3>Respect Life & Rights</h3>
                <h4>
                    <span class="ca-quote">“</span>
                    <span>I hold that the more helpless a creature, the more entitled it is to protection by man from the cruelty of man.</span>
                </h4>
                <a href="#" class="ca-more">БОЛЬШЕ</a>
            </div>
            <div class="ca-content-wrapper">
                <div class="ca-content">
                    <h6>Would you eat your dog?</h6>
                    <a href="#" class="ca-close">close</a>
                    <div class="ca-content-text">
                        <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                        <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
                        <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    </div>
                    <ul>
                        <li><a href="#">Read more</a></li>
                        <li><a href="#">Share this</a></li>
                        <li><a href="#">Become a member</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ca-item ca-item-3">
            <div class="ca-item-main">
                <div class="ca-icon"></div>
                <h3>Become 100% meat-free</h3>
               <h4>
                    <span class="ca-quote">“</span>
                    <span>I feel that spiritual progress does demand at some stage that we should cease to kill our fellow creatures for the satisfaction of our bodily wants.</span>
                </h4>
                <a href="#" class="ca-more">БОЛЬШЕ</a>
            </div>
            <div class="ca-content-wrapper">
                <div class="ca-content">
                    <h6>You can change the world</h6>
                    <a href="#" class="ca-close">close</a>
                    <div class="ca-content-text">
                        <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                        <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
                       <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    </div>
                    <ul>
                        <li><a href="#">Read more</a></li>
                        <li><a href="#">Share this</a></li>
                        <li><a href="#">Become a member</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ca-item ca-item-4">
            <div class="ca-item-main">
                <div class="ca-icon"></div>
                <h3>Make a difference</h3>
                <h4>
                    <span class="ca-quote">“</span>
                    <span>A man is but the product of his thoughts what he thinks, he becomes.</span>
                </h4>
                <a href="#" class="ca-more">БОЛЬШЕ</a>
            </div>
            <div class="ca-content-wrapper">
                <div class="ca-content">
                    <h6>Think globally, act locally</h6>
                    <a href="#" class="ca-close">close</a>
                    <div class="ca-content-text">
                        <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                        <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
                        <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    </div>
                    <ul>
                        <li><a href="#">Read more</a></li>
                        <li><a href="#">Share this</a></li>
                        <li><a href="#">Become a member</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ca-item ca-item-5">
            <div class="ca-item-main">
                <div class="ca-icon"></div>
                <h3>Say no to killing</h3>
                <h4>
                    <span class="ca-quote">“</span>
                    <span>A weak man is just by accident. A strong but non-violent man is unjust by accident.</span>
                </h4>
                <a href="#" class="ca-more">БОЛЬШЕ</a>
            </div>
            <div class="ca-content-wrapper">
                <div class="ca-content">
                    <h6>Animals have rights, too!</h6>
                    <a href="#" class="ca-close">close</a>
                    <div class="ca-content-text">
                        <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                        <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
                        <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    </div>
                    <ul>
                        <li><a href="#">Read more</a></li>
                        <li><a href="#">Share this</a></li>
                        <li><a href="#">Become a member</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ca-item ca-item-6">
            <div class="ca-item-main">
                <div class="ca-icon"></div>
                <h3>Don't believe the lies</h3>
                <h4>
                    <span class="ca-quote">“</span>
                    <span>An error does not become truth by reason of multiplied propagation, nor does truth become error because     nobody sees it.</span>
                </h4>
                <a href="#" class="ca-more">БОЛЬШЕ</a>
            </div>
            <div class="ca-content-wrapper">
                <div class="ca-content">
                    <h6>How essential is meat?</h6>
                    <a href="#" class="ca-close">close</a>
                    <div class="ca-content-text">
                        <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I     neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                        <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
                        <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    </div>
                    <ul>
                        <li><a href="#">Read more</a></li>
                        <li><a href="#">Share this</a></li>
                        <li><a href="#">Become a member</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ca-item ca-item-7">
            <div class="ca-item-main">
                <div class="ca-icon"></div>
                <h3>Save the planet</h3>
                <h4>
                    <span class="ca-quote">“</span>
                    <span>A small body of determined spirits fired by an unquenchable faith in their mission can alter the course of history.</span>
               </h4>
                <a href="#" class="ca-more">БОЛЬШЕ</a>
            </div>
            <div class="ca-content-wrapper">
                <div class="ca-content">
                    <h6>Collateral damage?</h6>
                    <a href="#" class="ca-close">close</a>
                    <div class="ca-content-text">
                        <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                        <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
                        <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    </div>
                    <ul>
                        <li><a href="#">Read more</a></li>
                        <li><a href="#">Share this</a></li>
                        <li><a href="#">Become a member</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="ca-item ca-item-8">
            <div class="ca-item-main">
                <div class="ca-icon"></div>
                <h3>It's time to move on</h3>
                <h4>
                    <span class="ca-quote">“</span>
                    <span>A nation's culture resides in the hearts and in the soul of its people.</span>
                </h4>
                <a href="#" class="ca-more">БОЛЬШЕ</a>
            </div>
            <div class="ca-content-wrapper">
                <div class="ca-content">
                    <h6>Let's finally become humans</h6>
                    <a href="#" class="ca-close">close</a>
                    <div class="ca-content-text">
                        <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
                        <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p>
                        <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                    </div>
                    <ul>
                        <li><a href="#">Read more</a></li>
                        <li><a href="#">Share this</a></li>
                        <li><a href="#">Become a member</a></li>
                        <li><a href="#">Donate</a></li>
                    </ul>
                </div>
            </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.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
    $('#ca-container').contentcarousel();
</script>
Материалы по теме:

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

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

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

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

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

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

Rotator на css и jQueryRotator на css и jQuery

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

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

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

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

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

Web HostingWeb Hosting

Современный html шаблон хостинг провайдера с готовым набором нужных страниц, имеется таблица тарифных планов, контактная форма....

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

Отличная кнопка на css3, кнопка реально классная и удобная, да и привлекает глаза посетителя....

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

ClockerClocker

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

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......
  • Текущий 1.29/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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