Search code examples
jqueryhtmlcssbxslider

Hidden bxsliders on other tabs

I have problems with bxslider.

Check it here

When you switch on the other tab bxslider content disappears. Why this is happening? How to fix this bug? 

$(document).ready(function(){
    $('.tabs_menu a').click(function(e) {
        e.preventDefault();

        var tab = $(this).attr('href');
        $('.tab').not(tab).css({'display':'none'});

        $(tab).fadeIn(400);  
        $('.bxslider').bxSlider();
    });

});
body {
	font-family: "Arial", sans-serif;
	font-size: 16px;
}
.switches {
	height: 43px;
	width: 100%;
  background: #ffc578; /* Old browsers */
  background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
}
.switches_descr ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.switches ul li {
	display: inline-block;
}
.switches a {
	color: #fff;
	padding: 10px 84px 10px 84px;
  display: block;
}
#tab2, #tab3, #tab4 {
    display: none;
}
.options {
  margin-bottom: 50px;
}
.options .bxslider li {
  color: #3b52a0;
  font-style: italic;
  font-size: 15px;
}
.bxslider .options_ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.bx-viewport{
  height: 600px !important;
}
.bxslider li {
  width: 3.11% !important;
}
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="ru" class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="ru" class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="ru" class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<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="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" />
	<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<section class="switches hidden-xs">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<nav class="switches_descr">
					<ul class="tabs_menu">
						<li><a href="#tab1">1</a></li>
						<li><a href="#tab2">2</a></li>
						<li><a href="#tab3">3</a></li>
					</ul>
				</nav> 
			</div>
		</div>
	</div>
</section>
<section class="intro tab" id="tab1">
	<section class="options">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="slider">
						<ul class="bxslider">
							<li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dolore accusamus natus possimus incidunt, quo voluptatem eos obcaecati ut aliquam.</p></li>
							<li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime odio quasi voluptate, molestiae debitis placeat praesentium blanditiis consequatur tempora architecto, ullam ad ratione sapiente. Saepe!</p></li>
							<li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus tempore ipsum illo perspiciatis ex maxime qui doloribus, repudiandae eveniet natus molestiae, officia veniam voluptatem, ducimus.</p></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>
</section>
<section class="business_sol tab" id="tab2">
	<section class="options">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="slider">
						<ul class="bxslider">
							<li style="width: 100%"><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dolore accusamus natus possimus incidunt, quo voluptatem eos obcaecati ut aliquam.</p></li>
							<li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime odio quasi voluptate, molestiae debitis placeat praesentium blanditiis consequatur tempora architecto, ullam ad ratione sapiente. Saepe!</p></li>
							<li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus tempore ipsum illo perspiciatis ex maxime qui doloribus, repudiandae eveniet natus molestiae, officia veniam voluptatem, ducimus.</p></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>
</section>

<section class="embedded tab" id="tab3">
	<section class="options">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="slider">
						<ul class="bxslider">
							<li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste dolore accusamus natus possimus incidunt, quo voluptatem eos obcaecati ut aliquam.</p></li>
							<li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime odio quasi voluptate, molestiae debitis placeat praesentium blanditiis consequatur tempora architecto, ullam ad ratione sapiente. Saepe!</p></li>
							<li><p class="opi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus tempore ipsum illo perspiciatis ex maxime qui doloribus, repudiandae eveniet natus molestiae, officia veniam voluptatem, ducimus.</p></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>
</section>
	<!--[if lt IE 9]>
	<script src="libs/html5shiv/es5-shim.min.js"></script>
	<script src="libs/html5shiv/html5shiv.min.js"></script>
	<script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
	<script src="libs/respond/respond.min.js"></script>
	<![endif]-->
	<script src="http://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
	<script src="js/common.js"></script>
    <script>
		$(document).ready(function(){
			$('.bxslider').bxSlider();
		});
    </script>
</body>
</html>

Solution

  • Add this css.

    .bx-viewport{
    height:75px !important;
}

    And add this js in common.js.

            $(document).ready(function(){
            $('.tabs_menu a').click(function(e) {
                e.preventDefault();

                $('.bxslider').bxSlider();

                var tab = $(this).attr('href');
                $('.tab').not(tab).css({'display':'none'});

                $(tab).fadeIn(400);  

            });

        });