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

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

ОБСУЖДЕНИЕ

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

Jquery карусель контента (плагин Circular Content)
Просмотров: 3260  Скачан: 332 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Kenburner слайдерKenburner слайдер

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

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

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

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

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

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

Navigation SlaiderNavigation Slaider

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

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

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

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

Отличное горизонтальное меню с большое количество пунктов....

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Контактная форма (дизайн)Контактная форма (дизайн)

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

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансформации

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

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

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

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

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....
  • Текущий 1.22/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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