I am working on a WordPress site that turns a custom post type into a slider on a page. I am using Sequence.js for my slider and I can manually create multiple sliders no problem with the following:
//sequence slider options to be used by slider1
var options0 = {
sartingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next0',
prevButton: '.prev0',
fallback: {
theme: "fade",
speed: 100
}
}
//slider1
var sequence0 = $(".slideContainer0").sequence(options0).data("sequence");
//sequence slider options to be used by slider2
var options1 = {
sartingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next1',
prevButton: '.prev1',
fallback: {
theme: "fade",
speed: 100
}
}
//slider2
var sequence1 = $(".slideContainer1").sequence(options1).data("sequence");
How can I streamline this? And also make it dynamic so a slider is created for each post that is made? Any help would be greatly appreciated.
edited - added working answer
I used the answer from Cymen below for the first part by turning the options output into a function and simply calling the function with a counter for each sequence instance. Then used the second part of his answer to initialize each sequence slider and it works a treat.
This is what I have working now:
function options(number) {
return {
startingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next' + number,
prevButton: '.prev' + number,
fallback: {
theme: "fade",
speed: 100
}
};
}
var count = 0;
$('.slideContainer').each(function() {
var sequence = $(this);
sequence.sequence(options(count)).data('sequence');
count++;
});
I haven't used sequence but from your post I am guessing you want to be able to recreate the options object with an increment of the number. So you could do something like this:
function options(number) {
return {
startingFrameID: 1,
cycle: true,
autoPlay: false,
nextButton: '.next' + number,
prevButton: '.prev' + number,
fallback: {
theme: "fade",
speed: 100
}
};
}
Then use it like so:
$(target).sequence(options(0)).data("sequence");
Or in your specific example:
//slider1
var sequence0 = $(".slideContainer0").sequence(options(0)).data("sequence");
//slider2
var sequence1 = $(".slideContainer1").sequence(options(1)).data("sequence")
And to do what you are talking about how about giving all the sequences the same class like say custom-sequence and then do something like this:
var count = 0;
$('.custom-sequence').each(function() {
var sequence = $(this);
sequence.sequence(options(count)).data('sequence');
count++;
});
That may or may not work -- it isn't quite clear to me what the .data('sequence') is doing.
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();
});
What i am trying to achieve, is a basic slideshow that starts, gets to the last slide and stops. I am using Glide.js as it is so small and is really awesome however, with the below code it does not actually pause and the slide spins round back to the beginning again.
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
});
glide.on('move', (e) => {
if(glide.index == item_length) {
console.log(glide.index, item_length);
glide.pause();
}
});
glide.mount();
}
I am getting the console.log out which is telling me 5 5 meaning I am on the glide.index at the 5th slide and the item_length is 5. So the glide.pause() should work. Any help would be greatly appreciated I have been scratching my head for ages on this. I have tried run and other events instead of move and still no success.
Try setting the rewind option to false:
/**
* Homepage Slideshow
*/
if(document.querySelector('.glide')) {
var item_length = document.querySelectorAll('.glide__slide').length - 1;
let glide = new Glide('.glide', {
type: 'slider',
startAt: 0,
perView: 1,
autoplay: 6000,
hoverpause: true,
rewind: false,
});
glide.mount();
}
Reference
I use swiper slider and have counter fractions. Its counting well but I need to count = (all slides - 1). For example if I have 20 slides, I want to show the total number 19.Any ideas how I can do this? I use regular js from their website. Here what I have:
var gallery = new Swiper('.left-side-slider-gallery', {
slidesPerView: '1',
pagination: {
el: '.jail-app-left-side-fractions',
type: 'fraction',
},
});
Thanks!
You can use the custom type, and a renderCustom function, as mentioned in the docs:
var gallery = new Swiper('.left-side-slider-gallery', {
slidesPerView: 1,
pagination: {
el: '.jail-app-left-side-fractions',
type: 'custom',
renderCustom: function (swiper, current, total) {
return current + '/' + (total - 1);
}
}
});
https://jsfiddle.net/joel081112/fctL5z2u/15/
I'm not sure how to fix it since I'm new to JavaScript but I've tried some for-each statements and got nowhere. Here is a fiddle with 3 elements with the class-name bodymovianim but only the first element is appearing. How can I alter this js to show it in each div?
let iconMenu = document.querySelector('.bodymovinanim');
let animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: false,
autoplay: false,
path: "https://raw.githubusercontent.com/thesvbd/Lottie-examples/master/assets/animations/menu.json"
});
var directionMenu = 1;
iconMenu.addEventListener('click', (e) => {
animationMenu.setDirection(directionMenu);
animationMenu.play();
directionMenu = -directionMenu;
});
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.