Glide.js how to change the effect

JavaScript
1

Good evening,

I recently rebuild the header of my website ( http://www.phermann.bplaced.net/new ). It now features a slider called Glide.js ( http://jedrzejchalubek.com/glide/ ). Everything is fine now as I got help in the CSS forums with the positioning and stuff, but I really want to change the sliding effect to a simple fade.

Since my JS skills are pretty bad I would like to have some help on how to find the section that is responsible for the sliding effect and what to change there.

Please excuse the harsh loading times caused by the pictures that are not edited for web yet.

Thanks!

2

These sliders are usually pretty complex, so it’s best to check first if they have built-in settings for changing this kind of behavior. In this case, the slider docs don’t indicate an option for changing from slide to fade, so honestly, I’d look for one that does have it as an out-of-the-box feature. There are lots of these things out there.

3

Okay. Can you recommend some alternatives to use? Thanks!

4

Best to do some googling for things like “full screen gallery” etc. I was going to suggest Supersized, but I can’t see an option to switch to fade their either. Maybe something like this? (found by googling): http://vegas.jaysalvat.com/ Or this? http://codecanyon.net/item/bgstretcher-jquery-background-resizer-slideshow/full_screen_preview/5328926

1 Like
5

Hi there,

I had a look at the slider in question and it seems that some other people wanted this feature.

If you check out that page, you can see that the plugin author added this as a milestone for a future release, then removed it again a month later. No idea why.

This in turn got me thinking about how one could add fade in/out functionality to the plugin, so I did.
You can see a demo here.

If you would like to play around with this, you can get the altered code here.

I would however add, that I pretty much crowbarred this feature into the existing code, just to see if it would work. It needs quite a bit of tidying up, so would still recommend that you do what Ralph says and look for a slider that supports this out of the box.

4 Likes
6

Holy shit. You are pure awesomeness :frowning:

I actually really don’t want to switch from Glide, so I would appreciate your alternative code then. If you improve it later on I could simply update the code then. I mean my website does not have 10 visitors per week so it wouldn’t be a drama if we would test the new feature. Although it should be working on Chrome, Firefox, Safari.

What critical downsides do I get when using your alternative sliding effect now?

Really thanks for that!

7

You’re welcome.
You don’t actually get any downsides apart from the fact that background images now fade and do not slide.
What caused me the biggest headache was the circular option, as that did loads of weird stuff, such as remove event handlers.

When I get a bit of time (ha ha!) I might look at cleaning this up a little, so that you can specify slide or fade as a transition type. At the moment only fade works.

Glad you found it useful anyway :smile:

8

Nice job Pullo :smile:

9

Thanks (although the code is still rather messy).
Is this something you’d be interested in using, too?

10

Yes probably I will Pullo. I will follow your progress.

1 Like
11

Its me again :smiley:.
I copied the new javascript into my files and then changed the html and css. Now the header is completely broken and I don’t know what to do to fix it. For me it looks like the Javascript is either not installed correctly or the slider didn’t start proper.

Thanks for the help and the code alteration for the fade effect :smile:
I uploaded the current status here.

Paul.

12

You seem to have copied the output of a diff into the page:

-			var glide = $('.slider').glide().data('api_glide');
+       var opts = { transitionType: "fade" },
+			     glide = $('.slider').glide(opts);


-			$(window).on('keyup', function (key) {
+			     //glide = $('.slider').glide(opts).data('api_glide');
-				if (key.keyCode === 13) {
-					glide.jump(3, console.log('Wooo!'));
-				};
-			});


-			$('.slider__arrows-item').on('click', function() {
+			// $(window).on('keyup', function (key) {
-				console.log(glide.current());
+			// 	if (key.keyCode === 13) {
-			});
+			// 		glide.jump(3, console.log('Wooo!'));
+			// 	};
+			// });
+
+			// $('.slider__arrows-item').on('click', function() {
+			// 	//console.log(glide.current());
+			// });

That will be causing the problem.

You can also check for errors in your browser’s console (F12 > Console)