I am using Splidejs for a slider carousel and a video carousel. I am having a issue where if I mount the video carousel first, the slider carousel does not render, and vise versa. Iv made sure to use different css selectors and they render correctly if they are the first mounted carousel so that does not seem to be the issue. Any guidance would be appreciated.
I receive this error for the second carousel.
Uncaught Error: [splide] null is invalid.
Current Code
const splideVideo = new Splide( '#splide2', {
heightRatio: 0.5625,
cover : true,
video : {
loop: true,
},
} );
splideVideo.mount( { Video } );
const splideSlider = new Splide( '#slider1' );
splideSlider.mount();
Was able to come to a solution.
//Splide Hero Slider
const HeroSplideSlider = document.querySelector(".hero-splide-slider");
HeroSplideSlider && new Splide('.hero-splide-slider').mount();
//Splide Hero Splide
const splideVideo = document.querySelector(".splide-video");
const splideConfig = {
heightRatio: 0.5625,
cover : true,
video : {
loop: true,
},
}
splideVideo && new Splide('.splide-video', splideConfig).mount( { Video } );
Related
Render or Load the Lottie file animation then the whole page should be visible because right now when the page loads the lottie file loads with a bit dilay, which makes the lottie file section to collaps which spoils the loading experience, so i want the lottie file to render completly first then make the page visible
here is a similar setup on codepen link
` let homeBannerLottie = bodymovin.loadAnimation({
container: document.querySelector('.h_banner_lottie'),
render: 'svg',
loop: 0,
autoplay: false,
path: './assets/lottie/banner-lottie.json'
});
//! visibility home
let body = document.body;
let home = document.querySelector('.h_banner');
let homeLottie = document.querySelector('.h_banner_lottie');
homeLottie.style.visibility = 'visible';
setTimeout(() => {
body.style.visibility = 'visible';
home.style.visibility = 'visible';
homeBannerLottie.play();
}, 500);`
I'm adding a slideshow using react-slick and implementing my own lazy-loading routine so that I can pre-load images a slide ahead (eventually 2 ahead). In order to do this, I need to access the DOM element containing the list of slides wrapped by Slick. Once I have that element, I should easily be able to use querySelector() to target a slide to load its images.
However, I'm having trouble using the slider ref I've created. It's returning a reference to the Slick object, which is not a DOM element, and using querySelector() on slider.current gives the error:
Uncaught TypeError: slider.current.querySelector is not a function
Any thoughts as to how to reference the Slick DOM element?
export default function Carousel({ children, ...slickProps }) {
const slider = useRef();
const slickDefaults = {
dots: true,
infinite: false,
slidesToScroll: 1,
slidesToShow: 1,
speed: 200,
arrows: true
};
const onNext = () => {
slider.current.slickNext();
};
const onPrev = () => {
slider.current.slickPrev();
};
return (
<Slider
{...slickDefaults}
{...slickProps}
ref={slider}
className="carousel"
beforeChange={(_currentSlide, nextSlide) => {
if (slider.current) {
// The error occurs here
const slideElement = slider.current.querySelector(`[data-index="${nextSlide}"]`);
if (slideElement) {
const images = slideElement.getElementsByTagName('IMG');
for (let i = 0; i < images.length; i++) {
const image = images[i];
const lazySrc = image.getAttribute('data-lazy');
if (lazySrc) {
image.setAttribute('src', lazySrc)
image.removeAttribute('data-lazy');
}
}
}
}
}}
prevArrow={
<CarouselButton
direction="left"
clickEvent={onPrev}
/>
}
nextArrow={
<CarouselButton
direction="right"
clickEvent={onNext}
/>
}
>
{children}
</Slider>
);
}
It turns out that I just had to dig a little deeper into the object pointed to by the ref. In most cases, ref.current will suffice, but here the slideshow DOM element can be found at: ref.current.innerSlider.list, which references the element div.slick-list.
The error can be resolved by replacing the line with:
const slideElement = slider.current.innerSlider.list.querySelector(`[data-index="${slideIndex}"]`);
I'm working on a website using jPlayer. The problem appeared when I tried to use it with my android phone, so I started recoding it. Now I'm trying to use the jPlayerAndroidFix class. I'm doing it just like in the example given in the source code in the tutorial, and still it's not working.
Here's the code:
function playSound(sound) {
if (playToggle) {
return;
}
var id = "#jplayer-play";
var media = {
mp3: sound
};
var options = {
swfPath: $('body').data('jplayer-swf'),
solution: 'flash,html',
wmode:"window",
supplied: 'mp3',
preload: 'metadata',
volume: 0.8,
muted: false,
errorAlerts: false,
warningAlerts: false,
customCssIds: true
};
var myAndroidFix = new jPlayerAndroidFix(id, media, options);
myAndroidFix.setMedia(media);
myAndroidFix.play();
}
Important thing to add - the audio is received dynamically, for example from a link:
http://granie.t-mobile.pl/sets/play/69986
and that's the "sound" variable.
What may cause the problem? What am I doing wrong?
The jPlayerAndroidFix class can be found in the source code of
http://jplayer.org/latest/demo-01-android/?theme=0
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.
It should change the video and start playing regardless of whether or not a video is currently loaded and playing.
Thanks.
See example below where api is your flowplayer instance and replaceclip is the one you want to start plating
var api = flashembed("player", {src:'FlowPlayerDark.swf'}, {config: ...}});
var replaceclip = {'url':'myvideo.mp4', 'autoplay':true};
<button onClick="api.playClip(replaceclip)">Play</button>
See my example in Github https://github.com/Teaonly/android-eye/blob/master/assets/droideye.js
var initAudioPlayer = function () {
// install flowplayer into container
// http://flash.flowplayer.org/
$f("player", "flowplayer-3.2.15.swf", {
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false,
play: false,
}
},
clip: {
autoPlay: false,
url: "stream/live.mp3",
}
});
audioPlayer = $f();
};
var newClip = {'url':'stream/live.mp3?id='+audioCount,'autoplay':true};
audioCount ++;
audioPlayer.play(newClip);
$f().play([{url:'yourmovie.flv'}]);
In this way you can change the video dynamically in Ajax.
You can check out the javascript api for the flowplayer here
Specifically, you'll probably want to check out the flowplayer objects 'Clip' and 'Player'