Carousel inside tabs - javascript

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.

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:
Moved all CSS files first, followed by all js files
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

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.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.

Related

Can't show paginations (dots) in OwlCarousel

I used owl carousel to create a slideshow, but can't show dots or pagination. I read the documentation and it was stated that it takes key word argument dots: true|false, but when I used dots: true it doesn't show. I also tried pagination: true.
<script>
$(".slider").owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
dots: true,
});
</script>
here is a pen for full review. Thanks for help
You don't have enough items to trigger the dots. Your loop is 3 and your amount of cards is 3. There is no pagination to show.Also you need to add the class owl-theme to your container with the owl-carousel class and you need a theme file from Owl Carousel, there are a few CDN's and you need any CSS file with theme in the name.
Here's an example with the default theme: https://codepen.io/JHeth/pen/QWyewpy

Images stacking on top instead of sliding using Owl Carousel

My site http://mytempsite.temporary-domain.com
The above page has two images displaying using Owl Carousel but i cant figure out whats going wrong here as i am using examples from the web, so i could have introduced something wrong here.
My carousel setting is
<script>
$(document).ready(function() {
$('#banner').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items: 1,
smartSpeed: 1000,
autoplay: true,
autoplayTimeout: 6000,
dots: true,
nav: false,
//loop: true,
mouseDrag: false,
touchDrag: false
});
});
</script>
Two images display when they should be sliding across. I am using the latest version of Owl Carousel so not sure if Owl Carousel is the problem or something else? I checked my HTML which looks to be fine and no errors in the Console window (using Chrome)
I have stripped off almost everything from the site to its basic bare bones along with the current Javascript, JQuery, CSS left intact. Any ideas whats going wrong here?
I am not seeing the two CSS files in your source code that the Owl Carousel documentation says are needed for a successful installation (source). You will need to include the following in your <head>.
<!-- change paths to reflect your setup -->
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

how to center a single element in slick.js jquery plugin

I am using slick plugin and I have problem with centering items when there is only one element. My code:
$('#divId').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
If I have few elements in the container everything is OK (centerMode works great) but when I have only one element in slick queue - it goes to the right hand side.
Real example
I couldn't reproduce that problem on jsfiddle. I coppied my code there but everything seems to be ok there: jfFiddle
Does anybody know where is the problem ?
Thanks in advance.

Slick Slider slidesToScroll modification

I use the slick slider on my site. And no matter how much I was pulling the slider to the left or to the right, it just runs only on the number of slides that is specified in the property slidesToScroll. Is it possible to do something with slick slider that it worked like this slider http://www.owlcarousel.owlgraphic.com/demos/mousewheel.html. How much do you pulling - it scroll the same distance. Sorry for my english. Thanks you.
There is my code for init slick slide:
$('.slider-wrapper-2').slick({
slidesToShow: 4,
slidesToScroll: 4,
rows: 1
});
Just add the swipeToSlide setting, which enables swiping to any slide irrespectively to slidesToScroll
Your initializing script should look like this:
$('.slider-wrapper-2').slick({
slidesToShow: 4,
slidesToScroll: 4,
rows: 1,
swipeToSlide: true
});
In case it doesn't work, remove the slidesToScroll option. Please comment how it worked so I can edit my answer.
swipeToSlide: true
Adding swipeToSlide option does the job, even with slidesToScroll enabled. No need to disable slidesToScroll.

bxslider, for image carousel, doesn't seem to be working for me?

So I want to make a little image gallery carousel. Four images across. And you can carousel over to more images. I found bxslider and it seemed like a quick, plug & play, solution. But it's only showing one image per slide.
I think I've followed their directions. But I've obviously done something wrong.
I've left their css and js untouched. My HTML looks like a copy of of theirs. And I put this at the end of their js file:
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
auto: true,
autoControls: false,
minSlides: 4
});
});
Here's the jsfiddle: http://jsfiddle.net/7YH8Q/
Anyone know how I can get this to work?
The problem is you didn't set slideWidth. In order to setup a carousal, you have to provide 3 values, namely : slideWidth, minSlides, maxSlides.
Here's a working fiddle http://jsfiddle.net/hwQ6C/
$('.bxslider').bxSlider({
slideWidth: 200,
minSlides: 4,
maxSlides: 5,
slideMargin: 10
});
Multiple items per slides and fade mode is not currently supported. This has been flaged as an issue. Changing mode is the only option to fix this with bxslider.

Categories