cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
<div class="container">
  <h1 class="page-header">Another jQuery sliders plugin : FlexSlider</h1>
  <div class="row">
    <div class="col-md-6">
      <h2>Classic fading gallery</h2>
      <div class="flex-slider fs-initialize fs-animation-fade" data-fs-animation="fade">
        <div class="_inner">
          <div class="slider-placeholder">
          </div>
          <div class="slider-content">
            <div class="fs-nav">
              <span class="nav-item nav-button nav-previous">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </span>
              <span class="nav-item nav-location">
                <span class="loc-label">Nouveauté</span>
                <span class="loc-current">0</span>/<span class="loc-total">0</span>
              </span>
              <span class="nav-item nav-button nav-next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </span>
            </div>
            <div class="fs-text"></div>
          </div>
        </div>

        <div class="_slides">
          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-412678.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-412678.jpg
            </div>
          </div>

          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-310788.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-310788.jpg
            </div>
          </div>

          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-51906.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-51906.jpg
            </div>
          </div>

          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-140830.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-140830.jpg
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-md-6">
      <h2>Classic sliding gallery</h2>
      <div class="flex-slider fs-initialize fs-animation-slide" data-fs-animation="slide">
        <div class="_inner">
          <div class="slider-placeholder">
          </div>
          <div class="slider-content">
            <div class="fs-nav">
              <span class="nav-item nav-button nav-previous">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </span>
              <span class="nav-item nav-location">
                <span class="loc-label">Nouveauté</span>
                <span class="loc-current">0</span>/<span class="loc-total">0</span>
              </span>
              <span class="nav-item nav-button nav-next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </span>
            </div>
            <div class="fs-text"></div>
          </div>
        </div>

        <div class="_slides">
          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-46889.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-46889.jpg
            </div>
          </div>

          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-100491.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-100491.jpg
            </div>
          </div>

          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-244216.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-244216.jpg
            </div>
          </div>

          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-114872.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-114872.jpg
            </div>
          </div>

          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-285603.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-285603.jpg
            </div>
          </div>

          <div class="fs-slide">
            <div class="slide-main">
              <img src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-128866.jpg" />
            </div>
            <div class="slide-text">
              src: https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-128866.jpg
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              @import 'compass';
$brand-primary: red;
$color-one: pink;

$screen-xs-min: 480px;
$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

// BONUS OVERRIDE BOOTSTRAP & co -------------------------------------------------
body {
  background-color: #222;
}

.container {
  background-color: #FFF;
  border-radius: 4px;
  padding: 15px;
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 60px;
  @include box-shadow(6px 6px 0 #111);
  > h1 {
    margin-top: 0;
  }
}

.flex-slider {
  border-radius: 4px;
}




// FLEX SLIDER : MINIMAL REQUIREMENTS --------------------------------------------
.flex-slider {
	position: relative;
  z-index: 1;
	overflow: hidden;

	&.enable-generic-loading {
		> ._inner, > ._slides {
			@include opacity(0);
		}
	}

	&.fs-has-nav-buttons {
		.fs-tokens {
			display: block;
		}

		.fs-nav {
			.nav-button {
				display: table-cell;
			}
		}
	}

	&.fs-disable-animation {
		// ANIMATION TYPE FADE & SLIDE
		&.fs-animation-fade, &.fs-animation-slide {
			.fs-slide { @include transition(none); }
		}
	}

	// ANIMATION TYPE FADE
	&.fs-animation-fade {
		.fs-slide {
			@include opacity(0);
			@include transition(opacity 1s ease);
			&.current {
				z-index: 30;
				@include opacity(1);
			}
		}
	}

	// ANIMATION TYPE SLIDE
	&.fs-animation-slide {
		.fs-slide {
			left: 100%;
			@include transition(left .75s ease-out);
		}
	}

	img {
		max-width: 100%;
		height: auto;
	}

	a {
		color: $color-one;
		&:hover { color: lighten($color-one, 14%); }
	}

	> ._inner {
		position: relative;
		//z-index: 15; // pas de z-index, c'est les enfants qui définissent leur z-index
	}

	.fs-slide {
		position: absolute;
		z-index: 25;
		top: 0;
		left: 0;
		width: 100%;

		&.is-loading {
			@include opacity(0);
		}

		.slide-text {
			display: none;
		}
	}

	.slider-placeholder {
		visibility: hidden;
		@include opacity(0);
	}

	.slider-content {
		background-color: #222;
		background-color: rgba(0, 0, 0, .5);
    color: #FFF;
		padding: 1em 1.8em;
		position: relative;
		z-index: 50;
	}

	// MAGIC CAROUSEL -------------------
	.magic-carousel {
		position: relative;
		height: 0;
		width: 100%;
		// à régler suivant l'endroit où est posé le slider = dépend du ratio hauteur/largeur*100
		padding-top: 25%;
	}

	.fs-nav {
		display: table;
		table-layout: fixed;
		width: 100%;
		@include user-select(none);

		//-- ITEM -----------------------
		.nav-item {
			line-height: 1em;
			display: table-cell;
			vertical-align: middle;
			width: 100%;
		}

		//-- ITEM : BUTTON --------------
		.nav-button {
			display: none;
			width: 2em;
			cursor: pointer;

			&.disabled {
				@include opacity(.5);
			}
		}

		.nav-next {
			text-align: right;
		}

		//-- ITEM : LOCATION ------------
		.nav-location {
			font-size: .65em;
			font-weight: 200;
			text-transform: uppercase;
			@include opacity(.5);
		}
	}

	.fs-tokens {
		display: none;
		text-align: center;
		margin: .4em auto;

		> ._label {
			font-size: .85em;
			line-height: 1em;
			margin-bottom: .4em;
			@include opacity(.4);
		}

		.token-item {
			background-color: currentcolor;
			color: $brand-primary;
			display: inline-block;
			vertical-align: middle;
			line-height: 1em;
			margin: .4em .2em;
			height: 1em;
			width: 1em;
			border: .25em solid;
			@include border-radius(50%);
			cursor: pointer;

			&.current {
				background-color: $color-one;
			}
		}
	}

	.fs-text {
    margin-top: .6em;
    padding-top: .4em;
    border-top: 1px solid rgba(255, 255, 255, .1);
    word-break: break-word;
	}
}



@media (min-width: $screen-sm-min) {
  .flex-slider {
    &.content-left {
      .slider-content {
        right: 50%;
        left: 0;
      }
    }

    .slider-content {
      position: absolute;
      top: 10%;
      right: 0;
      left: 50%;
    }

    .fs-tokens {
      margin: 1em auto;
    }
  }
}


@media (min-width: $screen-md-min) {
  .flex-slider {
    .slider-content {
      font-size: 1.2em;
    }

    .fs-tokens {
      .token-item {
        margin: .6em .4em;
      }
    }
  }
}


@media (min-width: $screen-lg-min) {
  .flex-slider {
    .slider-content {
      top: 20%;
    }
  }
}
            
          
!
            
              var flex_log = function(text, type) {
	type = (typeof type != 'undefined') ? type : 'log';

	var text_color = '';
	if(type == 'warning') {
		text_color = '#E67E22';
	} else if(type == 'error') {
		text_color = '#E74C3C';
	} else if(type == 'success') {
		text_color = '#27AE60';
	}

	console.log('%c[FLEX-SLIDER/'+type.toUpperCase()+'] ' + text, 'color: '+text_color);
};

jQuery.fn.extend({
	flexSlider : function(opts) {
		var $win = $(window);

		var params = {
      elemsNbByView : 'auto',
			loading_class : 'is-loading',
			has_nav_btns_class : 'fs-has-nav-buttons',
      swype : { minLengthMove : 20 }, // TODO : à revoir car récupérer d'un autre script
      // autocycle : { speed : 450, to_start : true }, SAMPLE
      autocycle : false,
      loop_slides : false,

      //-- DATA ----------------------------------------------------------------------------
      slides_container   : '._slides',     // slides data (image and text)
      slides             : '.fs-slide',

      //-- INNER ---------------------------------------------------------------------------
      slider_inner    	: '._inner',
      slide_placeholder 	: '.slider-placeholder',// just the slide (image or html)
      slide_text   		: '.fs-text', 			// info current slide + nav
      //---- INNER > TOKENS -------
      tokens_container 	: '.fs-tokens',
      tokens 				: '.token-item',
      //---- INNER > NAV ----------
      nav_buttons         : '.nav-button',
      btn_next            : '.nav-next',
      btn_previous        : '.nav-previous',
      nav_location        : '.nav-location', // ex: "Slide 1/10"
      location_current    : '.loc-current',
      location_total      : '.loc-total',

      //-- CALLBACKS -----------------------------------------------------------------------
      callbackInitialize : function(fs_data) {
        // nothing to do here...
      },
      callbackOnLoadElem : function(fs_data, $elem, index) {
        // nothing to do here...
      },
      callbackPosition : function(fs_data, newPos, oldPos, fromResize) {
        // nothing to do here...
      },
      $autocycleNodesStop : null,
      autocycleCallbackOnElement : function(fs_data, numElem) { },
      callbackSwype : function(fs_data, direction, sens, longueur, vitesse) {
        // Doit retourner FALSE quand le déplacement est en cours et à l'inverse TRUE
        // nothing to do here... BUT must return TRUE or FALSE
        //   TRUE : unlock scrolling
        //   FALSE : lock scrolling
      },
      callbackSwypeEnd : function(fs_data, direction, longueur, vitesse) {
        // nothing to do here...
      }
    };

		jQuery.extend(params, opts);

		// NATIVE ANIMATIONS ---------------------------------------------------------------------
    var flex_animations = {
			'fade' : {
				callbackPosition : function(fs_data, position, previousPosition, fromResize) {
					fs_data.$slides.removeClass('current previous');
					fs_data.$slides.eq(position).addClass('current');
					if(position != previousPosition)
						fs_data.$slides.eq(previousPosition).addClass('previous');
				},
				callbackSwypeEnd : function(fs_data, direction, sens, longueur, vitesse) {
					if(direction == 'horizontal') {
						var vitesseWhenChange = $win.width()*5/100;
						if(Math.abs(longueur) > 0 || Math.abs(vitesse) > vitesseWhenChange) {
							// On ré-active les animations CSS
							fs_data.enable_animate();

							if(longueur > 0) fs_data.next();
							else fs_data.previous();

							fs_data.old_elems_pos = {};
						}
					}
				}
			},
			'slide' : {
				callbackPosition : function(fs_data, position, previousPosition, fromResize) {
					var sizeOfAnElem = fs_data.$slides.first().width();
					var offset = -position*sizeOfAnElem;
					fs_data.$slides.each(function(i) {
						$(this).css({ left: (i*sizeOfAnElem)+offset });
					}).slice(position, position+fs_data.get_nb_by_view());
				},
				callbackSwype : function(fs_data, direction, sens, longueur, vitesse) {
					if(direction == "horizontal") {
						// Si on dépasse le PREMIER ou le DERNIER élément, on arrête le Swype
						if((sens == 1 && fs_data.current_pos < (fs_data.$slides.length-1)) ||
							(sens == -1 && fs_data.current_pos > 0)) {
							// On désactive les animations CSS pour ne pas ralentir le swype
							//   (positionne JS + animation CSS = mauvais mélange)
							fs_data.disable_animate();

							fs_data.$slides.each(function(i) {
								if(typeof(fs_data.old_elems_pos[i]) == 'undefined')
									fs_data.old_elems_pos[i] = parseInt($(this).css('left'));

								$(this).css({ left: fs_data.old_elems_pos[i]-(longueur*sens) });
							});
						}
						return false; // lock scroll
					}
					return true; // unlock scroll
				},
				callbackSwypeEnd : function(fs_data, direction, sens, longueur, vitesse) {
					if(direction == 'horizontal') {
						var vitesseWhenChange = $win.width()*5/100;
						if(Math.abs(longueur) > 0 || Math.abs(vitesse) > vitesseWhenChange) {
							// On ré-active les animations CSS
							fs_data.enable_animate();

							if(longueur > 0) fs_data.next();
							else fs_data.previous();

							fs_data.old_elems_pos = {};
						}
					}
				}
			}
    };

    //-- INIT LOOP ---------------------------------------------------------------------------
    this.each(function() {
			var $flex_slider = $(this);

			if(typeof $flex_slider.data('fs-is-initied') != 'undefined' || $flex_slider.data('fs-is-initied') == true) {
				flex_log('Flex Slider already defined', 'warning');
				return;
			}

			var fs_data = {
                is_initied       : false,
				current_pos      : (typeof $flex_slider.data('fs-start-pos') != 'undefined') ? parseInt($flex_slider.data('fs-start-pos')) : 0,
                old_elems_pos    : {},
                native_animation : null,
                // JQ NODES -------------
                $tokens_container 	: $flex_slider.find(params.tokens_container),
                $nav_buttons        : $flex_slider.find(params.nav_buttons),
				$nav_location 		: $flex_slider.find(params.nav_location),
                $slides_container   : $flex_slider.find(params.slides_container),
                $slider_inner       : $flex_slider.find(params.slider_inner),
                $slides 	        : null
			};

			// SLIDER -------
			fs_data.$slider_placeholder = fs_data.$slider_inner.find(params.slide_placeholder);
			fs_data.$slider_text 		= fs_data.$slider_inner.find(params.slide_text);
			// SLIDES -------
			fs_data.$slides = fs_data.$slides_container.find(params.slides);
			// TOKENS -------
			fs_data.$tokens = fs_data.$tokens_container.find(params.tokens);
			// NAV ----------
			fs_data.$loc_current = fs_data.$nav_location.find(params.location_current);
			fs_data.$loc_total = fs_data.$nav_location.find(params.location_total);

            // INIT DATA FROM ATTR ------
            // -- INIT DATA ANIM --
			var data_anim = $flex_slider.data('fs-animation');
            if(typeof data_anim != 'undefined') {
                if(typeof flex_animations[data_anim] != 'undefined')
                    fs_data.native_animation = flex_animations[data_anim];
                else
                    flex_log('invalid native animation (data: '+data_anim+')', 'error');
            }



			var goto = function(position, previousPosition, fromResize) {
				var $future_slide = fs_data.$slides.eq(position);

				// ON RESIZE > DISABLE ANIMATION ----
				fromResize = (typeof fromResize == 'undefined') ? false : fromResize;
				if(fromResize) fs_data.disable_animate();
				else fs_data.enable_animate();

				// SET SLIDE NUMBER ----
				if(typeof $future_slide.data('fs-nav-location') != 'undefined') {
					if(fs_data.$nav_location.length > 0)
						fs_data.$nav_location.html($future_slide.data('fs-nav-location'));
				} else {
					if(fs_data.$loc_current.length > 0)
						fs_data.$loc_current.html(position+1);
				}

				// SET PLACEHOLDER ----
				if($future_slide.find('.slide-main').length > 0)
					fs_data.$slider_placeholder.html($future_slide.find('.slide-main').html());

				// SET TEXT ----
				if($future_slide.find('.slide-text').length > 0)
					fs_data.$slider_text.html($future_slide.find('.slide-text').html());


				// NATIVE CALLBACK POSITION ----
				if(fs_data.native_animation != null)
					fs_data.native_animation.callbackPosition(fs_data, position, previousPosition, fromResize);


				// USER or DEV CALLBACK POSITION ----
				params.callbackPosition(fs_data, position, previousPosition, fromResize);

				fs_data.current_pos = position;
				fs_data.toggle_buttons();
				fs_data.toggle_tokens();
			};

			var reset = function() {
				fs_data.$slides.removeAttr('style');
				fs_data.is_initied = false;
			};

			fs_data.disable_animate = function() {
				$flex_slider.addClass('fs-disable-animation');
			};

			fs_data.enable_animate = function() {
				$flex_slider.removeClass('fs-disable-animation');
			};

			fs_data.disable_buttons = function() {
				$flex_slider.removeClass(params.has_nav_btns_class);
			};

			fs_data.toggle_buttons = function() {
				if(fs_data.$slides.length/fs_data.get_nb_by_view() > 1) {
					$flex_slider.addClass(params.has_nav_btns_class);

					if(params.loop_slides == false) {
						fs_data.$nav_buttons.removeClass('disabled');
						if(!fs_data.prevAvailable()) {
							fs_data.$nav_buttons.filter(params.btn_previous).addClass('disabled');
						} else if(!fs_data.nextAvailable()) {
							fs_data.$nav_buttons.filter(params.btn_next).addClass('disabled');
						}
					}
				} else {
					fs_data.disable_buttons();
				}
			};

			fs_data.toggle_tokens = function() {
				if(fs_data.$tokens_container.length > 0 && fs_data.$tokens.length > 0)
					fs_data.$tokens.removeClass('current').eq(fs_data.current_pos).addClass('current');
			};

			fs_data.nextAvailable = function () {
                // flex_log('nextAvailable()');
				return fs_data.current_pos < fs_data.$slides.length-1;
			};

			fs_data.prevAvailable = function () {
                // flex_log('prevAvailable()');
				return fs_data.current_pos > 0;
			};

			fs_data.next = function() {
                // flex_log('next()');
				var old_pos = fs_data.current_pos;
				if(fs_data.nextAvailable()) {
					fs_data.current_pos++;
					goto(fs_data.current_pos, old_pos);
				} else if(params.loop_slides) {
					fs_data.current_pos = 0;
					goto(fs_data.current_pos, old_pos);
				}
			};

			fs_data.previous = function() {
                // flex_log('previous()');
				var old_pos = fs_data.current_pos;
				if(fs_data.prevAvailable()) {
					fs_data.current_pos--;
					goto(fs_data.current_pos, old_pos);
				} else if(params.loop_slides) {
					fs_data.current_pos = fs_data.$slides.length - 1;
					goto(fs_data.current_pos, old_pos);
				}
			};

			fs_data.goto = function(index) {
				fs_data.current_pos = index;
				goto(index, fs_data.current_pos);
			};

			// TODO : à revoir
			fs_data.get_nb_by_view = function() {
                return 1;
				var real_nb_view = params.elemsNbByView;
				if(params.elemsNbByView == 'auto') {
					var container_width = $flex_slider.outerWidth(true);
					var total_width_breaker = 0;
					var nb_elems_by_view = 0;

					fs_data.$slides.each(function() {
						total_width_breaker += $(this).outerWidth(true);
						if(total_width_breaker > container_width)
							return;

						nb_elems_by_view++;
						real_nb_view = nb_elems_by_view;
					});
				}

				return real_nb_view;
			};



			var onload_element = function($element, num_element) {
				$element.removeClass(params.loading_class);
				params.callbackOnLoadElem(fs_data, $element, num_element);
				nb_media_preloaded--;
			};

			/**
			 *
			 * @param $element
			 * @param num : int : emplacement du slide
			 * @param callback : null|function : fonction de callback au load de l'élément :
			 * 						par défaut il appelle la méthode onload_element();
			 */
			var preload_element = function($element, num, callback) {
				if($element.find('img').length > 0) {
					var $img = $element.find('img');
					var real_img = new Image();
					var from_data = typeof $img.data('src') != 'undefined';
					// SI on utilise du lazy load on utilise la bonne source
					real_img.src = (from_data) ? $img.data('src') : $img.attr('src');
					real_img.onerror = real_img.onload = function () {
						if(from_data)
							$img.attr('src', $img.data('src'));

						if(typeof callback != 'undefined') callback($element, num);
						else onload_element($element, num);
					};
				} else {
					// Aucune image, potentiellement une iframe donc aucun preload possible
					if(typeof callback != 'undefined') callback($element, num);
					else onload_element($element, num);
				}
			};

			// -- Init position des éléments ------------------------------------------------------
			var is_initializing = false;
			var nb_media_preloaded = 0;
			var initialize = function() {
				if(!fs_data.is_initied) {
					fs_data.is_initied = true;
					$flex_slider.data('fs-is-initied', true).addClass('enable-generic-loading');
					// if($win.width() > params.winWidthWhenDisable && !is_initializing) {
					if(!is_initializing) {
						is_initializing = true;

						if(fs_data.$loc_total.length > 0)
							fs_data.$loc_total.html(fs_data.$slides.length);

						nb_media_preloaded = fs_data.$slides.length;

						// Ajout class de loading
						fs_data.$slides.addClass(params.loading_class);

						// PRELOAD de la PREMIERE SLIDE
						var $first_slide = fs_data.$slides.first();
						var nb_preload = fs_data.$slides.length - 1; // -1 car on ne compte pas la 1ère slide
						preload_element($first_slide, 0, function() {
							onload_element($first_slide, 0);

							params.callbackInitialize(fs_data);
							goto(fs_data.current_pos, 0, false);

							$flex_slider.removeClass('enable-generic-loading');

							if(nb_preload > 0) {
								// Preload des AUTRES éléments (image|iframe|...)
								fs_data.$slides.each(function(num) {
									// On preload plus le 1ère élément car déjà fait plus haut
									if(num != 0) {
										preload_element($(this), num, function($element, num) {
											$element.removeClass('is-loading');
											nb_preload--;
										});
									}
								});
							} else {
								$flex_slider.removeClass('enable-generic-loading');
							}
						});

						/*if(nb_media_preloaded < 1) {
							params.callbackInitialize(fs_data);
							// params.callbackPosition(fs_data, 0, 0, false);
							goto(0, 0);
							fs_data.toggle_buttons();
						} else {
							var itvWaitingLoad = null;
							var WaitingLoadlimit = 1000;
							var nbWait = 0;
							itvWaitingLoad = setInterval(function() {
								if(nb_media_preloaded < 1 || nbWait > WaitingLoadlimit) {
									clearInterval(itvWaitingLoad);
									params.callbackInitialize(fs_data);
									// params.callbackPosition(fs_data, 0, 0, false);
									goto(0, 0);
									fs_data.toggle_buttons();
								}
								nbWait++;
							}, 250);
						}*/
					}
				}
			};
			initialize();

			//-- EVENTS ---------------------------------------------
			fs_data.$nav_buttons.on('click', function() {
				// flex_log('nav buttons click');
				if(!$flex_slider.hasClass(params.loading_class)) {
					var $clickedBtn = $(this);
					if($clickedBtn.hasClass(params.btn_next.substr(1))) {
						fs_data.next();
					} else {
						fs_data.previous();
					}
				}
			});

			fs_data.$tokens.on('click', function() {
				if(!$flex_slider.hasClass(params.loading_class)) {
					goto($(this).index(), fs_data.current_pos);
					fs_data.current_pos = $(this).index();
				}
			});

			var oldGalSize = $flex_slider.width();
			$win.on('resize', function() {
				// if($win.width() > params.winWidthWhenDisable) {
					if(!fs_data.is_initied) {
						initialize();
					} else {
						if($flex_slider.width() != oldGalSize) {
							goto(fs_data.current_pos, fs_data.current_pos, true);
							// params.callbackPosition(fs_data, fs_data.current_pos, fs_data.current_pos-1, true);
						}

						oldGalSize = $flex_slider.width();
					}
				// } else {
				// 	reset();
				// }
			});


			//-- CYCLE ----------------------------------------------
			if(params.autocycle != null && params.autocycle != false) {
				var num_elem = 1;
				var sens = 1;
				fs_data.stop_cycle = function() {
					clearInterval(cycleChangeAuto);
					params.$autocycleNodesStop.off('mouseenter').off('mouseleave');
				};

				var cycle_elements = function() {
					// Si l'on souhaite redémarrer du début on doit reset avant d'incrémenter
					if(params.autocycle.to_start == true) {
						if(!fs_data.nextAvailable()) {
							num_elem = 0;
							fs_data.current_pos = -1;
						}
					}

					params.autocycleCallbackOnElement(fs_data, num_elem);
					//-- CHANGEMENT DE PAGE
					if(num_elem%fs_data.get_nb_by_view() == 0) {
						//params.autocycleCallbackOnPage(fs_data, num_page);
						var old_pos = fs_data.current_pos;
						fs_data.current_pos += sens;

						// Si l'on souhaite redémarrer dans le sens inverse on change le sens après avoir incrémenté
						if(params.autocycle.to_start == false) {
							if(sens == 1 && !fs_data.nextAvailable()) {
								sens = -1;
							} else if(!fs_data.prevAvailable()) {
								sens = 1;
							}
						}
					}
					goto(fs_data.current_pos, old_pos);
					num_elem += sens;
				};

				//--- CYCLE AUTO
				var cycleChangeAuto = setInterval(cycle_elements, parseInt(params.autocycle.speed));
				if(params.$autocycleNodesStop != null) {
					params.$autocycleNodesStop.push($flex_slider[0]);
				} else {
					params.$autocycleNodesStop = $flex_slider;
				}

				params.$autocycleNodesStop.on('mouseenter', function() {
					clearInterval(cycleChangeAuto);
				}).on('mouseleave', function() {
					cycleChangeAuto = setInterval(cycle_elements, parseInt(params.autocycle.speed));
				});
			}


			//-- SWYPE ----------------------------------------------
            // TODO : à revoir car récupérer d'un autre script
			if(params.swype != null && params.swype != false) {
				// FINGER POSITIONS
				var f_pos = {
					start 	: { x: 0, y: 0 },
					end 	: { x: 0, y: 0 },
					old 	: { x: 0, y: 0 }
				};
				var vitesse = 0;
				//var currNumSlide = 0;
				var direction = null;
				var $nodeSwype = $flex_slider;
				//var nbSlideSwyped = 0;
				//var lengthWhenChange = (typeof(opt.sizeWhenChange) == 'number') ? 20 : $(window).width()*25/100;
				//var lengthWhenChange = 20;

				//--- TOUCH MOVE --------------------------------------------------
				var ghostMethod = function(e) {
					e.bubbles = onFingerMove(e.originalEvent.touches[0]);
					return e.bubbles;
				};
				$nodeSwype.off('touchmove', ghostMethod).on('touchmove', ghostMethod);
				/* onMove Final Method */
				var onFingerMove = function(oTouch) {
					f_pos.old.x = f_pos.end.x;
					f_pos.end.x = oTouch.pageX;
					f_pos.old.y = f_pos.end.y;
					f_pos.end.y = oTouch.pageY;
					vitesse 	= f_pos.end.x-f_pos.old.x;

					// si longueur mouvement > longueur mini => on calcule la direction
					// si on est en vertical => on bloque tout mouvement (direction par rapport au départ)
					// horizontal, on commence à déplacer l'image
					var longueur = Math.sqrt(Math.pow(f_pos.start.x-f_pos.end.x,2)+Math.pow(f_pos.start.y-f_pos.end.y,2));

					// Détermination de la direction
					if(direction === null && longueur > params.swype.minLengthMove) {
						if(Math.abs(f_pos.old.x-f_pos.end.x)>Math.abs(f_pos.old.y-f_pos.end.y)) {
							direction = "horizontal";
						} else {
							direction = "vertical";
						}
					}

					// Détermination du sens
					var sens = ((f_pos.start.x-f_pos.end.x) < 1) ? -1 : 1;

					var swype_return = true;

					if(fs_data.native_animation != null && typeof fs_data.native_animation.callbackSwype != 'undefined')
						swype_return &= fs_data.native_animation.callbackSwype(fs_data, direction, sens, longueur, vitesse);

					swype_return &= params.callbackSwype(fs_data, direction, sens, longueur, vitesse);
					return swype_return;
				};


				//--- TOUCH START --------------------------------------------------
				ghostMethod = function(e) {
					// reset la direction
					direction = null;
					var touchPos = e.originalEvent.touches[0];

					// init positions du doigt
					f_pos.end.x = f_pos.start.x = touchPos.pageX;
					f_pos.end.y = f_pos.start.y = touchPos.pageY;
				};
				$nodeSwype.off('touchstart', ghostMethod).on('touchstart', ghostMethod);


				//--- TOUCH END --------------------------------------------------
				ghostMethod = function(e) {
					var lengthTraveled = f_pos.start.x - f_pos.end.x;

					if(fs_data.native_animation != null && typeof fs_data.native_animation.callbackSwypeEnd != 'undefined')
						fs_data.native_animation.callbackSwypeEnd(fs_data, direction, sens, lengthTraveled, vitesse);

					params.callbackSwypeEnd(fs_data, direction, lengthTraveled, vitesse);
				};
				$nodeSwype.off('touchend', ghostMethod).on('touchend', ghostMethod);
			}

			this.flex_slider = fs_data;
			return true;
        });

		return this;
    }
});


//-- AUTO INIT FLEX SLIDER ----------------------------------
$(function() {
	$('.flex-slider.fs-initialize').flexSlider();
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console