Слайд шоу с плагином JQuery Flux Slider

19.10.2019
CSS, jQuery

Категория: jQuery.

flux-slider_mini-5179592

В этом примере вы увидите возможности применения слайдер плагина Flux. Этот плагин использует CSS3 анимацию с разнообразными эффектами переходов как 2D так и 3D. Конечно не все браузеры имеют возможность отображать 3D переходы, это относиться к старым версиям, например Opera12.16 которая была последней на движке Presto. Но все новые браузеры использующие движок WebKit отлично показывают 3D эффекты.

 

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


    
        
        Flux Slider

Flux Slider
  • 2D Transitions
  • Bars
  • Zip
  • Blinds
  • Blocks
  • Concentric
  • Warp
  • 3D Transitions
  • Bars3D
  • Cube
  • Tiles3D
  • Blinds3D
  • Controls
  • Play
  • Pause
  • Next
  • Prev

CSS

Основные css стили в которых вы можете изменить визуальные настроики слайдера, поля, рамки фон.

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

/*customization of slider*/

#slider {
    padding:15px 0;
}
#slider .pagination {
    list-style:none outside none;
    padding:15px !important;
}
#slider .pagination li {
    cursor:pointer;
    display:inline-block;
    margin-left:0;
    background-color:#888;
    border-radius:10px 10px 10px 10px;
    height:8px;
    text-indent:10000px;
    width:8px;
}
#slider .pagination li.current {
    background-color:#000;
}
#transitions {
    overflow:hidden;
}
#transitions ul {
    float:left;
    list-style:none outside none;
    padding:0;
    width:33%;
}
#transitions ul#trans2D {
    text-align:right;
}
#transitions ul li {
    margin:0 10px;
}

#warn {
    font-weight:bold;
    text-align:center;
}

JavaScript

$(function(){
    // если браузер не поддерживает CSS3 анимацию - мы будем показывать сообщение об этом
    if (! flux.browser.supportsTransitions) {
        $('#warn').text('Необходим браузер который поддерживает CSS3 анимацию').show();
    }

    window.mf = new flux.slider('#slider', {
        autoplay: true,
        pagination: true,
        delay: 5000
    });

    // binding onclick events for our transitions
    $('.transitions').bind('click', function(event) {
        event.preventDefault();

        // если браузер не поддерживает 3D эффекты - мы будем показывать сообщение об этом
        if ($(event.target).closest('ul').is('ul#trans3d') && ! flux.browser.supports3d) {
            $('#warn').text("The '"+event.target.innerHTML+"' Необходим браузер который поддерживает 3D эффекты");
            $('#warn').animate({
              opacity: 'show'
            }, 1000, '', function() {
                $(this).animate({opacity: 'hide'}, 1000);
            });
            return;
        }

        // using custom transition effect
        window.mf.next(event.target.id);
    });

    $('#controls').bind('click', function(event) {
        event.preventDefault();

        var command = 'window.mf.'+event.target.id+'();';
        eval(command);
    });
});

С помощью вызова конструктора new flux.slider производим инициализацию, как параметр указываем селектор нашего слайдера (‘#slider’) и параметры autoplay, pagination, delay.

Метки: , ,