We Keep Coding

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

Add arrows and autoplay to owl carousel template

I downloaded a template for owl.carousel.min.js - I have no idea how to add autoplay and arrows.
It's on a test server on http://testing.r2group.co.za/Test/index.html about halfway down. I would appreciate ANY help, as I'm proficient with HTML, but the JS is beyond me. (why I downloaded a template)

Have you found documentation for how to use the carousel? That is a good place to start.
The owl is part of a theme I am using. Looks like this javascript is included after the carousel.
<script>
jQuery(function($){
$("#latest_news .owl-carousel").owlCarousel({
lazyLoad: true,
responsiveRefreshRate: 50,
slideSpeed: 500,
paginationSpeed: 500,
scrollPerPage: true,
stopOnHover: true,
rewindNav: true,
rewindSpeed: 600,
pagination: true,
navigation: false,
autoPlay: true,
singleItem: true
});
});
</script>
This tells the browser to start a new script with jQuery.
jQuery(function($){
//code
});
Inside this function is specific to Owl Carousel.
$("latest_news .owl-carousel") selects the proper element. This is where you will use your own CSS selectors to get your slider.
It is being passed a javascript object of parameters for the slider. For your autoplay, you can give it
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true
});
The arrows are also described by a setting in this object. Looks like the left/right arrows can be added like this:
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
So, at a minimum to get your arrows and autoplay, your script should look like this:
<script>
jQuery(function($){
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true,
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
});
</script>
It would be worth looking at which other settings you can change for greater customization. The slideSpeed and rewindSpeed, for example, could be a good place to get familiar playing with javascript.

Owl carousel customised image preview pagination not working

I am taking a look at this neat creation by Yunus Gaziev but there is one major problem with it - the pagination is removed as soon as you adjust the viewport, which seems to be caused by Owl, and I do not know why.
var owl;
$(document).ready(function() {
owl = $("#owl-demo");
owl.owlCarousel({
navigation: false,
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,
afterInit: afterOWLinit
});
function afterOWLinit() {
...
}
});

I have tried debug the javascript but could not find the cause. I do think that this pagination is not recreating on the changes of viewport in owl.carousel.js
This is where it tries to recreate the pagination
base.updatePagination();
base.checkNavigation();
Check it out. I hope this will help you and others to find the root cause.

The problem was that the owlCarousel initialiser needed to have afterUpdate: afterOWLinit declared so that whenever the viewport was resized, it would fire the customised pagination script again.
I have refactored the existing code thoroughly, an example may be viewed here - my version can be cloned from here.

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.

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.

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.