Hi, is there an option to have the slider fade in and out instead of the default animation? I tried giving this option a try (#28) but unfortunately no success. Thanks

hello this has perfect functionality for a background image slider. Although my client now wants a fade and not a slit transition. Is it possible to do this with this slider?

The animation works only if I click on the nav buttons. Is there any way that the animation starts on its own with a timer attached to it which can be controlled?

I am using this slider one of my project but I want to start sliding when my page loaded successfully rather than click on navigation.

Hello, I wonder if it is possible to add a navigation bar instead of arrows or dots. I had several tries but failed.
I guess i have to modify the javascript part, but I am very uncommon with it. I already tried to jump to a specific slide e with a data hash, doesn't work. Any ideas? Thanks in advance for your advice.

Hi,

Is it possible to stop the slideshow on mouseover?

Thanks.

The transitions are probably too much to ask for IE 8 compatibility, but I was trying to at least get the background-size to work properly. Attempted using https://github.com/louisremi/background-size-polyfill but had no luck. Perhaps if you have some time you could take a look.

There seems to be no custom autoplay interval setting, in the project we are working on, this is necessary for each slider to have it's own show time.

Are there any chances this will be implemented? Or maybe anyone did that before me and want to navigate me to the right direction on how to make it?

Love this slider! But it's not working smoothly as it did before after the iOS8 upgrade. =(

If you do a bit of tab switching when you come back to your tab with the slider on it is stuck. (Firefox 28 on XP)

When this happens, links (eg CTA hyperlinks) and the nav bullet links don't work.

after setting "autoplay" to "true".. it works fine only we stay in the same page!!.. if we moves on to another page & come back again means the autoplay stopped working & navigation dots doesn't work!!..

Kindly solve this issue as soon as possible!!.. My clients are waiting for the fix!!..

P.S. I tested this on "index2.html"..

Hi,

I love your plugin (especially the nav-dots) but I would prefer a simple horizontal transition, how would I go about doing this?

Thanks!

Hey, maintainer(s) of codrops/SlitSlider!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library codrops/SlitSlider is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "codrops/SlitSlider",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

After the first round of banner effect, the second round (when it loops the first picture again), only in Firefox web browser, the fade in and fade out effects are gone, and the images are displayed without the effects beforehand.

It would be very nice to have tagged release - 1.1.0

I've noticed that where slitslider is loaded masonry animation stops working, please fix this issue
thanks

hi,
not work on :iphone , ipad, safari Mountain lion

Work on Firefox mac

I am trying to build a new editor for the slider where you upload a photo and then set the text on the slide, but the slider does not seem to work with the injected html.

How can I dynamically add a new slide to the slider without breaking it?

Is it possible to navigate the slides with mousewheel?

I tried implementing the slider into an existing design but the two times i have tried to implement the slider I have received two similar errors. The first error says
TypeError: Modernizr.prefixed is not a function

...s.transEndEventName = this.transEndEventNames[ Modernizr.prefixed( 'transition' ...

The second error says
TypeError: #slider.prefixed is not a function

onBeforeChange : function( slide, pos ) ...

Thanks in advance

Hi, can you help me?
I´m trying to add new items but it does´t work.
How can i do that?
Thanks

Hello there. I'm nobie at web-programming, but I try hard, so the question is how I can add new Item in that slider.

` $(function() {

			var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
			ss.add($items);
			
			var Page = (function() {

				var $navArrows = $( '#nav-arrows' ),
					$nav = $( '#nav-dots > span' ),
					slitslider = $( '#slider' ).slitslider( {
						onBeforeChange : function( slide, pos ) {

							$nav.removeClass( 'nav-dot-current' );
							$nav.eq( pos ).addClass( 'nav-dot-current' );

						}
					} ),

					init = function() {

						initEvents();
						
					},
					initEvents = function() {


						// add navigation events
						$navArrows.children( ':last' ).on( 'click', function() {

							slitslider.next();
							return false;

						} );

						$navArrows.children( ':first' ).on( 'click', function() {
							
							slitslider.previous();
							return false;

						} );

						$nav.each( function( i ) {
						
							$( this ).on( 'click', function( event ) {
								
								var $dot = $( this );
								
								if( !slitslider.isActive() ) {

									$nav.removeClass( 'nav-dot-current' );
									$dot.addClass( 'nav-dot-current' );
								
								}
								
								slitslider.jump( i + 1 );
								return false;
							
							} );
							
						} );

					};

					return { init : init };

			})();

			Page.init();
			

			/**
			 * Notes: 
			 * 
			 * example how to add items:
			 */

			/*
			
			# var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');
			
			// call the plugin's add method
			# ss.add($items);

			*/`

Still don't get where I should write this code....

How can I hide arrows if my slide show consists of only one item?

I'm working with transparent images.

During translation effect the splitted image lose transparent value and became a white-background image.

I set optOpacity value both 0 or 1 but doesn't change.

Are transparent images supported?

thanks

Hello. Probably my mistake but my slider that is based on index2.html does not autoplay.

$(function() {
var Page = (function() {
var $nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
autoSlide: true,
autoSlideTimeout: 100,
onBeforeChange : function( slide, pos ) {
$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );
}
} ),
init = function() {
initEvents();
},
initEvents = function() {
$nav.each( function( i ) {
$( this ).on( 'click', function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
});

$( document ).ready(function() {
$('#slider').slideDown("slow");
});

I'm trying to get the actual chosen element when switching the slider from one to the next element.

this is my onAfterChange. I thought, when I call this, slide returns the new element, but it always returns the old one.

This is my Page-object:

var Page = (function () {

var $navArrows = $('#nav-arrows'),
    $nav = $('#nav-dots > span'),
slitslider = $('#slider').slitslider({
    onBeforeChange: function (slide, pos) {

        $nav.removeClass('nav-dot-current');
        $nav.eq(pos).addClass('nav-dot-current');

    },
    onAfterChange: function (slide, pos) {
        var id = $(slide).attr('id');
        alert(id);
        return true;
    }
}),

but when I want to switch to the next one, the alert always prints the id of the previous element instead of the current one.
Funny is, when I switch back to the previous element, the alert prints the correct id. The pos-parameter is always correct.

Any idea?

Tried to use in on a wordpress theme, did not work. I think problem comes from the jQuery version. It works fine with 1.8.1 or 1.8.2 but no luck with 1.7.2.

Hello,

I've implemented this great slider into Magento. I've tested it with jQuery 1.7.2 also, and it worked. However, in Magento the navigation does not work, but autoplay does. Any ideas on what the issue could be? No errors in console...

This is the site: http://dev.imok.ro/winteroutlet/

Thanks!

it's wired that it doesn't work in opera, you can check that by your self