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

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

ОБСУЖДЕНИЕ

Новостная карусель для сайта

Новостная карусель
Просмотров: 2387  Скачан: 354 раз  Комментариев в теме: 0

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый). Работает во всех браузерах.

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

 

HTML

<div id="wrapper"> 
    <div class="d-carousel">
        <ul class="carousel">
            <li> <a href="#"><img src="images/1.jpg" alt="" /></a>
                <h4><a href="#">1 Cras varius, sapien egetory sagittis</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
            </li>
            <li> <a href="#"><img src="images/2.jpg" alt="" /></a>
                <h4><a href="#">2 Cras varius, sapien egetory sagittis</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
            </li>
            <li> <a href="#"><img src="images/3.jpg" alt="" /></a>
                <h4><a href="#">3 Cras varius, sapien egetory sagittis</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
            </li>
            <li> <a href="#"><img src="images/4.jpg" alt="" /></a>
                <h4><a href="#">4 Cras varius, sapien egetory sagittis</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
            </li>
            <li> <a href="#"><img src="images/5.jpg" alt="" /></a>
                <h4><a href="#">5 Cras varius, sapien egetory sagittis</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
            </li>
            <li> <a href="#"><img src="images/6.jpg" alt="" /></a>
                <h4><a href="#">6 Cras varius, sapien egetory sagittis</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
            </li>
            <li> <a href="#"><img src="images/7.jpg" alt="" /></a>
                <h4><a href="#">7 Cras varius, sapien egetory sagittis</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
            </li>
            <li> <a href="#"><img src="images/8.jpg" alt="" /></a>
                <h4><a href="#">8 Cras varius, sapien egetory sagittis</a></h4>
                <p>Suspendisse potenti. Nibh miry, ultricies ac molestie sit ameter vestibulum eget nunc. Vivamus vitae aliquam odio. Morbi sit amet odio tincidunt. Maecenas est felis, semper in accumsan. </p>
            </li>
        </ul>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/light.css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.d-carousel .carousel').jcarousel({
        scroll: 1
    });
});
</script>
Материалы по теме:

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью J...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

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

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

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

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

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

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

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Таблица тарифных плановТаблица тарифных планов

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

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

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

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....

Таблица тарифных плановТаблица тарифных планов

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

Mercina v3.4Mercina v3.4

Mercina - это современный шаблон для wordpress разработан специально для сайтов портфолио с многоцелевой тематикой....

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....
  • Текущий 1.56/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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