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.
Related
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
A bxSlider's inner item click event doesn't fire after Chrome has updated to version 73. How can I fire .on('click') event for elements in new Chrome?
It fires in Chrome when slides are moving.
Everyting is fine in FireFox
<div class="slider-pager">
<div class="slider-pager__item"><img src="1.jpg" alt=""></div>
<div class="slider-pager__item"><img src="2.jpg" alt=""></div>
</div>
<script>
carouselProduct = $('.slider-pager').bxSlider({
maxSlides: 3,
minSlides: 3,
slideWidth: 90,
infiniteLoop: false,
moveSlides: 1,
slideMargin: 8,
pager: false,
nextSelector: '.slider__nav--next',
prevSelector: '.slider__nav--prev',
nextText: '→',
prevText: '←'
});
$('.slider-pager__item').on('click', function (event) {
//Don't fire in Chrome 73, works in FireFox
$('.slider-pager__item').removeClass('active');
$(this).addClass('active');
});
</script>
JS Fiddle https://jsfiddle.net/sergey_beloglazov/3ty7w12z/17/
UPDATE:
I have made a workaround for this slider, handling wrapper onClick event:
$('.slider-pager').parent().on('click', function (event) {
var $hover_item = $('.slider-pager__item:hover');
//Checking if we have found the element
if ($hover_item.length>0){
selectBxPagerItem($hover_item);
}
});
$('.slider-pager__item').on('click', function (event) {
selectBxPagerItem($(this));
});
selectBxPagerItem() - is a selecting function.
For a slider with colorbox on click, I have made a similar click emulation:
$('.slider-for').parent().on('click', function (event) {
var $hover_item = $('.slider-for__item:hover a');
if (($hover_item.length>0)&&(!window.slider_for_click_imitation)){
window.slider_for_click_imitation=true;
$hover_item.click();
}
window.slider_for_click_imitation=false;
});
UPDATE 2019.07.20:
I've found out recently, that previous solution doesn't work now.
I've cheked it and discover, that inner elements have no :hover state;
So, there is another soulution with mouseover event
/* A Chrome bx slider bug workaround */
//A slide, that has the mouse pointer over
window.bxslider_mouse_over_slide=null;
$(function() {
$('.slider-pager div').mouseover(
function(event) {
window.bxslider_mouse_over_slide=$(this);
});
});
$('.slider-pager').parent().on('click', function (event) {
//Check if we've got a slide under the mouse
if ((window.bxslider_mouse_over_slide!=null)){
$('.slider-pager__item').removeClass('active');
window.bxslider_mouse_over_slide.addClass('active');
}
});
Making a workaround, I've found out that when I click on banner, a mouseover event triggers, and only then it handles a click event. So that that moment slide has no :hover state. So I just save last hovered banner.
Check the solution: https://jsfiddle.net/sergey_beloglazov/5kmdacgn/22/
Looks like the latest Chrome update made any click inside bxSlider target the container instead the link inside it.
Adding touchEnabled: false to the options disables the swipe behaviour, but solves the click issue. Eg.:
carouselProduct = $('.slider-pager').bxSlider({
maxSlides: 3,
minSlides: 3,
slideWidth: 90,
infiniteLoop: false,
moveSlides: 1,
slideMargin: 8,
pager: false,
nextSelector: '.slider__nav--next',
prevSelector: '.slider__nav--prev',
nextText: '→',
prevText: '←',
touchEnabled: false
});
I recommend keeping an eye/contributing to this thread for updates and better solutions:
https://github.com/stevenwanderski/bxslider-4/issues/1240
I used the mousedown event instead
if(window.navigator.userAgent.toLowerCase().indexOf("chrome") > 0) {
$("body").on("mousedown", ".bx-viewport a", function() {
if($(this).attr("href") && $(this).attr("href") != "#") {
window.location=$(this).attr("href");
}
});
}
I've made a simple css3 animation (progress bar) and tried to put it inside my owl carousel slider, more particularly, to the buttons.
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
navigation : true,
pagination : true,
paginationSpeed : 400,
singleItem: true,
transitionStyle: "mask",
autoHeight: true,
autoPlay: 6000, //Set AutoPlay to 3 seconds
navigationText : false,
afterAction : syncPosition,
afterAction: function(current) {
current.find('video').get(0).play();
}
});
function syncPosition(el){
var current = this.currentItem;
// code for smooth transition
this.owl.owlItems.removeClass('turn-on');
$(this.owl.owlItems[this.owl.currentItem]).addClass('turn-on');
}
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
When it detect currentItem (visible slider) it turn the class (turn-on) and starts animation.
The problem is that the progress-bar animation, but also transitionStyle: "mask" doesn't work with the script below which I use to start the video in the slider. Of course when I remove it, it works fine.
afterAction: function(current) {
current.find('video').get(0).play();
}
UPDATE: Here is the fiddle
Do have someone an idea how to solve it? Thx in advance.
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.