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
Related
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">
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.
I'm using Slick sliders with two different styles, for my web page but I'm having a problem with arrows.
Can you please help me?
This is my main .slider, I've styled it's prev and next arrows using CSS
http://prntscr.com/7kdpgo
And here I used .filtering class of Slick, but I don't want these arrows. How can I disable them here and add those in the design?
http://prntscr.com/7kdq03
<script>
$('#carouselclass').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows : false,
});
</script>
Just set them to null. Job done!
<script>
$('#carouselclass').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
prevArrow: null,
nextArrow: null,
});
</script>
From what I see the slider generates with js its own arrows (the ones you want to remove from what i understand). But they have the functionality linked to them, so you want to make them look like those from above the slider and then replace the ones on top with them.
$(document).ready(function(){
$('.your-class-reg').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: '<a class="your-class-btn-back">Back</a>',
nextArrow: '<a class="your-class-btn-forward">Forward</a>',
rows: 1
});
});
You will have to use the same css class you used for the small top arrows instead of .your-class-btn-back and .your-class-btn-forward. After that you can move them with absolute position, overlapping the ones you initially made, and then get read of the initial ones.
This way they will look like the ones you have on top of your print-screen, and have the necessary functionality.
please go to this Address:
http://pakianco.ir/test/index.php
on the above of page i use two different slideshow for displaying company products. these two slideshow must be consonant means that they must be start at same time and images used in two slideshow must be change Simultaneously.But it did not happen.
i use two different plugin for that. left slideshow is bootstrap carousel plugin and right slideshow is flux Slider.
this code is for right slideshow:
$(function(){
window.myFlux = new flux.slider('#slideshow', {
autoplay: true,
pagination: false,
transitions: ['blocks'],
delay: 5000
});
});
and this is for left slideshow:
$('#slides.carousel').carousel({
'interval': 5000,
'pause':'false',
'wrap':'false'
});
can you help me to doing that
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.