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

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

ОБСУЖДЕНИЕ

Видео слайдер для сайта

Видео слайдер для сайта
Просмотров: 1669  Скачан: 184 раз  Комментариев в теме: 0

Вашему вниманю представлен отличный видео слайдер для сайта, чем же этот слайдер отличается от себе подобных спросите вы, да все очень просто, благодаря плагину AnythingSlider вы можете свободно использовать текст, изображение, видео (YouTube, Vimeo, HTML5 Video), при этом можно все и сразу, на этом возможности его не заканчиваются, слайдер адаптирован под все браузеры, также в слайдере имеются навигационные стрелки (вправо, влево) правда замечен небольшой баг, при воспроизведении видео с (YouTube, Vimeo), видео немножко налазит на стрелки, но этот баг ни чуть не портит превосходный вид слайдера и легко решается в стилях, так же в сладере предусмотрено слайд-шоу и дополнительная навигационная панель (располагаться она в нижнем правом углу слайдера).

Нельзя не отметить, наверное ещё некоторые особенности этого слайдера: это возможность поместить любое содержимое в слайдер, зацикленный показ, возможность использовать несколько слайдеров на одной странице, пауза при наведение в слайд-шоу.

Видео можно подгружать с таких источников как:

- YouTube: iframe

- YouTube: Embedded

- Vimeo: iframe

- Vimeo: Embeded

- HTML5 Video

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

 

HTML

<div id="page-wrap">
    <ul id="slider1">
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li class="panel5">
            <div>
                <div class="textSlide">
                    <span class="rightside_text">
                        <img src="images/3.jpg" />
                    </span>
                    <h3>Other Information</h3>
                    <br>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
                        <li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
                        <li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
                        <li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="panel5">
            <div>
                <div class="textSlide">
                    <span class="rightside">
                        <object width="400" height="300">
                            <param name="allowFullScreen" value="true"/>
                            <param name="allowscriptaccess" value="always"/>
                            <param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1"/>
                            <embed src="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed>
                        </object>
                    </span>
                    <h3>Other Information</h3>
                    <br>
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.</li>
                        <li>Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.</li>
                        <li>Morbi a magna eu ligula scelerisque lobortis vel non nisi.</li>
                        <li>Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.</li>
                    </ul>
                </div>
            </div>
        </li>
        <li><iframe width="640" height="360" src="http://www.youtube.com/embed/ZJPcLB4n1f8?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></li>
        <li>
            <object width="640" height="360">
                <param name="movie" value="http://www.youtube.com/v/M7FIvfx5J10?hl=ru_RU&version=3"/>
                <param name="allowFullScreen" value="true"/>
                <param name="allowscriptaccess" value="always"/>
                <embed src="http://www.youtube.com/v/M7FIvfx5J10?hl=ru_RU&version=3" type="application/x-shockwave-flash" width="640" height="360" allowscriptaccess="always" allowfullscreen="true"></embed>
            </object>
        </li>
        <li><iframe src="http://player.vimeo.com/video/18011143?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe></li>
        <li>
            <object width="750" height="550">
                <param name="allowfullscreen" value="true" />
                <param name="allowscriptaccess" value="always" />
                <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12280336&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0" />
                <embed src="http://vimeo.com/moogaloop.swf?clip_id=12280336&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="750" height="550"></embed>
            </object>
        </li>
        <li>
            <video width="700" height="400" controls="controls">
                <source src="video/movie.ogg" type="video/ogg">
                <source src="video/movie.mp4" type="video/mp4">
                <source src="video/movie.webm" type="video/webm">
            </video>
        </li>
    </ul> 
</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/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.jatt.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.video.js"></script>
<script type="text/javascript">
    $(function(){
        $('#slider1').anythingSlider({
            theme           : 'metallic',
            easing          : 'easeOutCubic',
            navigationFormatter : function(index, panel){
                return ['IMAGES', 'IMAGES', 'IMAGES and TEXT', 'VIDEO and TEXT', 'VIDEO YouTube: iframe', 'VIDEO YouTube: embed', 'VIDEO Vimeo: iframe', 'VIDEO Vimeo: embed', 'VIDEO and HTML5'][index - 1];
            },
            onSlideComplete : function(slider){
            }
        });
        $.jatt();
    });
</script>

Таблица совместимости видео с браузерами.

Видео слайдер для сайта

Обозначение:

FF - Firefox 3+ - все отлично работает.

C - Chrome - в некоторых случаях игнорирует попытку JavaScript получить доступ к структуре с URL.

S - Safari 4+ - замечены не критичные проблемы с HTML5.

O - Opera 9+ - замечены некоторые проблемы с iframe ( YouTube).

IE10 Internet Explorer 10 - все отлично работает.

IE9 Internet Explorer 9 - все отлично работает.

IE8 Internet Explorer 8 - не поддерживает HTML5.

IE7 Internet Explorer 7 - не поддерживает HTML5 и iframe.

 

Ниже представлен список анимации перехода Easing, которые вы можете использовать в этом плагине. Для смены анимации найдите в открытом выше скрипте строку easing, рядом будет стоять значение (по умолчанию там стоит easeOutCubic), замените это значение любым из списка, в последствии слайдер будет использовать анимацию перехода, которую вы укажите.

easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
Материалы по теме:

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

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

Rotator на css и jQueryRotator на css и jQuery

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

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

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

The RockThe Rock

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

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

KroftKroft

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

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......

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

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......
  • Текущий 1.29/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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