Streaming live at 10am (PST)

Can you have multiple components in a slider?


#1

I am wondering if it is possible to include text fields, images, div blocks, etc.... in a slider so that each section of the slider can have multiple inputs. I am trying to figure a work around for not having to reload a page 9 times with changes in a section and using the slider ability for changing components.

Any thoughts?


#2

Hey, I'm not sure what you mean in your last sentence. Can you explain what you're trying to achieve?

The individual slides are basically divs that you can add anything to.


#3

Thanks for the reply @chunte21!

As I am using Webflow to build out an application and there is a step by step input process. I was wondering if I was able to have input fields in the slider so that each of the slider "frames is a step in the process.

An example of this is having the name and description fields in slider window one. When entered in and the "next" button is hit, it goes to slider 2 which has a series of drop down menus, a text entrance field, and a couple of radio buttons. When done fillling those out, I would hit next again and it would proceed to slider 3 with the next grouping of form fields.

I am trying to get the effect of having sub-pages within a "Master Page" so that the major content only opens once and the steps of the functioning part of the website cycle through, as I am hoping for a single screen design.

Thanks
Justin


#4

Hi @Socrademy, at the moment, we do not have built in step-by-step triggers for moving slide to slide, except for the slide navigation itself. You can create a slider with each slide having different elements, but the navigation is limited to the nav buttons, and at the moment, you cannot assign a button for example, to trigger the slide to move from one frame to the next.

You might also search the forums for this kind of functionality, the forums is also a good place to find some custom scripts or solutions to specific needs.


#5

http://forumhelp.webflow.com/ - Question #2

Public link: https://webflow.com/design/forumhelp?preview=7d7225924ead39e8d756436f8453e7cc

Code:

// Question #1

$('.q2-step1-next').click(function(e) {
	e.preventDefault();
	$('.step1-input1').removeClass('warning');

	if( !$('.step1-input1').val() ) {
		$('.step1-input1').addClass('warning');
	} else {
		$('.step1').fadeOut(function() { $('.step2').fadeIn(); });
	}
});
$('.q2-step2-next').click(function(e) {
	e.preventDefault();
	$('.step2-input1').removeClass('warning');

	if( !$('.step2-input1').val() ) {
		$('.step2-input1').addClass('warning');
	} else {
		$('.step2').fadeOut(function() { $('.step3').fadeIn(); });
	}
});
$('.q2-step3-next').click(function(e) {
	e.preventDefault();
	$('.step3-input1').removeClass('warning');

	if( !$('.step3-input1').val() ) {
		$('.step3-input1').addClass('warning');
	} else {
		$('.step3').fadeOut(function() { alert('I\'m awesome. But you are awesome too! You are the person of the year 2006 in Times magazine ;) Don\'t you believe me? Check it on google!'); $('.step1').fadeIn(); });
	}
});

#6

Thanks @bartekkustra!

I am really hoping for the functionality for this to come into Webflow soon. The ability to adapt to a functionality similar to waht you see in Dynamic Panels in Axure would allow for a great deal of advancement for entrepreneurs trying to get an app out on the market.

If I have any other questions, would you mind if I DM you directly?

Thanks
J


#7

I think what you're looking for @Socrademy is a Tabs widget which is similar to slides, but the navigation buttons are customizable. We're actually releasing this feature this week. You'll also be able to add interactions/animations for tab open and tab close.


#8

Thats great news!

What I was hoping for, and I am assuming I will be able to do with the new addition is to have form fields, buttons, text, etc.....all in one of the div sections of the slider, (now tab section) When I hit another tab, it will replace the elements with a set I have specifically built in the next tab.

Thanks for the reply!
J


#9