Hidden bxsliders on other tabs

Question

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>

We need the problematic code here , along with some images of the problem . Links may not work in the future ... Where your codes contains Java? I have tested it.. Maybe that tag should be removed. — GOXR3PLUS, Dec 22 '16 at 10:48
Please don't link sites that don't allow me to return here with a single brower back - and it's generally best to directly post the code of a [mcve] here instead of linking some zip or other off-site resource. — Thomas, Dec 22 '16 at 10:49

Vel · Accepted Answer · 2016-12-22T12:18:19.520

0

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);  

            });

        });

edited Dec 22 '16 at 12:18

answered Dec 22 '16 at 11:23

Vel

9,027
6
34
66

Thank you very much! But after adding your code, I've got problems with correct display content. How lead this to normal? Thank you! Image with bug [link](https://yadi.sk/i/37C4FTmu34QNPn) – z_u_l Dec 22 '16 at 11:40
seems you didnt add my js. right?. add above the script in common.js and try – Vel Dec 22 '16 at 11:42
I replaced my code on your code in common.js and still I have a bug( – z_u_l Dec 22 '16 at 11:59
Its work fine for me. set width:100% for .bx-viewport and try – Vel Dec 22 '16 at 12:02
Did not help ( for some reason, on the first tab
width 1130px, but on second tabs
width 100px, why, I do not understand(

z_u_l

Dec 22 '16 at 12:14

check the answer of @zer00ne – Vel Dec 22 '16 at 12:19

He has got mistake in css, becouse his code don't work correct( – z_u_l Dec 22 '16 at 13:49

Updated. It works, but I don't like my idea with .bxslider li { width: 3.11% !important; } It isn't well – z_u_l Dec 22 '16 at 14:01

for prev button not working - there no prev content in slider so its not working. – Vel Dec 22 '16 at 14:26

Thank you, but when I check to 2 tab, then I check to prev button. Prev button don't work now( – z_u_l Dec 22 '16 at 14:27

add two slider content in 3rd tab and check – Vel Dec 22 '16 at 14:28

Ok, but why prev on 1st tab working and not working on 2nd tab? Content the same – z_u_l Dec 22 '16 at 14:29

three tabs are static or dynamically created? – Vel Dec 22 '16 at 14:30

This tabs are static – z_u_l Dec 22 '16 at 14:31

then change the class for each slider $('.bxslider1').bxSlider();$('.bxslider2').bxSlider(); $('.bxslider2').bxSlider(); and try. – Vel Dec 22 '16 at 14:33

but don't prev\next, when we move on tab2, tab3 – z_u_l Dec 22 '16 at 14:43

Conversely, I want prev\next on tab2 and tab3 – z_u_l Dec 22 '16 at 14:47

@z_u_l, I didnt get you clearly. check this link. https://jsfiddle.net/gnanavelr/81nd8u8a/1/ – Vel Dec 22 '16 at 14:53

Thank you! This working great on tab1 and tab2. But on tab 3 slider not switch prev/next. I do not understand why slider works great on tab1 and tab2, but don't work on tab3? – z_u_l Dec 22 '16 at 15:14

sorry, small mistake. check this https://jsfiddle.net/gnanavelr/81nd8u8a/3/ – Vel Dec 22 '16 at 15:41

Hidden bxsliders on other tabs

1 Answers1