I'm building a males fashion site with a slider that have both images and a video in it. I'm using owl.carousel as a slider. The video is an plane HTML5 video tag.
I'm trying to start the video whith jquery like this: $('#video')[0].play();
It works perfectly when the video is outside the slider/carousel, but how do I start it inside?
Codepen link
I just look your codepen. After few tests, I saw two containers with class video-slider with a video tag with the same id "video" inside. (Check with debug console on the render view and the jquery code $(".video-slide").children()).
You can start the videoS with the jquery code $(".video-slide").children().each(function() { this.play(); }); but before you need to find where and why your blocks are duplicated.
I hope it helps
Created a snippet
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
I have created a sample HTML code.
Please check it.
set your CSS accordingly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script type="text/javascript" src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<style class="cp-pen-styles">
body {
background-color: #91a8d2;
}
.container {
margin-top: 50px;
max-width: 500px;
}
.stage .image-slide, .stage .video-slide {
display: block;
width: 100%;
height: 100%;
}
.stage .video-slide > video {
width: 100%;
height: auto;
}
</style>
<title></title>
<script type='text/javascript'>
$(function(){
var owl;
$(document).ready(function () {
owl = $(".stage");
owl.owlCarousel({
autoplay: true,
autoplayHoverPause: true,
loop: true,
items: 1,
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true,afterAction: function(current) {
current.find('video').get(0).play();
}
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="stage">
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide1.jpg">
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide2.jpg">
</div>
<div class="item">
<video id="video">
<source src="http://imyourman.dk/demo/fashion.mp4" type="video/mp4" autoplay>
<source src="http://imyourman.dk/demo/fashion.ogg" type="video/ogg">
</video>
</div>
<div class="image-slide">
<img src="http://imyourman.dk/demo/slide3.jpg">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am having a problem with splide video extension, when I am trying to use it with youtube it doesn't load the video, just shows a black screen once I click play.
I've copied the exact example from the docs and put random puppy pictures as img but it doesn't work.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#3.6.9/dist/css/splide.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide-extension-video#0.6.4/dist/css/splide-extension-video.min.css">
<title>Splide Video</title>
</head>
<body>
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
<img src="https://cf.ltkcdn.net/dogs/images/orig/235430-2000x1332-australian-shepherd-puppy.jpg">
</li>
<li class="splide__slide" data-splide-vimeo="https://vimeo.com/215334213">
<img src="https://www.rd.com/wp-content/uploads/2021/03/GettyImages-1133605325-scaled-e1617227898456.jpg">
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#3.6.9/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide-extension-video#0.6.4/dist/js/splide-extension-video.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const splide = new Splide('.splide');
splide.mount(window.splide.Extensions);
});
</script>
</body>
</html>
The youtube video won't load, but the Vimeo video works fine.
How can I fix it?
Edit:
When serving this file (Liveserver / Codepen / Webstorm Live view) and not just as static HTML it seem to be working fine. I am not sure what's the reason for that.
Weird but I found that passing the argument video: { loop: true, } makes it run.. without that it wouldn't
Below is a working example... (codepen here: https://codepen.io/alxfmi/pen/poddQMB)
document.addEventListener("DOMContentLoaded", function() {
new Splide('.splide', {
heightRatio: 0.5625,
cover: true,
updateOnMove: true,
pagination: false,
padding: {
left: 0,
right: '22.5%'
},
arrows: true,
width: '100%',
wheel: true,
gap: '1rem',
video: {
loop: true,
},
}).mount(window.splide.Extensions);
});
<link href="https://cdn.jsdelivr.net/npm/#splidejs/splide#3.6.12/dist/css/splide.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/#splidejs/splide-extension-video#0.6.8/dist/css/splide-extension-video.min.css" rel="stylesheet" />
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=cdz__ojQOuU">
<img src="https://img.youtube.com/vi/cdz__ojQOuU/hqdefault.jpg">
</li>
<li class="splide__slide">
<img src="https://img.youtube.com/vi/3GNQL3alB-Y/hqdefault.jpg">
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#3.6.12/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide-extension-video#0.6.8/dist/js/splide-extension-video.min.js"></script>
I am simply trying to trigger a link with no id via console. I have tried multiple scenarios and none seem to work. It is a link with lots of classes and no id.
$('.videoHolder').find('a.icon-play').trigger('click');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="videoHolder hover">
<div class="videoDisplay">
<video class="persistentNativePlayer nativeEmbedPlayerPid" poster="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DB%0B%0A%17%041%80%9B%E7%F2%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00%0CIDAT%08%D7c%60%60%60%00%00%00%04%00%01'4'%0A%00%00%00%00IEND%AEB%60%82"
id="pid_kaltura_player" kentryid="1_4u0ocu4u" kuiconfid="" kwidgetid="" kpartnerid="" preload="none" width="560" height="395" src="" style="position: absolute; left: 0px; top: 0px;"></video>
<div class="videoShadow"></div>
<div class="mwEmbedPlayer" id="kaltura_player" style=""></div>
</div><a tabindex="-1" href="#" role="button" class="comp largePlayBtn largePlayBtnBorder icon-play" aria-label="Play clip" data-order="1" data-plugin-name="largePlayBtn" style="display: flex; opacity: 1;">Mylink</a></div>
You can target the <a> tag and fire .click().
To demonstrate this, I made a test() which will print MyLink Clicked.... in the console if the link is clicked.
function test() {
console.log("MyLink Clicked....");
}
document.getElementsByTagName("a")[0].click();
<div class="videoHolder hover"><div class="videoDisplay">
<video class="persistentNativePlayer nativeEmbedPlayerPid" poster="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DB%0B%0A%17%041%80%9B%E7%F2%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00%0CIDAT%08%D7c%60%60%60%00%00%00%04%00%01'4'%0A%00%00%00%00IEND%AEB%60%82" id="pid_kaltura_player" kentryid="1_4u0ocu4u" kuiconfid="" kwidgetid="" kpartnerid="" preload="none" width="560" height="395" src="" style="position: absolute; left: 0px; top: 0px;"></video><div class="videoShadow"></div><div class="mwEmbedPlayer" id="kaltura_player" style=""></div>
</div><a tabindex="-1" href="#" role="button" class="comp largePlayBtn largePlayBtnBorder icon-play" aria-label="Play clip" data-order="1" data-plugin-name="largePlayBtn" onclick="test()" style="display: flex; opacity: 1;">Mylink</a></div>
I undestand your trouble, the a link you can't click it by yourself ,you can only do it by add some click functon ,then trigger it , and you can try it with this code :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="videoHolder hover">
<div class="videoDisplay">
<video class="persistentNativePlayer nativeEmbedPlayerPid"
poster="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DB%0B%0A%17%041%80%9B%E7%F2%00%00%00%19tEXtComment%00Created%20with%20GIMPW%81%0E%17%00%00%00%0CIDAT%08%D7c%60%60%60%00%00%00%04%00%01'4'%0A%00%00%00%00IEND%AEB%60%82"
id="pid_kaltura_player" kentryid="1_4u0ocu4u" kuiconfid="" kwidgetid="" kpartnerid="" preload="none"
width="560" height="395" src="" style="position: absolute; left: 0px; top: 0px;"></video>
<div class="videoShadow"></div>
<div class="mwEmbedPlayer" id="kaltura_player" style=""></div>
</div>
<a tabindex="-1" href="#" role="button" class="comp largePlayBtn largePlayBtnBorder icon-play"
aria-label="Play clip" data-order="1" data-plugin-name="largePlayBtn"
style="display: flex; opacity: 1;">Mylink</a></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('.videoHolder').find('a.icon-play').on('click',function (e){
e.preventDefault();
console.log('click');
});
$('.videoHolder').find('a.icon-play').click();
</script>
</body>
</html>
I'm using the Swiper script to show a slider with a mix of landscape and portrait photos on a site and I was wondering if it's possible to set a specific max height so all images have the same height respecting their aspect ratio. I know that there is a height parameter on Swiper but I tried it but it doesn't seem to make any difference. Also, I tried to set a max-height on the .swiper-wrapper class or the images inside it .swiper-slide > img but the images are either clipped or distorted.
Any ideas?
Thanks
var swiper = new Swiper( '.swiper-container', {
initialSlide: 0,
loop: true,
autoHeight: true,
height: 200,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
The easiest solution would be adding height: auto to the swiper-slider and height: 100% to the content inside.
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
slidesPerView: "auto",
centeredSlides: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
.swiper {
width: 600px;
height: 100%;
}
.swiper-slide {
background-color: grey;
height: auto !important;
text-align: center;
}
.swiper-content {
height: 100% !important
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Website</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
</head>
<body>
<main>
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="swiper-content">
<p>Slide 1 Content</p>
<p>Slide 1 Content</p>
<p>Slide 1 Content</p>
<p>Slide 1 Content</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content">
<p>Slide 2 Content</p>
</div>
</div>
<div class="swiper-slide medium-content">
<div class="swiper-content">
<p>Slide 3 Content</p>
<p>Slide 3 Content</p>
</div>
</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</main>
<script src="index.js"></script>
</body>
</html>
I am having trouble getting the jquery cycle2 plugin to work.
The slideshow doesn't load and the images. They just appear 1 underneath each other. I don't see any console errors. I have the latest jquery(3.0).
Here is my code. By the way, I am relatively new to javascript and jquery :
$('document').ready(function($) {
$('#slideshow').cycle({
timeout: 0, // no autoplay
fx: 'fade', //
next: '#next',
prev: '#prev'
});
});
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/assets/scripts/jquery.min.js"></script>
<!-- Cycle2 -->
<script type="text/javascript" src="<?php echo get_template_directory_uri();?>/assets/scripts/jquery.cycle2.min.js"></script>
</head>
<div id="slideshow">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;">
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>
I am not sure why this isn't working. As this is an example that was previously given by someone. I am using wordpress by the way. It is not working in chrome nor firefox.
Its because you haven't specified which child HTML element you need to cycle through. Please add data-cycle-slides="> div" to your markup.
Documentation:
Cycle2 allows you to use any type of element for the slides, it's not
solely for cycling images. However, images are the default slide type
so to use other elements you need to override the slides option as
show on this page. The slides option can be set to any valid jQuery
selector. The default value is > img which is a selector to find all
image elements that are immediate children of the slideshow container.
Fiddle: https://jsfiddle.net/codeandcloud/tf24noy6/
Snippet
<!DOCTYPE html>
<html>
<head>
<title>Cycle2 Plugin - Malsup by codeandcloud</title>
<script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<title>Cycle2 Plugin - Malsup by codeandcloud</title>
<script type='text/javascript'>
//<![CDATA[
$('document').ready(function ($) {
$('#slideshow').cycle({
timeout: 0, // no autoplay
fx: 'fade', //
next: '#next',
prev: '#prev'
});
});
//]]>
</script>
</head>
<body>
<div style="width: 250px">
<div id="slideshow" data-cycle-slides="> div">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;"></div>
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>
</div>
</body>
</html>
The following is a code taken form Owl Carousel's own site. I don't know why the callback functions(here afterMove) are not called! Could anybody get the afterMove function called? For me it's not just afterMove, but none of the callbacks works!
<html>
<head>
<!-- Owl Carousel -->
<link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.carousel.min.css">
<!-- Owl Default Theme -->
<link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.theme.default.min.css">
<style type="text/css">
#owl-demo .item {
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
border-radius: 3px;
text-align: center;
}
</style>
</head>
<body>
<div id="owl-demo" class="owl-carousel">
<div class="item"><h1>0</h1></div>
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
</div>
<!-- jQuery -->
<script src="js/jquery/1.9.1/jquery.min.js"></script>
<!-- Owl Carousel -->
<script src="js/vendors/owl-carousel-2/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : true,
afterMove : afterMove
});
function afterMove(){
alert("Hey!");
}
});
</script>
</body>
</html>
you need to use new events with .on(), as per mentioned in its docs, as:
var owl = $("#owl-demo");
owl.owlCarousel({
navigation : true
});
//register `change` event
owl.on('changed.owl.carousel', function(e) {
alert("changed");
});
Demo :: jsFiddle