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

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

ОБСУЖДЕНИЕ

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

Новостной слайдер
Просмотров: 5278  Скачан: 415 раз  Комментариев в теме: 0

Неплохой новостной слайдер на jquery, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами, кнопка (start, stop) для запуска и остановки слайд-шоу, есть навигационные стрелки (вправо, влево), предусмотрена остановка слайд-шоу, при наведении курсора на слайд, есть возможность листать слайды колёсиком мыши, в слайдере используется плагин Easing, для эффекта переходп между слайдами. Имеется на выбор 5 стилей слайдера.

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

 

HTML

<div id="jslidernews1" class="lof-slidecontent">
    <div class="preload"><div></div></div>
    <div class="main-slider-content" >
        <ul class="sliders-wrap-inner">
             <li>
                <img src="images/thumbl_980x340.png" title="Newsflash 2" >           
                 <div class="slider-description">
                    <div class="slider-meta"><a target="_parent" title="Newsflash 1" href="#Category-1">Newsflash 1</a><i> — Monday, February 15, 2010 12:42</i></div>
                    <h4>Content of Newsflash 1</h4>
                    <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...
                        <a class="readmore" href="#">Read more </a>
                    </p>
                </div>
            </li> 
            <li>
                <img src="images/thumbl_980x340_002.png" title="Newsflash 1" >           
                <div class="slider-description">
                    <div class="slider-meta"><a target="_parent" title="Newsflash 2" href="#Category-2">Newsflash 2</a><i> — Monday, February 15, 2010 12:42</i></div>
                    <h4>Content of Newsflash 2</h4>
                    <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...
                        <a class="readmore" href="#">Read more </a>
                    </p>
                </div>
            </li> 
            <li>
                <img src="images/thumbl_980x340_003.png" title="Newsflash 3" >            
                <div class="slider-description">
                    <div class="slider-meta"><a target="_parent" title="Newsflash 3" href="#Category-3">Newsflash 3</a><i> — Monday, February 15, 2010 12:42</i></div>
                    <h4>Content of Newsflash 3</h4>
                    <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...
                        <a class="readmore" href="#">Read more </a>
                    </p>
                </div>
            </li> 
            <li>
                <img src="images/thumbl_980x340_004.png" title="Newsflash 5" >            
                <div class="slider-description">
                    <div class="slider-meta"><a target="_parent" title="Newsflash 4" href="#Category-4">Newsflash 4</a><i> — Monday, February 15, 2010 12:42</i></div>
                    <h4>Content of Newsflash 4</h4>
                    <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                        <a class="readmore" href="#">Read more </a>
                    </p>
                </div>
            </li> 
            <li>
                <img src="images/thumbl_980x340_005.png" title="Newsflash 5" >            
                <div class="slider-description">
                    <div class="slider-meta"><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a><i> — Monday, February 15, 2010 12:42</i></div>
                    <h4>Content of Newsflash 5</h4>
                    <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                        <a class="readmore" href="#">Read more </a>
                    </p>
                </div>
            </li> 
            <li>           
                <img src="images/thumbl_980x340_006.png" title="Newsflash 5" >            
                <div class="slider-description">
                    <div class="slider-meta"><a target="_parent" title="Newsflash 6" href="#">Newsflash 6</a><i> — Monday, February 15, 2010 12:42</i></div>
                    <h4>Content of Newsflash 6</h4>
                    <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                        <a class="readmore" href="#">Read more </a>
                    </p>
                </div>
            </li> 
            <li>
                <img src="images/thumbl_980x340_007.png" title="Newsflash 5" >            
                <div class="slider-description">
                    <div class="slider-meta"><a target="_parent" title="Newsflash 7" href="#">Newsflash 7</a><i> — Monday, February 15, 2010 12:42</i></div>
                    <h4>Content of Newsflash 7</h4>
                    <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                        <a class="readmore" href="#">Read more </a>
                    </p>
                </div>
            </li> 
            <li>
                <img src="images/thumbl_980x340_008.png" title="Newsflash 8" >            
                <div class="slider-description">      
                    <div class="slider-meta"><a target="_parent" title="Newsflash 8" href="#">Newsflash 8</a><i> — Monday, February 15, 2010 12:42</i></div>
                    <h4>Content of Newsflash 8</h4>
                    <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                        <a class="readmore" href="#">Read more </a>
                    </p>
                </div>
            </li> 
        </ul>  
    </div>
    <div class="navigator-content">
    <div  class="button-previous">Previous</div>
        <div class="navigator-wrapper">
            <ul class="navigator-wrap-inner">
                <li><img src="images/thumbs/thumbl_980x340.png" /></li>
                <li><img src="images/thumbs/thumbl_980x340_002.png" /></li>
                <li><img src="images/thumbs/thumbl_980x340_003.png" /></li>
                <li><img src="images/thumbs/thumbl_980x340_004.png" /></li>    
                <li><img src="images/thumbs/thumbl_980x340_005.png" /></li>
                <li><img src="images/thumbs/thumbl_980x340_006.png" /></li>       
                <li><img src="images/thumbs/thumbl_980x340_007.png" /></li>       
                <li><img src="images/thumbs/thumbl_980x340_008.png" /></li>       
            </ul>
        </div>
        <div class="button-next">Next</div>
    </div> 
    <div class="button-control"><span></span></div>       
</div>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
    $(document).ready( function(){ 
        var buttons = { previous:$('#jslidernews1 .button-previous') ,
        next:$('#jslidernews1 .button-next') };
        $('#jslidernews1').lofJSidernews( {
            interval : 4000,
            direction: 'opacitys',
            easing: 'easeInOutExpo',
            duration: 1200,
            auto : true,
            maxItemDisplay  : 4,
            mobile   : true,
            navPosition     : 'horizontal', // horizontal
            navigatorHeight : 32,
            navigatorWidth  : 80,
            mainWidth: 980,
            buttons: buttons
        } );
    });
</script>
Материалы по теме:

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

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

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

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

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

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

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

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

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

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

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

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

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

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

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

Многоуровневое меню, работает оно довольно интересным образом, меню привязывается к......
  • Текущий 1.40/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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