I am using a jQuery slider (Swiper) in my project. Initialising the slider works fine if I load the page, but when loading in new content (with slider) from html files the slider does not initialise. The current steps:
Creating a new section:
var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);
Loading content from html file into new section
section.load(newSection+'.html .cd-section > *', function(event){...});
I'm trying to initialise after this load event, this is not working.
section.load(newSection+'.html .cd-section > *', function(event){
if(typeof Swiper == "undefined") {
console.log("Ready to rumble");
$.getScript('js/swiper.jquery.min.js', function() {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationType: 'progress',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 30,
grabCursor: true,
});
});
}
});
How can i get the slider to initialise after the load event?
I resolved this issue by using the following:
The index page needs to have the swiper style in the head.
Call slidername.update(true) after the load event, to update the
slider after DOM manipulation.
See http://www.idangero.us/swiper/api for further reference on the update function.
Related
I am new to coding, and trying to learn as much as i can while working on real projects.
I have 8 divs, and each div has it's individual lottie animation (each animation has its .json file). I want to play the respective div's animation on hover.
so my html looks like this
var containerHorloge = document.getElementById("anim-horloge");
var containerBalance = document.getElementById("anim-balance");
var containerOrdi = document.getElementById("anim-ordi");
var containerFamille = document.getElementById("anim-famille");
var containerLunettes = document.getElementById("anim-lunettes");
var containerBonhomme = document.getElementById("anim-bonhomme");
var containerCoupes = document.getElementById("anim-coupes");
var containerPinpoint = document.getElementById("anim-pinpoint");
var animHorloge = bodymovin.loadAnimation({
container: containerHorloge,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-horloge.json'
});
var animBalance = bodymovin.loadAnimation({
container: containerBalance,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-balance.json'
});
var animation = bodymovin.loadAnimation({
container: containerOrdi,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-ordi.json'
});
var animation = bodymovin.loadAnimation({
container: containerFamille,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-famille.json'
});
var animation = bodymovin.loadAnimation({
container: containerLunettes,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-lunettes.json'
});
var animation = bodymovin.loadAnimation({
container: containerBonhomme,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-bonhomme.json'
});
var animation = bodymovin.loadAnimation({
container: containerCoupes,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-coupes.json'
});
var animation = bodymovin.loadAnimation({
container: containerPinpoint,
renderer: 'svg',
autoplay: false,
loop: true,
path : '/wp-content/uploads/svg/anim-pinpoint.json'
});
$(".section-cases .vc_col-sm-3.div-horloge").on('mouseenter', function(event) {
event.preventDefault();
onEnter:animHorloge.play();
})
<div class="vc_col-sm-3 div-horloge"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
<div class="vc_col-sm-3"></div>
(For the example, i just gave one div a specific class, but every div would have it's own specific class.. maybe. lol)
Now i know i could just call each animation on each div separately, but i'm trying to figure out if there's a cleaner / shorter way to do this? A loop? I thought of a forEach loop, but i don't even know how i would associate each animation with each div. Maybe arrays ?
Again, i am fairly new to coding, and know some basics, but not much of loop, arrays, etc..
Thanks a lot!
EDIT
So this is how i got it to work (thanks to #sam-osb's answer)
var lottiePlayer = document.getElementsByTagName("lottie-player");
$(lottiePlayer).on('mouseenter', function(event) {
console.log(this);
this.setDirection(1)
this.play()
}).on('mouseleave', function(event) {
this.setDirection(-1)
this.play()
});
<div class="box">
<lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
<p>Lorem ipsum</p>
</div>
<div class="box">
<lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
<p>Lorem ipsum</p>
</div>
The problem is that i want to hover on the PARENT (.box div...)
So i've tried:
$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
$(this).find(lottiePlayer).play();
})
// or
$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
this.find(lottiePlayer).play();
})
// or even
$(lottiePlayer).closest(".box")on('mouseenter', function(event) {
lottiePlayer.play();
})
// and then
$(".box")on('mouseenter', function(event) {
this.find(lottiePlayer).play();
})
And it always returns that .play() is not a function...
i know i'm doing something stupidly wrong, but don't know what LOL
You can use this library with the 'hover' attribute to play animations on hover, and let it load the animations for you so you could remove all the bodymovin calls:
https://github.com/LottieFiles/lottie-player
Just include the CDN in the head of your HTML file:
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
then declare your element:
<lottie-player src="URL" hover></lottie-player>
So after getting very useful answers here and in other questions, the correct way to do this:
var lottiePlayer = document.getElementsByTagName("lottie-player");
$(".vc_col-sm-3").on('mouseover', function(event) {
$(this).find(lottiePlayer)[0].play();
});
I am having difficulty to figure out how to wait or delay slider about 1 second before move to another slider. The below is JavaScript. I am not sharing the html code because its too lengthy and my question will look messy. I hope some of you have idea. I really appreciate your help.
Js code
var swiper = new Swiper('.swiper-container', {
autoHeight: true, //enable auto height
mousewheelControl: false,
touchRatio: 0,
allowTouchMove: false,
shortSwipes: false,
speed:2000,
navigation: {
nextEl: '.swiper-button-next',
},
});
I am having difficulty to figure out how to wait or delay [...] about 1 second
If you wish to delay script execution, you need setTimeout.
Anatomy of setTimeout:
setTimeout( [CALLBACK FUNCTION], [TIME DELAY] );
Working Example:
const myButton = document.getElementsByTagName('button')[0];
const clickButton = () => {
setTimeout(() => {
let myParagraph = document.createElement('p');
myParagraph.textContent = 'You clicked the button.';
document.body.appendChild(myParagraph);
}, 1000);
}
myButton.addEventListener('click', clickButton, false);
<button type="button">Click Me</button>
<p>A second after you click the button above, more text will appear...</p>
i want to make slider use bxslider so that the interval is different per image and also time interval use localstorage, but my code seems to be wrong.
what i want is first image interval 1s and then second image interval 5s, etc so per image the interval is different and time interval use localstorage
this is my code jsfiddle.net/noval_id/4qbs5jw0/
Your weren't getting multiple delays because you weren't running your function again, if you want different delay values, you have to run it again and again for the different delay values you stored in the array.
$(document).ready(function (){
var startIndex = localStorage.getItem("currentIndex");
if (startIndex == null)
startIndex = 0;
var ImagePauses = [1000,30000,2000,9000,12000,15000];
var slider = $('.bxslider').bxSlider();
modifyDelay(0)
function modifyDelay(startSlide){
slider.reloadSlider({
mode: 'horizontal',
infiniteLoop: true,
auto: true,
autoStart: true,
autoDirection: 'next',
autoHover: true,
pause: ImagePauses[startSlide],
autoControls: false,
pager: true,
pagerType: 'full',
controls: true,
captions: true,
speed: 500,
startSlide: startSlide,
onSlideAfter: function($el,oldIndex, newIndex){
modifyDelay(newIndex) // here run it again with new index
save($el, oldIndex, newIndex)
}
});
}
});
function save($el, oldIndex, newIndex) {
localStorage.setItem("currentIndex", newIndex);
}
Also wrap your jquery code in $(document).ready function.
So I have setup two swiper.js instances and I want to scroll both while using one of them.
EDIT: My main goal is to recreate the main functionality on top of the swiper homepage.
EDIT2: I found this link, but it appears that this uses an older version of swiper.
Here is my config, only the first one works.
$(document).ready(function () {
//initialize swiper when document ready
var swiperFront = new Swiper('.swiper-container-front', {
// Optional parameters
effect: 'coverflow',
centeredSlides: true,
direction: 'horizontal',
slidesPerView: '3',
loop: false,
followFinger: true,
controller: {
control: [swiperFront, swiperBack],
by: 'container',
}
});
var swiperBack = new Swiper('.swiper-container-back', {
// Optional parameters
effect: 'fade',
centeredSlides: true,
slidesPerView: '3',
loop: false,
});
swiperFront.params.controller.control = swiperBack;
swiperBack.params.controller.control = swiperFront;
})
What am I doing wrong, and how to fix it?
Fiddle
I think the main problem here was the outdated swiper.js version. Updated to 4.3.2.
jsfiddle: https://jsfiddle.net/ajxmyL7v/
For documentation reasons.
For this case the main difference in switching from Swiper v3 to v4 is to omit the .params. So instead of
mySwiper.params.control
without params and the new API
mySwiper.controller.control
Hello, I am using the iDangero.us Slider and I have a problem resuming the replay/autoplay after swiping.
Here are the program details: "Create an iPad slider that has autoplay and a clickable pagination button. If the user stops using/swiping the slider, it will resume autoplay without refreshing the page."
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
autoplay: 2000,
speed:1000,
autoResize:true,
paginationClickable: true,
onTouchStart : function() {
slideTouched();
}
})
$('.pagination').on('click',function() {
mySwiper.stopAutoplay();
mySwiper.params.autoplay = 10000;
mySwiper.startAutoplay();
});
var timer = null;
function slideTouched(){
mySwiper.stopAutoplay();
mySwiper.params.autoplay = 10000
mySwiper.startAutoplay();
}
</script>
Link to live demo - http://emannthod.0fees.net/stock1/
I believe the problem is in the function slideTouched(). I don't think mySwiper is defined inside of the function. Please help me fix the autoplay feature after swiping.
Set this parameter:
autoplayDisableOnInteraction:false
Your live demo code in the link you provided has the slideTouched() function defined as
function slideTouched(){
Swiper.stopAutoplay();
Swiper.params.autoplay = 10000
Swiper.startAutoplay();
}
when it should be
function slideTouched(){
mySwiper.stopAutoplay();
mySwiper.params.autoplay = 10000;
mySwiper.startAutoplay();
}
You want to reference the Swiper object you used to create the slideshow.