I am using three bxSlider based slider. I want to move each slider from opposite side. I have tried and done it for first two round but in the end of second round slide starting to move from same direction of previous slide.
Here is all script which I have tried so far.
I am sorry if the question is not clear, kindly check the fiddle so that you will understand about my issue and thank you in advance for that.
Below is the main script, which is I am trying
jQuery(document).ready( function($) {
let slideOneFirstInterval = true;
let slideTwoFirstInterval = true;
let slideThreeFirstInterval = true;
let slideOne = $('#owlSlide1');
slideOne.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : false,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideThreeFirstInterval) {
setTimeout(function() {
//slideTwo.goToNextSlide();
slideThree.goToNextSlide();
console.log('True Statement.. 1');
}, 2000);
slideThreeFirstInterval = false
} else {
setTimeout(function() {
slideThree.goToPrevSlide();
console.log('False Statement.. 1');
}, 2000);
}
},
autoDelay : 0,
});
let slideTwo = $('#owlSlide2');
slideTwo.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideTwoFirstInterval) {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('True Statement.. 2');
}, 2000);
slideTwoFirstInterval = false
} else {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('false Statement.. 2');
}, 2000);
}
},
});
let slideThree = $('#owlSlide3')
slideThree.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
autoDelay : 0,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToPrevSlide();
console.log('True Statement.. 3');
}, 2000);
},
});
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToNextSlide();
console.log('false Statement.. 3');
}, 3000);
});
Assuming you want everything to slide from left to right as opposed to right to left, just replace all occurrences of goToNextSlide() with goToPrevSlide(). You may need to re-order your images in your HTML but it's easier to do that than tangle with a library.
Related
I have a Swiper.js carousel that autoplays. I also fade in my page using DOMContentLoaded. This means that the first slide has changed or is in the middle of changing when the page comes into view. So it's in view a much shorter amount of time compared to the others.
Is it possible to delay the initial running of the autoplay carousel? I know you can add a delay to individual slides - but if I do that to counter it, it means 2nd time around the first slide lags/is in view longer than the rest.
JavaScript code:
window.addEventListener('DOMContentLoaded', function() {
document.body.className = 'visible';
});
var caption = document.querySelector('.swiper-caption span');
new Swiper('.swiper', {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: 'fade',
fadeEffect: {
crossFade: true
},
loop: true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
on: {
init: function() {
updateCaptionText(this);
},
activeIndexChange: function() {
updateCaptionText(this);
}
}
});
function updateCaptionText(slider) {
caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}
CSS code:
body.hidden {
opacity: 0;
}
body.visible {
opacity: 1;
transition: opacity .48s .24s ease-out;
}
Call swiper.autoplay.stop() just after setting it up, and call swiper.autoplay.start() inside DOMContentLoaded event handler. Like so:
const swiper = new Swiper(".swiper", {
// Disable preloading of all images
preloadImages: true,
// Enable lazy loading
lazy: false,
effect: "fade",
fadeEffect: {
crossFade: true,
},
loop: true,
autoplay: {
delay: 1200,
disableOnInteraction: false,
pauseOnMouseEnter: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
on: {
init: function () {
updateCaptionText(this);
},
activeIndexChange: function () {
updateCaptionText(this);
},
},
});
swiper.autoplay.stop();
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
swiper.autoplay.start();
});
If you wanna delay the inital start even further, to match it with your CSS animation duration, you can use a setTimout, like this:
window.addEventListener("DOMContentLoaded", () => {
document.body.className = "visible";
setTimeout(() => swiper.autoplay.start(), 1000); // 1000 means 1s, it's in ms here.
});
Live example here at this CodePen I forked. References of used methods are here on Swiper.js's official doc.
I using fancybox in my project and now data attribute is gallery
Here is code
$(".hotel_gallery").attr("data-fancybox", "gallery")
.fancybox({
prevEffect: "none",
nextEffect: "none",
closeBtn: true,
arrows: true,
beforeShow() {
this.title = this.src;
},
helpers: { title : { type : "inside" } }
});
I want to use quick - view
So I rewrite code like this
$(".hotel_gallery").attr("data-fancybox", "quick-view")
.fancybox({
prevEffect: "none",
nextEffect: "none",
closeBtn: true,
arrows: true,
beforeShow() {
this.title = this.src;
},
helpers: { title : { type : "inside" } }
});
But it still have gallery
But here attribute is changed
Here it is
<a class="hotel_gallery thumb_a" href="https://aobtravel.s3.amazonaws.com/hotelpictures/004/075/389/LON-91A-2.jpg?1387235916" data-fancybox="quick-view">
Where is problem can be?
So after making searches I make write code.
Here is js code
$(".hotel_gallery").attr("data-fancybox", "quick-view")
.fancybox({
prevEffect: "none",
nextEffect: "none",
closeBtn: true,
arrows: true,
beforeShow() {
this.title = this.src;
},
afterLoad(instance, current ){
if ( instance.group.length > 1 && current.$content ) {
current.$content.append('<a data-fancybox-next class="button-next" href="javascript:;">→</a><a data-fancybox-previous class="button-previous" href="javascript:;">←</a>');
}
current.$content.append('<a data-fancybox-close class="button-close" href="javascript:;">×</a>');
},
helpers: { title : { type : "inside" } }
});
It changes default stuff to custom
I have used below code to simulate fixed header with vertical and horizontal scroll bars. See example on jsFiddle.
$('#liveTable').dataTable({
'bSort': false,
'destroy': true,
'aoColumns': [
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "75px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "80px", bSearchable: false, bSortable: false },
{ sWidth: "85px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "70px", bSearchable: false, bSortable: false },
{ sWidth: "50px", bSearchable: false, bSortable: false }
],
'scrollY': 200,
'scrollX': true,
'info': false,
'paging': false
});
The above code is working fine in Desktop.
But in mobile devices when I scroll body of the content header part not moving accordingly. There is some delay (flickering effect) in header movement in mobile devices.
How to fix that header movement issue in mobile devices?
Try this if it works for you. It's the other way around, but it works. Maybe you'll just need to adjust width or whatsoever. Run it through jsFiddle to test it.
$.event.special.scrollstart = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
scrolling,
timer;
function trigger( event, state ) {
scrolling = state;
var originalType = event.type;
event.type = scrolling ? "scrollstart" : "scrollstop";
$.event.handle.call( thisObject, event );
event.type = originalType;
}
$this.bind( scrollEvent, function( event ) {
if ( !$.event.special.scrollstart.enabled ) {
return;
}
if ( !scrolling ) {
trigger( event, true );
}
clearTimeout( timer );
timer = setTimeout(function() {
trigger( event, false );
}, 50 );
});
}
};
Ok, if the flickering effect exists, try something like this. Your scroll is ok. It's the effect that sucks.
document.getElementById("btn").addEventListener("click", function(){
var abc = document.getElementById("abc");
var def = document.getElementById("def");
abc.style["-webkit-transition-duration"] = "0ms";
def.style["-webkit-transition-duration"] = "0ms";
abc.style["-webkit-transform"] = "translate3d(0, 0, 0)";
def.style["-webkit-transform"] = "translate3d(100%, 0, 0)";
setTimeout(function(){
abc.style["-webkit-transition-duration"] = "1s";
def.style["-webkit-transition-duration"] = "1s";
abc.style["-webkit-transform"] = "translate3d(-100%, 0, 0)";
def.style["-webkit-transform"] = "translate3d(0, 0, 0)";
},
);
});
I have set up a caroufredsel, and have items inside of it. But when I click on my next and previous buttons, the first time it appears to shift 1 item, every click after that it shifts the entire width of the content and back to the beginning.
I have set my scroll items to 3. Does it have something to do with the width of the container?
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : 'auto',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});
It also seems that on slide, the height of the carousel changes for some reason. maybe this is related
I would also refactor your selector to be simpler as you are using IDs and there should only be one per page anyway:
Instead of:
jQuery('#tab-1').find('#carousel').carouFredSel();
Use this:
jQuery('#carousel').carouFredSel();
Switching the caroufredsel width to 100% did the trick.
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : '100%',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});
Is is possible to pause or set autoplay to false when you mouseover fancybox-wrap?
I would like to have autoplay true and change the opacity of a css object to .5 when the mouse is not over the fancybox-wrap.
When I move the mouse over fancybox-wrapI would like autoPlay to be false or paused and change the opacity back to 1.
my current script is:
$(".fancyboxItem").fancybox({
afterLoad : function(){
var xyz = (this.index);
var fancyNavString = '<div class="fancyNav">';
$('a.fancyboxItem').each(function(index){
if (index==xyz)
fancyNavString = fancyNavString + '<a class="fancyNavIndex selected" href="javascript:;$.fancybox.jumpto('+(index)+')"></a>';
else
fancyNavString = fancyNavString + '<a class="fancyNavIndex" href="javascript:;$.fancybox.jumpto('+(index)+')"></a>';
});
var fancyNavString = fancyNavString + '</div><div class="fancyClose"></div>';
var fancyNavTitle = fancyNavString + '<p>'+(this.index + 1)+' of '+this.group.length+'</p>';
this.title = fancyNavTitle
},
helpers : {
title : {
type : 'inside',
},
},
'loop' : true,
'arrows' : false,
'closeBtn' : false,
'autoPlay' : true,
'playSpeed' : 4000,
'margin' : 50,
'padding' : 15,
'openSpeed' : 500,
'closeSpeed' : 250,
'nextSpeed' : 500,
'prevSpeed' : 500,
'openSpeed' : 500,
'speedOut' : 500,
'openEffect' : 'fade',
'closeEffect' : 'fade',
'nextEffect' : 'fade',
'prevEffect' : 'fade',
});
});
the test page is:
http://brycedavis.com/html/desertsunflower3.html
Try with the afterShow callback option like:
afterShow : function() {
$(".fancybox-wrap").hover(function() {
$.fancybox.play();
$("#targetElement").css({'opacity': 1});
}, function() {
$.fancybox.play();
$("#targetElement").css({'opacity': 0.5});
});
}
The $.fancybox.play() API method toggles the slide show on/off