Flexslider

Description


Overview

Master Slider is a free SEO friendly, responsive image and video slider that truly works on all major devices, and it has super smooth hardware accelerated transitions. It supports touch navigation with pure swipe gesture that you have never experienced before. With our 8 Starter Samples, creating slideshows has never been so fast and enjoyable!

Master Slider is built using WordPress best practices both on the front and the back end. This results in an efficient, robust and intuitive plugin. It works with any theme, including WordPress Default Themes.

Features

• The Most SEO Friendly Slider Plugin in Market! • Easy to Use Interface • Simply Create Fully Responsive and Device Optimized Sliders with 8 starter samples • Use Sliders Cross-browser and Works Well on All Popular Browsers! (Tested IE8+ and other modern browsers) • Superlative Lightweight Outputs in Compare with Other Plugins • HTML5 Valid and Clean Markups • Touch Swipe Navigation • Manage Slideshows with Autoplay Timing Options! • 24h Support with Expert Agents (check out our rates on WordPress) • Drag and Drop Slider Creation • Extremely User Friendly Admin Panel • CSS3 Transitions with jQuery Fallback • Hardware Accelerated CSS3 3D Transforms • Optimized for Any Screen Sizes and Touch Devices • Smart Loading Assets • 6+ Interactive Slide Transitions • Smart auto crop • Loop and linear sliding • Shuffle Ordering Slides Option • Auto-height Slider • Vertical and Horizontal Direction Navigation • Fully Customizable Thumbnail and Tabs • Vertical and Horizontal Bullets • Mouse Wheel Navigation • Customizable Arrows • Exclusive Widget and Shortcodes • Scroll Handle Slide Indicator • Smart Memory Management • 6 Modern and Unique Skins • Timer-bar and Circle Timer UI Controls • Custom User Roles and Capabilities • 5 Image Positioning Options (fill, fit, tile,…) • Advanced Import And Export Tool • Built-in Cache Boosting • Translate Ready • Multisite Compatible • Extensive Developer API * Full List of Features

Master Slider Pro Features

  • Full-width, Full-screen and Boxed Layout
  • Post Slider – with Advanced Filtering Tool (Any Post-type)
  • WooCommerce Product Slider – With Advanced Filtering Tool
  • Flickr Slider – Make Slider Dynamically From Flickr Photosets or User Latest Photos
  • Facebook Slider – Make Image Gallery Dynamically From Facebook Public Images
  • HD Video Backgrounds for Slides
  • Embedding YouTube and Vimeo Videos
  • Animated Layers
  • 4 Different Layer Types (Text, Image, Button and Video)
  • Huge Verity of Layer Transitions
  • Transition In and Out Available for Each Layer
  • Hotspots and Tooltips over Slides
  • Deep-linking
  • Parallax Effect while Scrolling
  • Layers Parallax Effect while Swiping
  • Layers Parallax Effect while Moving Mouse over Slide
  • Boxed with Visible Nearby Slides
  • Auto Height and Auto Fill Layout
  • Binding Special Actions to Layers (Go to slide, scroll down, play, pause, ..)
  • Custom Pattern and Color Overlay
  • Auto Resizing and Aligning Layers while Resizing
  • Option to Linking Slides, Layers and Hotspots
  • 30+ Ready to Use Sample Sliders (One Click Import)
  • Nice Looking and Easy to Use Layout
  • WYSIWYG Drag & Drop Editor
  • Easy to Use Timeline animation tool
  • Visual Style Editor
  • Visual Transition Effect Editor
  • Visual Button Editor
  • Easy Aligning Layers over Stage
  • Snapping Option on Drag & Drop Layers
  • 9 Different Positioning Origin Points for Each Layer
  • Realtime Animation Preview
  • Moving Layers by Arrow Keys
  • Using WordPress Native Text Editor
  • Using Google Fonts (600+ Fonts)
  • Full List of Pro Features

Upgrade to Pro Version

Translation

French. Special thanks to Thomas Brazilian Portuguese. Special thanks to WebPress Serbian. Special thanks to Borisa Djuraskovic

General Notes

FlexSlider is no longer licensed under the MIT license. FlexSlider now uses the license, GPLv2 and later.

Your old styles and properties might not work out of the box. Some property names have been changed, noted below, as well as namespacing prefixes being applied to all elements. This means that is now by default. The namespacing property is exposed, free for you to change.

No more overflow hidden woes! The plugin now generates a viewport element to handle the tedious task of working around overflow hidden. Yay!

The slider element is now accessible outside of the callback API via the jQuery .data() method. Example use:

Helper strings have been added for performing actions quickly on FlexSlider elements. Example uses:

Two new methods are available for adding/removing slides, and . More details about this coming soon.

  • accepts two parameters, a string/jQuery object and an index.
  • accepts one parameter, either an object to be removed, or an index.

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

I can’t rate this plugin highly enough, does everything it says on the box.

Also being new to WordPress I came across a technical issue and needed their support, I have to say that their technical support was truly amazing and went above and beyond what I had paid for the pro plugin upgrade.

Highly recommended and wouldn’t hesitate at using any of their other plugins.

I looked for a plugin to help me slide beautiful pictures but I needed more than that..so after so much time trying to find a good one I finally found this awesome plugin which sends users to different pages and OMG! IT has so many great features..I am truly amazed..I am very satisfied of IT and recommend it with trust! Very good plugin and good luck with other projects guys!

I would recommend developers to automatically set CSS #id for SLiders using Post ID, for example: sample_slider_1234 In such a way, sliders will not be conflicting in one page, thanks

I can no longer add or change the background image to an individual slide when selecting from the Media Library. It only works when I upload an image. This code is missing when I select an image from the Media library. <input type=»submit» name=»send» id=»send» class=»button» value=»Insert into Post»>

I first used this plug in years ago. In the meantime I’ve drunk the Gutenberg kool-aid, and really wish this plug-in supported block editing. This plug-in has only options for text and images in the editor; it needs to support Gutenberg blocks and then it gets five stars.

I’m in the hunt now for a carousel that allows me to use the rich library of Gutenberg blocks I have to create the elements of the carousel. I only wish this plug-in had that functionality.

This is very nice slider, I’m happy!

Changelog

3.4.6

  • Major bug fixed: Many Users reported that slider image not displaying after major update release, It’s fixed now, feedback appreciated by users.
  • UI Bug Fix: At All Sliders page “Screen Options” button fixed

3.4.2

  • Custom image cropping removed
  • Recover Old sliders page, Important Notice section “wrong plugin version 3.1.9 and 3.1.0” updated to “correct plugin version 3.3.9 and 3.3.10”

3.4.0

  • All setting rearranged together
  • Some settings renamed with appropriate names
  • New setting: Set slider alt tag easily
  • New setting: Title hide or show
  • New setting: Description hide or show
  • Deprecated Setting: Slider Post Title
  • All setting new preview screenshots added
  • Language file updated

3.3.10

  • Directory structure changed
  • More SEO friendly slides now
  • Unused assets removed
  • Language file updated
  • Typos fixed
  • Library updated
  • WordPres 5.3.1 compatibility checked
  • Version 3.3.9 to 3.3.10 update checked
  • Products page updated
  • Set Slide Title As setting removed
  • UI design issues fixed with latest WordPres 5.3.1
  • Help and Support page site migration section removed, no more recommended with new code
  • unused assets remove from plugin

CSS

Для слайдера используются анимации CSS3 anim_slides и anim_titles. Первая применяется для отдельных слайдов, вторая — для текста описания. Для описания также изменяется положение и прозрачность.

/* Слайдер */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* анимация css3 */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* Задержки css3 */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* Анимация css3 */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

General Notes

FlexSlider is no longer licensed under the MIT license. FlexSlider now uses the license, GPLv2 and later.

Your old styles and properties might not work out of the box. Some property names have been changed, noted below, as well as namespacing prefixes being applied to all elements. This means that is now by default. The namespacing property is exposed, free for you to change.

No more overflow hidden woes! The plugin now generates a viewport element to handle the tedious task of working around overflow hidden. Yay!

The slider element is now accessible outside of the callback API via the jQuery .data() method. Example use:


Helper strings have been added for performing actions quickly on FlexSlider elements. Example uses:

Two new methods are available for adding/removing slides, and . More details about this coming soon.

  • accepts two parameters, a string/jQuery object and an index.
  • accepts one parameter, either an object to be removed, or an index.

Как создать слайдер с зацикливанием и автоматической сменой слайдов?

Запрограммировать автоматическую смену слайдов через определённые промежутки времени можно с помощью функции .

var _cycle = function (direction) {
  if (!_config.isCycling) {
    return;
  }
  _interval = setInterval(function () {
    _transformItem(direction);
  }, _config.interval);
}  

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

Кроме этого остановку автоматической смены слайдов желательно ещё добавить при поднесении курсора к слайдеру.

Осуществить этот функционал можно следующим образом:

if (_config.pause && _config.isCycling) {
  _mainElement.addEventListener('mouseenter', function () {
    clearInterval(_interval);
  });
  _mainElement.addEventListener('mouseleave', function () {
    clearInterval(_interval);
    _cycle(_config.direction);
  });
}

Посмотреть

A little information about FlexSlider

About FlexSlider

FlexSlider was built to serve up the best responsive jQuery slider around. I had built a few implementations of responsive sliders on different client projects and noticed that there was a glaring hole for plugin support with the concept. I wanted to build a plugin that would serve the newest of beginners, while providing seasoned developers a tool they could use with confidence. What has come forth is this, FlexSlider. I plan to maintain this plugin and provide support to users implementing FlexSlider into their sites. Responsive web design can be tricky, but I hope that FlexSlider serves to uncomplicate the process, just a little bit.

Browser Support

FlexSlider has been verified in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. jQuery versions 1.3+ are supported.

Future Goals

  • Support for multiple sliders (supported as of v1.6)
  • iOS swipe gestures (supported as of v1.2)
  • Callback API (supported as of v1.7)
  • CSS3 transitions (supported as of v1.8)
  • Addition of carousel options (visible slides, # of slides to move on animate, etc.)
  • Custom configuration support for smallest file sizes possible.
  • More theme options

Changelog

  1. v1.8: October 22, 2011- CSS3 transform3d support for webkit browsers coupled with 1-to-1 swiping has been introduced. The entire touch swipe experience has been vastly improved beyond comparison to previous versions.- New resize event handling to nix the old behavior. Slides not stay in place, rather than moving around and then sliding back.- Added “slideDirection” property to support “vertical” or “horizontal” sliding directions

    – Added “mousewheel” property to support mousewheel scrolling of slide elements.

    – Added “slider.manualPause” that is set by the pausePlay element and can be set via the callback API. This will prevent pauseOnHover from resuming on hover exit.

    – Removed “touchswipe” property as a customizable options.

    – Fixed behavior in slides with only two slides. Scrolling should happen as intended.

    – Fixed pausePlay element bind to trigger both touchstart and click.

    – Note: A destroy function has been added to the main plugin file, but is commented out and omitted from the minified version. Those interested can find the function and documentation to implement a custom destroy function based on their own needs/event triggers.

  2. v1.7: September 10, 2011- Callback API features with start(), before(), after(), and end() options. All functions should include one parameter for the slider element. (ex. start: function(slider) {})- Crossfade has been introduced through new CSS techniques- pausePlay property added to support a dynamic pause/play element

    – animationLoop property added to support non-looping sliders

    – FlexSlider CSS further improved, including IE hacks to improve cross-browser design integrity

  3. v1.6: August 30, 2011- Vast improvements to the plugin architecture- Multiple instances of FlexSlider are now possible. (Please, consider your audience before going crazy with this)- Removed the “show” animation option in interest of other things. Use animationDuration: 0, if needed.

    – FlexSlider CSS has been updated. Use the v1.6 stylesheet!

  4. v1.5: August 27, 2011- Improved mobile support by adding “touchstart” to bound events- Implemented solution for no javascript fallback (relies on user, and prepares for html5 boilerplate/modernizr classes)
  5. v1.4: August 23, 2011- Added “manualControls” property to allow for custom, non-dynamic control navigation- Added “show” animation to allow for instant transitions between slides
  6. v1.3: August 18, 2011- Made slide animation a continuous scroll effect, rather than jumping back to start/end- Cleaned up code and created better test cases for different slider scenarios. The slider is a lot more bulletproof as of this update.
  7. v1.2: August 16, 2011- Fixed some code redundancies- Added “randomize” property to randomize slide oder on pageLoad- Added “touchSwipe” property for swipe gestures on iOS and Android devices (no Android device to test this, but it should work)

    – Fixed minor bugs in jQuery 1.3.2 where navigation was not appending correctly


    – Fixed major bug in jQuery 1.3.2 where slide animation was not sliding

  8. v1.0 – Initial release under the MIT license.

Contributors

Managing this project takes a significant chunk of my time outside of work, so I would like to give my sincerest thanks to those who have supported FlexSlider:

  • Andrew Fenenbock
  • Nicholas Frota
  • Datch Haven
  • Amber Weinberg
  • Daniel & Evelina Barry
  • Justin Myers – Zero Signal Productions
  • Ruth Elliot – EDU Designs
  • Tim Hyde – Hyde Internet
  • Shlomi Atar
  • Courtney Curtis
  • Simon Clayson
  • Martin Gartner
  • Mark – Hild/Nelson Design
  • Jeroen Wiersma

Updates

** Version 2.7.2 **

** Refactor jQuery HTML output for img attributes.

** Version 2.7.1 **

** RTL fixes for Firefox browser.

** Version 2.7.0 **

** Fixes resize method call for orientationchange. Adds RTL feature — param «rtl» added. **

** Version 2.6.3 **

** Rollback fade fixes, due to harsh fade reports. **

** Version 2.6.2 **

** Minor update to fix issues with varying heights and overflow onto content below the slider. Fixes the visibility of the pagination and the navigation in the «fade» mode. **

** Version 2.6.1 **

** SmoothHeight now uses innerHeight() instead of height() to account for padding in calculation. Defining var altText to prevent error. bower.json add fonts folder on main field. Changed true to false in order to make sure whether or not to allow a slider comprised of a single slide. **

** Version 2.6.0 **

** Adds composer json file, scope fix for focused keyword, fixes bower demo folder exclusion, z-index fix for disabled nav arrow, play/pause accessibility fix, itemMargin fix for slider items, fixes accessibility for in focus elements and pagination controls, firefox fix for text selection on slider carousel, adds data-thumb-alt image alt attribute. **

** Version 2.5.0 **

** Bumped compatibility support starting with jQuery 1.7+. pausePlay icon fix. Firefox touch event fix. Adds customDirectionNav param. **


** Version 2.4.0 **

** Update for improved standards. Adds classes to li nav elements. Reset for li elements in stylesheet. **

** Version 2.3.0 **

** Fixes pauseInvisible attribute issue with Chrome and the Page Visibility API. **

** Version 2.2.2 **

** Fixes minified JavaScript file to remove merge conflicts. **

** Version 2.2.0 **

  • Fixed event handler conflicts with devices that are both click and touch enabled. e.g., Windows 8.
  • Fixed calculations that were causing strange issues with paging and certain FlexSliders to move out of alignment.

Be sure to test v2.2.0 with your current slider, before pushing live, to ensure everything is playing nicely.

Преимущества слайдера chiefSlider

Перечислим основные преимущества данного слайдера:

  • во-первых, он не создаёт клоны элементов (item) для организации зацикливания, как это реализовано, например, в плагинах OwlCarousel и slick;
  • во-вторых, он не зависит от библиотеки jQuery; это не только убирает дополнительные требования, но и делает его более лёгким;
  • в-третьих, он практически не вносит никакие изменения в DOM документа; единственное, что он делает — это добавляет или изменяет значения CSS трансформаций у элементов слайдера;
  • в-четвертых, он содержит только минимальный набор функций; дополнительный функционал можно добавить в зависимости от задачи;
  • в-пятых, он является адаптивным, т.е. его можно использовать на любых сайтах; адаптивность слайдера настраивается с помощью CSS;
  • в-шестых, количество активных элементов настраивается с помощью CSS; это означает, что его можно использовать для создания карусели как с одним активным слайдом, так и с любым другим их количеством.

Как правильно использовать

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

Для создания дизайна со слайдерами понадобится:

  • база и топ;
  • гель-лак для фона. Если рисунок сплошной, то гель-лак лучше выбрать белый;
  • слайдеры. Их предлагают бренды Irisk, Freedecor, Vogue Nails;
  • апельсиновая палочка;
  • ножницы;
  • жидкость для снятия лака;
  • ватные диски;
  • небольшая пиала или другая емкость с теплой водой. Не используй слишком горячую воду – пленка с узором может съежиться.

Подготовь ногти к покрытию любым способом – аппаратом, обрезной или любой другой техникой.

Подготовка

Подбери слайдеры по размеру.

  • если речь идет об одиночных рисунках на прозрачной основе – убедись, что изображение полностью поместится на выбранный ноготь;
  • если слайдер со сплошным узором или изображением, поочередно прикладывай палец к картинке. Ширина картинки должна быть шире ногтевой пластины на 1-2 мм.

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

Создание дизайна

  1. Покрой ногти базой и гель-лаком, просушив каждое средство по отдельности. Гель-лаки лучше выбирать контрастных с рисунком цветов, чтобы изображение выделялось;
  2. Отдели картинку от подложки. Можешь опустить выбранный фрагмент в воду или положить его на мокрый ватный диск. Вариант с ватным диском удобнее – рисунок отделяется также эффективно, но не вынуждает погружать руки, уже покрытые цветом, в воду;
  3. Перенеси рисунок. После контакта с водой пленочная часть легко отделяются от бумажной – не поддевай ее пинцетом и не старайся зацепить пальцами – поднеси слайдер к ногтю и сдвинь пленку;
  4. Аккуратно расправь пленку и убедись, что он полностью покрыл всю ногтевую пластину. Выглаживающими движениями выдави из-под слайдера воду и пузырьки воздуха. Проследи, чтобы не было складок – на светлом фоне они будут сильно выделяться;
  5. Убери излишки. Пленку, свисающую со стороны свободного края, загни по торцу и аккуратным, но резким движением проведи по залому пилкой или срежь ножницами. Оставшиеся неровности на краешке загни под ноготь, чтобы запечатать торец. Края у боковых валиков прижми с помощью апельсиновой палочки, чтобы под них не затекал топ;

Завершение

Подожди, пока пленка немного подсохнет

Пока она влажная – она легко перемещается по ногтю и может съехать при покрытии топом;

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

Get started with FlexSlider in 3 easy steps!

Step 1 – Link files

Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us!

Step 2 – Add markup

The FlexSlider markup is simple and straightforward. First, start with a single containing element, <div class=”flexslider”> in this example. Then, create a <ul class=”slides”>. It is important to use this class because the slider targets that class specifically. Put your images and anything else you desire into each <li> and you are ready to rock.

Step 3 – Hook up the slider

Lastly, add the following lines of Javascript into the <head> of your document, below the links from Step 1. The $(window).load() is required to ensure the content of the page is loaded before the plugin initializes.

…and voila! That wraps up the most basic installation of FlexSlider into your webpage.

Step 4 – Tailor to your needs

Listed below are all of the options available to customize FlexSlider to suite your needs, along with their default values. For examples on how to use these properties for advanced setups, check out the Advanced Options section.


С этим читают