CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
NicolaeBozbici
NicolaeBozbici

Reputation: 293

Carousel inside tabs

I have 4 tabs, each containing a carousel. The problem is that only the carousel in the first tab works fine. If you activate the second tabs, the carousel divs are all collapsed.

Here is an example with bootstrap 3 tabs and 'slick' plugin for the carousel: http://www.example.design-way.ro/

I tried multiple tabbing scripts and it's the same problem no matter what I use. The carousel works fine in the second tab if you try to move it a bit..then it somehow activates.

Is this a plugin initialization problem? Here's how I do it:

    $('.carousel').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: false,
        arrows: true
    });

Please give me some solution or idea to get this carousel working properly. I tried tweaking the css but I got no result.

Upvotes: 1

Views: 7018

Answers (3)

PrithweemaD
PrithweemaD

Reputation: 21

I also faced the same problem. The best ever solution I have found in this: http://jsfiddle.net/phpdeveloperrahul/bejFM/

Not only that. bxSlider offers a lot of options those are easy to understand and use. Some of the options I am mentioning in the following section:

mode: 'horizontal',
auto: true,
autoControls: true,
pause: 2000,
maxSlides: 4,
minSlides: 1,
controls: true,
infiniteLoop: true,
moveSlideQty: 1,
slideWidth: 200,
responsive: true,

Hope this will fulfill your need.

Upvotes: 0

leziang
leziang

Reputation: 46

I have meet this issue When have 3 tabs, each containing a carousel. PROBLEM: The problem is that only the carousel in the first tab works fine. If you activate the second tabs, the carousel divs are all collapsed.

SOLUTION: After mail to auther of script for help. We have the resolve:

  1. Moved all CSS files first, followed by all js files
  2. Started javascript of Carousel first and Tabs next

For my sample has used script from: + TABs script: Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent demo: http://www.racotecnic.com/tutorials/tabbedcontent/demo.html download: http://www.jqueryscript.net/demo/Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent/#tab-1 + Carousel script: als.musings.it

Upvotes: 3

Ionuț Staicu
Ionuț Staicu

Reputation: 22166

I'm not familiar with the tabs plugin you used, but you should enable carousel only on active (and visible) tabs only (you should have a callback for tab switching)

Upvotes: 1

Related Questions