javascript - Carousel inside tabs - Stack Overflow

admin管理员组

文章数量:1419242

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: /

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.

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.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Jun 28, 2014 at 15:46 NicolaeBozbiciNicolaeBozbici 29333 silver badges1010 bronze badges 1

• This is one reason I like to write my own tools. Sure it takes longer, but my tools will all be patible with each other. Unlike those plugins you're using.. – Niet the Dark Absol Commented Jun 28, 2014 at 16:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./tutorials/tabbedcontent/demo.html download: http://www.jqueryscript/demo/Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent/#tab-1 + Carousel script: als.musings.it

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)

I also faced the same problem. The best ever solution I have found in this: http://jsfiddle/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.

本文标签： javascriptCarousel inside tabsStack Overflow