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

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

ОБСУЖДЕНИЕ

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

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

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

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

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

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

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

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

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

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

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

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

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

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Шаблон Dual FlowШаблон Dual Flow

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть галерея, выпадающее меню, форма обратной связи с Google Maps......

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

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

Шаблон Desire Night ClubШаблон Desire Night Club

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

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....

Футер на cssФутер на css

Красивый и в тоже время довольно оригинальный футер на css, он же подвал сайта....
  • Текущий 1.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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