Hello. I need help with js. Based Bxslider I want to make two sliders spinning simultaneously. They should control button. Now with spin сlick sliders simultaneously, but with automatic scrolling no one slider spins faster than the other. And is it possible to make The control buttons withdrawn automatically? Can I improve this code?
<!DOCTYPE html>
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" />
</head>
<body>
<header>
<ul class="bxslider twoslider">
<li>
<img src="http://bxslider.com/images/home_slides/houses.jpg" alt="alt">
<p class="s_slogan"><a href="#">Text<span></span></a> </p>
</li>
<li>
<img src="http://bxslider.com/images/home_slides/houses.jpg" alt="alt">
<p class="s_slogan"><a href="#">Text<span></span> </a></p>
</li>
<li>
<img src="http://bxslider.com/images/home_slides/houses.jpg" alt="alt">
<p class="s_slogan"><a href="#">Text<span></span> </a></p>
</li>
</ul>
<ul id="custom-thumbnails">
<li><a data-slide-index="0" href="">1</a></li>
<li><a data-slide-index="1" href="">2</a></li>
<li><a data-slide-index="2" href="">3</a></li>
</ul>
<ul class="bxslider firstslider">
<li>
<img src="http://bxslider.com/images/home_slides/houses.jpg" alt="alt">
</li>
<li>
<img src="http://bxslider.com/images/home_slides/houses.jpg" alt="alt">
</li>
<li>
<img src="http://bxslider.com/images/home_slides/houses.jpg" alt="alt">
</li>
</ul>
</header>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script type="text/javascript">
(function() {
var countTourInCategory, slider_array, toggleFiltersClass;
slider_array = new Array();
jQuery(document).ready(function($) {
var a, b;
a = {
controls: true,
pause: 6000,
pagerCustom: '#custom-thumbnails',
responsive: true
};
b = {
controls: false,
pause: 6000,
pagerCustom: '#custom-thumbnails',
responsive: true
};
$(".bxslider").each(function(i) {
if ($(this).hasClass('firstslider')) {
return slider_array[i] = $(this).eq(0).bxSlider(a);
} else if ($(this).hasClass('twoslider')) {
return slider_array[i] = $(this).eq(0).bxSlider(b);
}
});
$(".bx-controls-direction a").bind("click", function(e) {
e.preventDefault();
if ($(this).hasClass("bx-prev")) {
return $.each(slider_array, function(i, elem) {
return elem.goToPrevSlide();
});
} else if ($(this).hasClass("bx-next")) {
return $.each(slider_array, function(i, elem) {
return elem.goToNextSlide();
});
}
});
$('.wrap-for-sending-form form').submit(function(event) {
var $loading, $statusWindow, $succes, $thisForm, $wrapper, formData;
event.preventDefault();
$wrapper = $(this).closest('.wrap');
$statusWindow = $wrapper.find('.sending');
$loading = $statusWindow.find('.sending-');
$succes = $statusWindow.find('.sucwrap');
$thisForm = $(this).closest('for');
formData = $thisForm.serialize();
return $.ajax({
type: "POST",
url: $thisForm.attr("action"),
data: formData,
beforeSend: function() {
return $statusWindow.removeClass('he');
},
success: function() {
$loading.addClass('de');
return $succes.removeClass('de');
},
complete: function() {
return setTimeout((function() {
return $thisForm.find("input[type=text],input[type=email], textarea").val("");
}), 3000);
},
error: function() {
return alert("Eror");
}
});
});
return $('.close-modal-button').click(function() {
var $modalWrap, $sendingWrap, $statusWrap, $thisForm, $wrapper;
$statusWrap = $(this).closest('.sendinrap');
$sendingWrap = $statusWrap.find('.sendrap');
$modalWrap = $(this).closest('.succrap');
$wrapper = $(this).closest('.ordm-wrap');
$thisForm = $wrapper.find('form');
$statusWrap.addClass('hide');
$sendingWrap.removeClass('hide');
return $modalWrap.addClass('hide');
});
});
}).call(this);
</script>
</body>
</html>