YerSlider

Detaching

Detaching gives us the possibility to grab, hide and put slide content outside the slider items and may elsewhere in the document.

  • 0

    ( 0 ) Quis aute iure reprehenderit in voluptate velit esse.

  • 1

    ( 1 ) Tityre, tu patulae recubans sub tegmine fagi dolor. Curabitur blandit tempus ardua ridiculus sed magna.

  • 2

    ( 2 ) Tityre, tu patulae recubans sub tegmine fagi dolor. Curabitur blandit tempus ardua ridiculus sed magna.

  • 3

    ( 3 ) Tityre, tu patulae recubans sub tegmine fagi dolor. Curabitur blandit tempus ardua ridiculus sed magna.

  • 4

    ( 4 ) Sed haec quis possit intrepidus aestimare tellus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus. Etiam habebis sem dicantur magna mollis euismod. Petierunt uti sibi concilium totius Galliae in diem certam indicere.

  • 5

    ( 5 ) Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Pellentesque habitant morbi tristique senectus et netus. Mercedem aut nummos unde unde extricat, amaras. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.

  • 6

    ( 6 ) Mercedem aut nummos unde unde extricat, amaras. Praeterea iter est quasdam res quas ex communi. Quo usque tandem abutere, Catilina, patientia nostra?

  • 7

    ( 7 ) Quis aute iure reprehenderit in voluptate velit esse.

  • 8

    ( 8 ) Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Pellentesque habitant morbi tristique senectus et netus. Mercedem aut nummos unde unde extricat, amaras. Morbi odio eros, volutpat ut pharetra vitae, lobortis sed nibh.

  • 9

    ( 9 ) Sed haec quis possit intrepidus aestimare tellus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Sed haec quis possit intrepidus aestimare tellus. Etiam habebis sem dicantur magna mollis euismod. Petierunt uti sibi concilium totius Galliae in diem certam indicere.

  • 10

    ( 10 ) Tityre, tu patulae recubans sub tegmine fagi dolor. Curabitur blandit tempus ardua ridiculus sed magna.

var myslider = new YerSlider();
myslider.init({
	sliderid: '.mysliderclass',
	slidegap: 10,
	slidegroupresp: {
		0: 1,
		450: 2,
		900: 3
	},
	loop: 'infinite',
	animationspeed: 1000,
	bullets: true,
	autoplay: true,
	autoplayinterval: 2000,
	autoplaydelaystart: 0,
	autoplaystoponhover: true,
	
detach: {
		
// targets inserting new empty detaching containers outside the slider

		targets: { 
			'1': {
				selector_wrap: '.detach-target',
				selector_item: '.detach-target-item',
				insert_selector: 'viewport', 
// 'wrap' (the current slider wrap) / 'viewport' / 'bullets' / 'thumbs' / class / id

				insert_method: 'after', 
// before, after, append, prepend

				template_wrap: '<div class="detach-target">{content}</div>', 
// html

				template_item: '<div class="detach-target-item">{content}</div>', 
// html

				change: function( p ) {
					
					
/**
						This function is called on every slide-change and
						is intended to show the current detachings.
						
						p: {
							items: objects,
							items_current: objects
						}
					*/

					
					
// example of the demo showing only detachings of the current slides

					
					var root = p.items.parents( '.detach-target' ),
						height = root.height();

					root.css( 'height', height + 'px' );
					
					window.setTimeout( function () {
					
						p.items.fadeOut( 90 );
					}, 600 );
					
					window.setTimeout( function () {

						p.items_current.fadeIn( 300 );

						window.setTimeout( function () {
							
							root.css( 'height', 'auto' );
						}, 100 );

					}, 700 );
				},
			}
		},
		
// sources defining some slide content and put them into an target

		sources: { 
			'1': {
				target_id: '1',
				selector: '.detach-me p',
				source: 'element', 
// element / content

				remove: '.detach-me', 
// selector

			},
		},
	},

});