jquery-flexloader

$3

Flexloader loads the current, next, and prev slide in a Flexslider slideshow. In a Flexslider carousel, Flexloader loads the current, next, and prev slides.

See demos http://shaekuronen.github.io/jquery.flexloader/

Add to project
``shell
bower install flexloader
`

To configure, add $.flexloader to the start and after events in Flexslider init.
`javascript
$('.flexslider').flexslider({
start: function(slider) {
$.flexloader(slider);
},
after: function(slider) {
$.flexloader(slider);
}
});
`
Default: load HTML markup following the Flexslider convention of li > img
`html



`

On Flexslider start, Flexloader will update the img src of Slides 1, c1, 2, 16, & c16 ('c' prefix indicates cloned slide).

When the next slide is animated to, Flexloader will update the img src of Slide 3. Slides 1, c1, & 2 are already loaded and will not be updated.

##### Two options: Picturefill and Background-Images

Picturefill JS
`javascript
$('.flexslider').flexslider({
start: function(slider) {
$.flexloader(slider, { 'picturefill': true });
},
after: function(slider) {
$.flexloader(slider, { 'picturefill': true });
}
});
`
Picturefill HTML
`html



`
Background-Images JS
`javascript
$('.flexslider').flexslider({
start: function(slider) {
$.flexloader(slider, { 'background_images': true });
},
after: function(slider) {
$.flexloader(slider, { 'background_images': true });
}
});
`
Background-Images HTML
`html

...

`
Background-Images CSS
`css
.slide {
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-bottom: 50%;
}
@media (max-width: 540px) {
.slide-01.flexloader-background-image-loaded {
background-image: url('../img/slideshow_background_images/540/grey01.jpg');
}
}
@media (min-width: 541px) and (max-width: 720px) {
.slide-01.flexloader-background-image-loaded {
background-image: url('../img/slideshow_background_images/720/grey01.jpg');
}
}
@media (min-width: 721px) and (max-width: 900px) {
.slide-01.flexloader-background-image-loaded {
background-image: url('../img/slideshow_background_images/900/grey01.jpg');
}
}
@media (min-width: 901px) {
.slide-01.flexloader-background-image-loaded {
background-image: url('../img/slideshow_background_images/1080/grey01.jpg');
}
}
`
Flexloader defaults to adding the .flexloader-background-image-loaded class to slides that have been loaded. If you want to change the default, it's possible to configure.
`javascript
$('.flexslider').flexslider({
start: function(slider) {
$.flexloader(slider, { 'background_images': true, 'class_name': 'your-class-name' });
},
after: function(slider) {
$.flexloader(slider, { 'background_images': true, 'class_name': 'your-class-name' });
}
});
`
Background-Images - Default Class: 'flexloader-background-image-loaded'
In CSS below, class name has be changed to 'your-class-name'
`css
.slide {
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-bottom: 50%;
}
@media (max-width: 540px) {
.slide-01.your-class-name {
background-image: url('../img/slideshow_background_images/540/grey01.jpg');
}
}
@media (min-width: 541px) and (max-width: 720px) {
.slide-01.your-class-name {
background-image: url('../img/slideshow_background_images/720/grey01.jpg');
}
}
@media (min-width: 721px) and (max-width: 900px) {
.slide-01.your-class-name {
background-image: url('../img/slideshow_background_images/900/grey01.jpg');
}
}
@media (min-width: 901px) {
.slide-01.your-class-name {
background-image: url('../img/slideshow_background_images/1080/grey01.jpg');
}
}
`
Background Images - Preload Slide 1
Preloading the first slide improves performance by starting the image download earlier
`html

...

``