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

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

ОБСУЖДЕНИЕ

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

Видео слайдер для сайта
Просмотров: 2072  Скачан: 219 раз  Комментариев в теме: 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
Материалы по теме:

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

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

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

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

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

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

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

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

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

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

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

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

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

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

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

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

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

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

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

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

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

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....
  • Текущий 1.25/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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