Carousel - Form - Wizard - OWL
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.css">
<form class="wrapper-form" action="">
<div class="consultationSlider">
<div class="item">
<p class="text-center">Fill out the form below and a we will contact you soon</p>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="Name" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="text" name="PhoneNumber" class="form-control" placeholder="Phone Number">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Website URL">
</div>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-success width100 consultationNext">Next</a>
</div>
<div class="item">
<p class="text-center">Fill out the form below and a Rankusnow representative will contact you soon</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Website URL">
</div>
<div class="form-group">
<select class="form-control websiteDeveloped">
<option value="">Please Choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="form-group completitionDate">
<select class="form-control completionDateSelect">
<option value="">Please Choose</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<a href="javascript:void(0)" class="btn btn-success width100...
CSS
.completitionDate {
display: none;
}
.form-control {
padding: 10px;
width: 250px;
}
.consultationSlider {
background: #ddd;
}
.btn {
display: block;
padding: 15px;
background: blue;
color: white;
text-align: center;
width: 150px;
}
JavaScript
$('.consultationSlider').owlCarousel({
singleItem: true,
mouseDrag: true,
touchDrag: false,
navigation: false,
pagination: false,
autoHeight: true,
slideSpeed: 800
});
$('.consultationNext').click(function() {
$('.consultationSlider').trigger('owl.next');
});
$('.websiteDeveloped').change(function() {
if ($(this).val() == 'no') {
$('.completitionDate').show();
} else if ($(this).val() == 'yes') {
$('.completitionDate').hide();
}
});
$(document).ready(function() {
setInterval(function() {
$(".owl-carousel").each(function() {
$(this).data('owlCarousel').updateVars();
});
}, 1500);
});