Simultaneous two bxsliders

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>

Did you know that another slide were two simultaneous pictures and spinning?

It’s not completely clear what you are asking here. But bxslider can certainly have multiple slideshows per page, each with its own settings: http://bxslider.com/examples/multiple-slideshows

There are plenty of demos there showing how you can set this up, so what exactly is the issue?

Yes, several bxslides can I set, but I need two sliders and one setting. That is, if I twist Click on the button to the right and turning the two sliders. In two slides together control button. In the code that I gave this has been done, but there is a problem - the automatic twisting, swirling sliders differently. Spinning the first slide, it took a few seconds and the second slider spins, and that they need while spinning

<!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',
	  auto: true,
      responsive: true
    };
    b = {
      controls: false,
      pause: 6000,
      pagerCustom: '#custom-thumbnails',
	  auto: true,
      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>

I add this option to source code at the top of the page
auto: true,
I made a screenshot
Now yes there is, and this is bad. When the slide turns itself automatically

A need so it’s good. So there is in-touch control buttons. I need to make it such when the slide spins automatically

Unfortunately—for me at lest—there is a language barrier here. I really don’t know what you are asking.

I suggest you make two simple lists, one for each slider. Say in each list what you want that slider to do. “Turns”, “spins” etc. aren’t very clear, so clarify any terms you use. If you can, post a link to your working page, too.

I will try to explain better
This screenshot is visible flaw, I really need to fix it

So it should look like. It is well

Here is what I try to do
http://tttttttttttttt.890m.com/index.html
On prev, next is good, but on “auto: true” slides is bed

hm, I’ll bet they aren’t running the same speed at the same time because the bigger one has further to go, and their times are some percentage of the distance they need to travel.

But that’s a guess. Have you gone through the Javascript code to see if there is some place you can set the speed?

Ralph: there are two sliders who should share a single set of controls and move synchronously and simultaneously.

Yes, I see that now that a demo link has been posted. I basically file these issues under problems you don't need to have.

This can be done good?

I can do another slider?

The example you linked to looks good. Is that yours or someone else’s? It works fine for me in Chrome.

My comment above about problems you don’t need to have is that fancy stuff like this always comes with a cost—that it will have problems on various devices etc. Although it’s a cool effect, I’m not sure people will care enough to justify the pain it takes to create. Tests suggest that people all but ignore carousels anyway.

Yes, it is I do, order, really want to do this effect. I searched these are ready, but not found

I think I’ve found a site that kinda does this, in this video

http://milwaukeepolicenews.com/#menu=stats-page

the stats rotate and at the same time, so do the police

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.