Our custom Owl Carousel isn't behaving as expected - while dragging and using keyboard arrows takes you to the next slide, the previous and next arrows jump 'over' the next slide to the one after.
The next slide does appear briefly but quickly flicks to the following slide.
I've tried a few things in the main.js settings but no dice. Any thoughts would be greatly appreciated as I'm a bit stumped.
main.js code is:
$(document).ready(function() {
// initialise owl
$(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
lazyLoad:true,
loop:true,
useMouseWheel: false,
nav: true,
center: true,
dots: false,
margin: 0,
stagePadding: 0,
URLhashListener: true,
startPosition: 'URLHash',
animateIn: 'fadeIn',
animateOut: 'fadeOut'
});
// click for next image
$(owl).click(function() {
owl.trigger('next.owl');
})
// add arrow keys to carousel navigation
$(document).on('keydown', function( event ) { //attach event listener
if(event.keyCode == 37) {
owl.trigger('prev.owl')
}
if(event.keyCode == 39) {
owl.trigger('next.owl')
}
});
// end arrow keys
}); // end owl
}); // end document ready
Happy to share any other parts of the code if it would be useful. Thanks in advance for any guidance!
With #Tiberiuscan pointing me in the right direction, I figured out a solution:
The click for next image part was targeting the entire owl carousel for clicks.
I modified this code to target the owl-item div and that resolved the issue, as below:
// click for next image
$('.owl-item').click(function() {
owl.trigger('next.owl');
})
Thanks again, #Tiberiuscan
Related
I am using the slick slider to display images. At the moment i have it so you can click on the navigation and it changes the main image display.
I am trying to get it to set the currently selected navigation on a hover event or mouseover event.
This is my current code for the navigation and display:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: true,
//trigger after the slide appears
// i is current slide index
afterChange: function (slickSlider, i) {
//remove all active class
$('.slider-nav .slick-slide').removeClass('slick-active');
//set active class for current slide
$('.slider-nav .slick-slide').eq(i).addClass('slick-active');
}
});
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
autoplay: true,
dots: true,
centerMode: true,
focusOnSelect: true,
vertical: true
});
and this is my fiddle
Is it possible to bind a mouseover event to slick?
Should be possible. Never used slick before but on the first view it looks like a hover function is not implemented. I've created a fast basic approach how you could solve this with slick provided methods. See the fiddle.
You should optimize getting the slick object, it's just a starting point for you.
Also you should break the autoplay when hovering and restart it, just try around with the slick given methods.
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget),
index = $currTarget.data('slick-index'),
slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
});
Working fiddle
Using the above answer as a base, I was able to come up with this solution. This fixes the issue when quickly mousing over from navslide #1 to #3, and having the slider-for hangup on slide #2.
var slideTimer;
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget);
$('.slider-nav .slick-slide').removeClass('slick-current');
$currTarget.addClass('slick-current');
slideTimer = setTimeout(function () {
var index = $('.slider-nav').find('.slick-current').data('slick-index');
var slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
}, 500);
}).on('mouseleave', '.slick-slide', function (e) {
clearTimeout(slideTimer);
});
I am struggling to customize jquery cycle plugin. What I want is when the slider reaches last slide it will stop sliding to first slide again.This is working fine.
But the problem is when I am on first slide and then click the third slide then it's not ending there rather it goes back to first slide.
My jquery code is here:
jQuery(document).ready(function($) {
$('.slider1 ul.horizontal').cycle({
fx: 'scrollHorz',
speed: 500,
pause: 1,
pauseOnPagerHover: true,
width: "100%",
easeOut: 'easeOutBack',
cleartypeNoBg: true,
pager: 'ul.pager',
autostop: 2,
autostopCount:3,
startingSlide: 0,
after: onAfter,
pagerAnchorBuilder: function(idx, slide) {
return '<li></li>';
}
});
function onAfter()
{
if ($('.slider_content').css('display') == 'block')
{
if ($('li#lastslide').css('display') == 'block') {
$('.slider1 ul.horizontal').cycle('pause');
$('.controlbutton').stop().fadeIn(500);
}
else
{
if($('.question_slide').css('right') != '0px')
{
$('.controlbutton').fadeOut(100);
}
}
}
}
});
I think there should be some pagination click event.I have checked the plugin options reference page but can't under stand how to tell the plugin that this is the last slide and don't go back to the first slide.
Any idea please. Thanks in advance.
I am facing a silly problem with bxSlider plugin. My slider only shows 4 slides with auto sliding mode. But when someone clicks on a particular nav link I am appending another slide relates to that link. But I wanted to remove that new slide when someone clicks on prev/next control and reload the default slider with 4 slides. But it's not working for that prev/next controls.
Here is the code:
//Default Slider
var slider= $('.bxslider').bxSlider({
displaySlideQty : 4,
moveSlideQty : 4,
maxSlides: 4,
auto: true,
autoStart: true,
preloadImages: 'visible',
mode: 'fade',
pager: false,
});
//If someone clicks any link on navigation
$('#how').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/Jwjv7OLazVY?enablejsapi=1&wmode=opaque" title="Click to Watch The Vieo"><img src="img/video.jpg"/></a></li>');
slider.reloadSlider({
mode:'fade',
auto: false,
autoStart: false,
pager:false,
});
slider.goToSlide(4);
});
When the slide for #How tag is the current slide and then if I want to click any next/prev control I wanted to remove the slide 'li.added' and reload the default slider with 4 slides. That's I tried the following code
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
but nothing happens! Can anyone please help me on this? What wrong I'm doing? Here is the Live testing site for you convenience.
I found that you need to bind the next button click function every time once you call reloadSlider, as it re-bind the next-previous control so it will lose the event binding if you do it at page load. So please rebind the click event every time you reload.
var bindNext = function(){
$('a.bx-next').click(function(e){
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
slider.reloadSlider({
mode:'fade',
auto: true,
autoStart: true,
pager:false,
});
}
});
}
and then when you call reloadSlider then call the bindNext() function after calling it.
$('#forSellers').click(function(e){
e.preventDefault();
if( $('ul.bxslider li.added').length > 0 ){
$('.bxslider').find('li.added').remove();
}
$('.bxslider').append('<li class="added"><img src="img/seller.jpg" /></li>');
slider.reloadSlider({
auto: false,
autoStart: false,
pager:false,
mode:'fade',
});
slider.goToSlide(4);
bindNext();
});
Its working at my side.
The Bootstrap carousel is a strange beast. I've tried tweaking $next to prevent infinite looping but end up either breaking it or preventing the slides from going backwards when reaching the end.
I would like the carousel to only slide within the list and not infinitely loop.
Any help would be appreciated.
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
this.$element.one($.support.transition.end, function() {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function() {
that.$element.trigger('slid')
}, 0)
})
} else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
Update: This is unrelated to "autoplay" I'm specifically referring to manually pressing the left and right buttons.
For the carousel to not infinitely loop (using Bootstrap 3.0.0), and stop at the last slide unless the "next" arrow is clicked, the following is the best way to do it:
$('.carousel').carousel({
interval: 5000,
wrap: false
});
Setting the wrap option to false tells the carousel to stop cycling through the slides automatically. I hope this answers your question correctly.
You could just add some code to the page to hide the appropriate carousel controls after a slid event:
$('#myCarousel').on('slid', '', function() {
var $this = $(this);
$this.children('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
}
});
This example assumes the markup used on the Twitter Bootstrap example carousel.
Make sure to hide the left one when you open the page.
Add attribute data-wrap="false" in Div
The easiest way to do this is as follows:
//intro slider
$('#carousel_fade_intro').carousel({
interval: 2500,
pause: "false"
})
//Stop intro slider on last item
var cnt = $('#carousel_fade_intro .item').length;
$('#carousel_fade_intro').on('slid', '', function() {
cnt--;
if (cnt == 1) {
$('#carousel_fade_intro').carousel('pause');
}
});
Not sure if this is only relevent to the newest version of Bootstrap but setting data-wrap="false" on the outermost carousel container will prevent it from proceeding past the final slide.
source: http://getbootstrap.com/javascript/#carousel-options
For people looking for a solution for Bootstrap 3 working for multiple carousels on same page try this:
$(function() {
// init carousel
$('.carousel').carousel({
pause: true, // init without autoplay (optional)
interval: false, // do not autoplay after sliding (optional)
wrap:false // do not loop
});
// init carousels with hidden left control:
$('.carousel').children('.left.carousel-control').hide();
});
// execute function after sliding:
$('.carousel').on('slid.bs.carousel', function () {
// This variable contains all kinds of data and methods related to the carousel
var carouselData = $(this).data('bs.carousel');
// get current index of active element
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
// hide carousel controls at begin and end of slides
$(this).children('.carousel-control').show();
if(currentIndex == 0){
$(this).children('.left.carousel-control').fadeOut();
}else if(currentIndex+1 == carouselData.$items.length){
$(this).children('.right.carousel-control').fadeOut();
}
});
Please let me now if this is not working in your case.
if you are using bootstrap 3 use this
$('.carousel').carousel({
wrap: false
});
The codes posted here have two problems: doesn't work if you have more than one carousel on the same page and doesn't work if you click on the indicator dots. Also, in Bootstrap 3 the event has changed name.
The below code is an updated version of this code. And here you can find a more detailed explanation
checkitem = function() {
var $this;
$this = $("#slideshow");
if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#slideshow").on("slid.bs.carousel", "", checkitem);
I'm using the Flowplayer plugin inside the AnythingSlider control. I'd like to stop the slider from moving to the next slide when the user clicks to interact with the Flowplayer. I've tried the following but the slider continues to move to the next slide; the .click() call on the #start-stop item didn't work either. I'd like it to stop when the user clicks on any part of the Flowplayer, though in this case I tested it for the onStart.
$f("vid", "flowplayer-3.2.1.swf", {
clip: {
autoPlay: false,
autoBuffering: true,
onStart: function(clip) {
//$('#start-stop').click();
$('.anythingSlider').anythingSlider.startStop(false);
}
});
Thank you.
Make sure you get the latest version of AnythingSlider, then try this:
$f("vid", "flowplayer-3.2.1.swf", {
clip: {
autoPlay: false,
autoBuffering: true,
onStart: function(clip) {
$('.anythingSlider').data('AnythingSlider').startStop(false);
}
}
});