I'm currently using Owl Carousel and populating via AJAX. When I use the addItem method Owl Carousel goes to the first item, but I want the carousel to go to the item that was added. So to get that I used jump to, but the problem here is the carousel goes to first and then jumps to added item. I just need the carousel to go to latest item.
i had the same issue so i used lazyLoad : true,
I resolved it using this code below:
var itemBlock ='<div> slider item </div>'; \\ add your code in ajax
$('#owl-slider').html(itemBlock).trigger('create');
$("#owl-slider").owlCarousel({
// Most important owl features
ltr:true,
items : 5,
itemsCustom : false,
itemsDesktop : [1199,8],
itemsDesktopSmall : [980,5],
itemsTablet: [768,4],
itemsTabletSmall: false,
itemsMobile : [479,2],
singleItem : false,
itemsScaleUp : false,
//Basic Speeds
slideSpeed : 200,
paginationSpeed : 800,
rewindSpeed : 1000,
//Autoplay
autoPlay : false,
stopOnHover : false,
// Navigation
navigation : false,
navigationText : ["prev","next"],
rewindNav : true,
scrollPerPage : false,
//Pagination
pagination : false,
paginationNumbers: false,
// Responsive
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
// CSS Styles
baseClass : "owl-carousel",
theme : "owl-theme",
//Lazy load
lazyLoad : true,
lazyFollow : true,
lazyEffect : "fade",
//Auto height
autoHeight : false,
//JSON
jsonPath : false,
jsonSuccess : false,
//Mouse Events
dragBeforeAnimFinish : true,
mouseDrag : true,
touchDrag : true,
//Transitions
transitionStyle : false,
// Other
addClassActive : false,
activeClass:true,
//Callbacks
beforeUpdate : false,
afterUpdate : false,
beforeInit: false,
afterInit: false,
beforeMove: false,
afterMove: false,
afterAction: false,
startDragging : false,
afterLazyLoad : false
});
var owls = $("#owl-slider").data('owlCarousel');
owls.goTo($('.item').length);
By stepping through the execution of addItem() I've noticed that the entire carousel is "destroyed" first then rebuilt with the new item added. So for now there is no real solution to your problem.
If you wish to jump to the latest item while keeping the sliding animation (not starting from the first then whoosh to the last), try jumpTo() to the second last item, set a timeout of like 10 milliseconds (will not work if omitted in my case), then call next().
owl.jumpTo(/*second last item index*/);
setTimeout(function() {
owl.next();
}, 10);
Related
I have written the following code in my project
$('[data-fancybox]').fancybox({
// Options will go here
infobar: false,
buttons : [
"zoom",
"slideShow",
//"fullScreen",
//"download",
"thumbs",
"close"
],
wheel : false,
transitionEffect: "slide",
// thumbs: false,
// hash : false,
// keyboard : true,
toolbar: true,
// animationEffect : false,
// arrows : true,
clickContent: false,
afterLoad: function() {
if (!$('.fancybox-button--play').hasClass("fancybox-button--pause")) {
$('.fancybox-button--play').trigger('click');
}
}
});
That code is not executing... however, When I execute it in console it perfectly works... What I am doing wrong?
Please try to load your script under "$( document ).ready()"
I have the following carousel
I want to disappear the one of the navigation arrows when there are no items on their left/right sides.In screenshot exampe above if i try to use the left arrow it's not looping, because there are no images on the left side, so the arrow should not appear.
Here are the settings i'm currently using
Navigation.Defaults = {
nav: false,
navRewind: false,
navText: [ 'prev', 'next' ],
navSpeed: false,
navElement: 'div',
navContainer: false,
navContainerClass: 'owl2-nav',
navClass: [ 'owl2-prev', 'owl2-next' ],
slideBy: 3,
dotClass: 'owl2-dot',
dotsClass: 'owl2-dots',
dots: true,
dotsEach: false,
dotData: false,
dotsSpeed: false,
dotsContainer: false,
controlsClass: 'owl2-controls',
loop: false,
};
Try with the css like below.
.owl-nav .owl-prev.disabled,
.owl-nav .owl-next.disabled {
display: none !important;
}
Or you can do that with js from this answer https://stackoverflow.com/a/28027976/9695286
I got codes for thumbnail slider from menu cool but the slider won't stop at a point where it ends, it is infinite.You can find here. Please help.
If you will change showMode setting to 1, then it will not be stuck in infinite scroll
var thumbnailSliderOptions =
{
sliderId: "thumbnail-slider",
orientation: "horizontal",
thumbWidth: "300px",
thumbHeight: "150px",
showMode: 1, // earlier this was set to 3 change it to 1
infiniteSlides: false,
stopAtEnd: true,
autoAdvance: false,
selectable: true,
slideInterval: 3000,
transitionSpeed: 1000,
shuffle: false,
startSlideIndex: 0, //0-based
pauseOnHover: true,
initSliderByCallingInitFunc: false,
rightGap: "default",
keyboardNav: true,
mousewheelNav: true,
before: null,
license: "b2e98"
};
Looking to use an infinity loop for the latest Owl Carousel Wordpress plugin. I've downloaded Owl Carousel v2, which has the infinity loop implemented, but the functionality and the Javascript are very different from the Wordpress plugin's versions.
In v2, they list the loop as a default option, but there are no default options in the Wordpress plugin.
/**
* Default options for the carousel.
* #public
*/
Owl.Defaults = {
items: 3,
loop: false,
center: false,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
freeDrag: false,
margin: 0,
stagePadding: 0,
merge: false,
mergeFit: true,
autoWidth: false,
startPosition: 0,
rtl: false,
smartSpeed: 250,
fluidSpeed: false,
dragEndSpeed: false,
responsive: {},
responsiveRefreshRate: 200,
responsiveBaseElement: window,
responsiveClass: false,
fallbackEasing: 'swing',
info: false,
nestedItemSelector: false,
itemElement: 'div',
stageElement: 'div',
I'm not an expert in Javascript, so I am wondering if anyone could point me in the right direction.
Owl Carousel v2 has infinity loop feature that v1 doesn't have, I don't know what's kind of wordpress plugin you are using, please provide a link.
EDITED: There a latest plugin of owl carousel v2 with foogallery as optional for wordpress
https://wordpress.org/plugins/foogallery-owl-carousel-template/
jQuery('#slider-container').bjqs({
'animation' : 'slide',
'width' : 1060,
'height' : 500,
'showControls' : false,
'centerMarkers' : false,
animationDuration: 500,
rotationSpeed: 5000
});
jQuery('#quotes-slider').bjqs({
'animation' : 'slide',
'width' : 760,
'height' : 135,
'showControls' : false,
'centerMarkers' : false,
nexttext : 'Next', // Text for 'next' button (can use HTML)
prevtext : 'Prev',
animationDuration: 500,
rotationSpeed: 5000
});
I use this function but my 2nd slider does not show next and previous functon kindly help me
You have to explicitly set that you want to show the controls using showcontrols:
jQuery('#quotes-slider').bjqs({
showcontrols : true,
nexttext : 'Next', // Text for 'next' button (can use HTML)
prevtext : 'Prev'
});