I have this code. It's ok to 1899px, but big than 1900px, the items option not working.
jQuery(document).ready(function () {
$(".owl-case").owlCarousel({
autoPlay: 3000,
items: 3, // THIS IS IMPORTANT
responsiveClass:true
});
});
First image on 1899px:
Second image on 1900px
Thank for answers!
You are missing loop: true,
jQuery(document).ready(function () {
$(".owl-case").owlCarousel({
autoPlay: 3000,
items: 3, // THIS IS IMPORTANT
loop: true,
responsiveClass:true
});
});
As in my case it is working...
or may be it's the jquery library.
I am using jquery-2.1.4.min.js.
$(document).ready(function () {
$(".owl-case").owlCarousel({
autoPlay: 3000,
items: 3, // THIS IS IMPORTANT
loop: true,
responsiveClass:true
});
});
Related
$(".banner-slider").owlCarousel({
navigation : true, // Show next and prev buttons
pagination: true,
slideSpeed : 50000,
singleItem:true,
autoPlay: true,
autoPlay : 6000,
});
You can use an array of times ` var delays = [4000,3000,5000,3000];
function pageLoad() {
$(function () {
$('#slider').nivoSlider({
pauseTime: 50000,
directionNav: true,
afterChange: function () { setDelay() },
afterLoad: function () { setDelay() },
controlNav: true,
pauseOnHover: false
});
});
}
function setDelay() {
var currentSlide = $('#slider').data("nivo:vars").currentSlide;
setTimeout(function () {
$('#slider').find('a.nivo-nextNav').click()
}, delays[currentSlide]);
}`
i have following code:
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
callbacks: true
});
}
which works fine - as expected. But when i try to do something like this:
var onResize = function() {
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
});
}
$(window).resize(function() {
onResize();
});
then it just ignores the options. Dots are visible etc. Everything looks like it is with default options. Can somebody please help me with this?
Thanks
The resize function isn’t better! Besides, it makes no difference to your load to use media queries to show or hide. You should try it. Keep it simple.
I would like a little help here. I have two jquery sliders but i would like them to run at the same time. Is it possible?
Here is my code :
$(function () {
$('#slider').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
$('#slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
with the above code the second start after some milliseconds. I would appreciate if someone can fix it.
As those options are identical, I'd think
$("#slider, #slider_small").camera({
/* ...options here... */
});
would do it. Properly-designed jQuery plugins understand they're working on sets of elements.
$(function () {
$('#slider, #slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
most standard JQuery plugins knows to accepts an array of elements, and with , in the selector you can select multiple elements.
p.s. the plugin most probably will use for-each so what's the real problem here? if its just jumping then maybe your solution is css?
How do I get a nested horizontal slider to work with click controls by show/hiding them.
I'm using Swiper which I have almost working except if you click / transition into the nested slider, you can't go back from that first slide without first transition one slide. If you click all the way to the end and back, it works perfectly. There are many callbacks in the Swiper api available.
My progress so far: Nested slider Fiddle
$(document).ready(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
nextButton: '.h-next',
prevButton: '.h-prev',
onSlideChangeStart: function() {
if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
console.log('nested');
$('.h-prev, .h-next').hide();
} else {
console.log('notnested');
$('.h-prev, .h-next').show();
}
},
onReachBeginning: function() {},
onReachEnd: function() {}
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'horizontal',
spaceBetween: 0,
nextButton: '.v-next',
prevButton: '.v-prev',
nested: true,
onReachBeginning: function() {
$('.h-prev').show();
},
onReachEnd: function() {
$('.h-next').show();
},
onSlideChangeStart: function(slides) {
if (slides.activeIndex === 1) {
console.log('slide 2');
}
}
});
});
EDIT:
Cleaned up fiddle using #TheOnlyError 's answer here and here:
$(document).ready(function() {
var swiperH = new Swiper('.swiper-container-h', {
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
nextButton: '.h-next',
prevButton: '.h-prev',
onSlideChangeStart: function() {
if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-v')) {
$('.h-prev, .h-next').hide();
} else {
$('.h-prev, .h-next').show();
}
},
onSlideNextStart: function() {
$('.h-prev').show();
}
});
var swiperV = new Swiper('.swiper-container-v', {
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'horizontal',
spaceBetween: 0,
nextButton: '.v-next',
prevButton: '.v-prev',
nested: true,
onReachBeginning: function() {
$('.h-prev').show();
},
onReachEnd: function() {
$('.h-next').show();
},
});
});
Edit2:
Just encountered that if the first slide is nested, this doesn't work. To solve this prob you will also need to add:
onInit: function(){
if ($('.swiper-container-h .swiper-slide-active').children().hasClass('swiper-container-h-inner')) {
$('.prev, .next').hide();
}
},
to the first slider: Fiddle
The problem is that Swiper won't detect the transition between seperate Swiper objects. The solution would be checking when one has swiped to the next slide from the first horizontal one, to show the previous button.
So add this function to your first Swiper object:
onSlideNextStart: function(swiper) {
$('.h-prev').show();
}
Check the fiddle.
I am building a caroufredsel for a responsive website (with only 3 states: 960px, 720px and 320px).
It's working great when you load the page in one of these states. It shows the correct number of items (3, 2 and 1 respectively).
But, when you resize the window, the number of visible items doesn't change. I was thinking about a $(window).resize() call, but I can't find how you can adjust the Caroufredsel settings after it is initialized.
$('#caroufredsel').carouFredSel({
infinite: true,
auto: false,
pagination: false,
prev: {
button: '#prev',
key: 'left'
},
swipe: {
onTouch: true,
onMouse: true
},
next: {
button: '#next',
key: 'right'
},
items: {
visible: 'variable'
}
});
What you need to do in your resize-callback is the following:
var $carouselContainer = $('#caroufredsel');
var resizeCallback = function() {
var showThatManyItems = 3; // determine the number of items to be shown depending on viewport size
$carouselContainer.trigger('configuration', [
'items', {
visible : showThatManyItems
}
], true);
}
If I'm not mistaken, don't you need "responsive:true," as one of the parameters?