INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Allow Flexslider inside bootstrap tabs

Allow Flexslider inside bootstrap tabs

(OP)
Hello,

I have 2 slider for my page but my problem is when I insert my slider inside tabs is not showing

Here's my javascript and tried solution.


CODE --> javascript

/* Property details slider */
	$('#property-thumbs').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 60,
    itemMargin: 10,
    asNavFor: '#property-images',            
	prevText: "",          
	nextText: ""
  });
   
  $('#property-images').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: true,
    sync: "#property-thumbs",            
	prevText: "",          
	nextText: ""
  });

  /* Property details slider2 */
 $('#secondary-property-thumbs').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 60,
    itemMargin: 10,
    asNavFor: '#secondary-property-images',            
	prevText: "",          
	nextText: ""
  });
   


  $('#secondary-property-images').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: true,
    sync: "#secondary-property-thumbs",            
	prevText: "",          
	nextText: ""
  });


  /*ALLOW TABS*/ 
$(document).on('shown.bs.tab', 'a[data-target="#fplan"]', function (e) {
     $('#secondary-property-images').flexslider();
}); 



HTML


CODE --> html

<div class="tabs">
  <ul class="nav nav-tabs">
    <li class="active"> <a data-toggle="tab" href="#slider">{lang_media_slider}</a> </li>
    <li> <a data-toggle="tab" href="#fplans">{lang_media_plans} </a> </li> 
    <li> <a data-toggle="tab" href="#video">{lang_media_video} </a> </li>
    <li> <a data-toggle="tab" href="#360">{lang_media_360} </a> </li>

  </ul><!--nav tabs end-->
<!-- Tab Content-->
<div class="tab-content">

<div id="fplans" class="tab-pane">
<!-- FLOOR PLANS-->
<div class="property-slider2">

 <div id="secondary-property-images" class="flexslider">
                  <ul class="slides">
                    <li class="item"> <img src="http://placehold.it/600x400&amp;text=IMAGE+PLACEHOLDER" alt=""> </li>
                    <li class="item"> <img src="http://placehold.it/600x400&amp;text=IMAGE+PLACEHOLDER" alt=""> </li>
                    <li class="item"> <img src="http://placehold.it/600x400&amp;text=IMAGE+PLACEHOLDER" alt=""> </li>
                    <li class="item"> <img src="http://placehold.it/600x400&amp;text=IMAGE+PLACEHOLDER" alt=""> </li>
                  </ul>
              </div>

                <div id="secondary-property-thumbs" class="flexslider">
                  <ul class="slides">
                    <li class="item"> <img src="http://placehold.it/600x400&amp;text=IMAGE+PLACEHOLDER" alt=""> </li>
                    <li class="item"> <img src="http://placehold.it/600x400&amp;text=IMAGE+PLACEHOLDER" alt=""> </li>
                    <li class="item"> <img src="http://placehold.it/600x400&amp;text=IMAGE+PLACEHOLDER" alt=""> </li>
                    <li class="item"> <img src="http://placehold.it/600x400&amp;text=IMAGE+PLACEHOLDER" alt=""> </li>
                  </ul>
                </div>
</div>
  </div><!-- Floor plan id end--> 




Thankyou!

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close