jFormslider - A Form which is in the form of slider

jFormslider is a jquery plugin where we can convert a big form in to a slider with input validation

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: jformslider.0fees.us

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="jFormslider.js"></script>

2. HTML

<div id="slider" class="form">
	<ul>
		<li data-id="slider_start">
		<div class="form-group">
			<label class="sr-only" for="exampleInputEmail2">Email address</label>
			<input type="text" id="em1" class="form-control" data-toggle="tooltip" data-placement="top" title="Enter valid email" placeholder="Enter email" email>
		</div>
		<div class="form-group">
			<label class="sr-only" for="exampleInputEmail2">Name</label>
			<input type="text" class="form-control" id="exampleInputEmail2" placeholder="Enter Name" required>
		</div>
	
		</li>
		<li>
			<div class="form-group">
				<label for="exampleInputFile" class="sr-only" >File input</label>
				<input type="file" id="exampleInputFile" required data-msg="Please upload">

			</div>
			<div class="form-group">
				<label for="exampleInputFile" class="sr-only" >File input</label>
				<select required>
			<option value="">ggg</option>
			<option value="dsfd">hg</option>
			<option value="dsfd">hghg</option>
		</select>

			</div>

		</li>

	</ul>
</div>

3. JAVASCRIPT

$(document).ready(function(){

	var options=
	{
		width:500,//width of slider
		height:170,//height of slider
		next_prev:true,//will show next and prev links
		next_class:'btn btn-primary btn-xs',//class for next link
		prev_class:'btn btn-primary btn-xs',//class for prev link
		error_class:'alert alert-danger',//class for validation errors
		texts:{
				next:'next',//verbiage for next link
				prev:'back'//verbiage for prev link
			  },
		speed:600,//slider speed

	};

	$('#slider').jFormslider(options);

});

4. ADVANCED

Little validations

ex:<input type="text" name="username" required data-msg="Please enter username"/>

if you want to validate email put attribute 'email'

ex:<input type="text" name="email" required data-msg="Please enter a valid email "/>

Call before

Before sliding to next slide you can call a function For this just put attribute

call-before="some_function()" 

in li Before loading this li it will call this function function should return true if you want to slide to this li function should return false if you dont want to slide to this li

Goto slide

If you want to goto particular li without clicking through all slides you can call

$('#slider').gotoSlide(data-id)

you should specify a attribute in li called 'data-id' for this

<li data-id="middle_page"></li>

$('#slider').gotoSlide('middle_page')