#jquery #slider #carousel #owl-carousel
#jquery #слайдер #карусель #owl-carousel
Вопрос:
Я использую owl carousel, и мне это нравится, он отлично работает, но, похоже, я не могу заставить встроенные видео Youtube воспроизводиться, когда я нажимаю на красную кнопку воспроизведения. Видео с Vimeo работают просто отлично.
Пример URL:
http://dx1showroom.azurewebsites.net/details-images-v2.html
HTML:
<div class="thumbnail-frame">
<div id="sliderStatus" class="image-count">
<span class="glyphicon icon-camera"></span>
<span class="currentItem"><span class="result"></span></span>/<span class="owlItems"><span class="result"></span></span>
</div>
<div id="slideshow-main" class="owl-carousel main-frame col-sm-8 col-md-8 col-lg-9">
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar4" alt="" class="img-responsive"></a></div>
<div class="item video"><iframe src="http://www.youtube.com/embed/GZL6piSl5P8?rel=0" width="563" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<div class="item video"><iframe src="http://player.vimeo.com/video/81036400" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<div class="item"><a><img src="http://placehold.it/422x750amp;amp;text=FooBar3" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar5" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar6" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar7" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar8" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar9" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar10" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar11" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar12" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar13" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar14" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar15" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar16" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar17" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar18" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar19" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar20" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar21" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar22" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/750x422amp;amp;text=FooBar23" alt="" class="img-responsive"></a></div>
</div>
<div id="slideshow-thumbnails" class="owl-carousel thumbnail-frame">
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar4" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://img.youtube.com/vi/GZL6piSl5P8/1.jpg" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://i.vimeocdn.com/video/457084374_120.jpg" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/90x135amp;amp;text=FooBar3" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar5" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar6" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar7" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar8" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar9" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar10" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar11" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar12" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar13" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar14" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar15" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar16" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar17" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar18" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar19" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar20" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar21" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar22" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90amp;amp;text=FooBar23" alt="" class="img-responsive"></a></div>
</div>
</div>
Javascript:
$(document).ready(function() {
var sync1 = $("#slideshow-main").owlCarousel({
singleItem : true,
slideSpeed : 500,
navigation: true,
pagination: false,
// itemsScaleUp: true,
afterAction : sync,
responsiveRefreshRate : 200,
navigation: true,
navigationText: [
'<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>',
'<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>'
],
afterUpdate : function() {
}
});
var sync2 = $("#slideshow-thumbnails").owlCarousel({
items : 12,
itemsDesktop : [1199,12],
itemsDesktopSmall : [992,8],
itemsTablet : [768,8],
itemsMobile : [520,3],
pagination:false,
responsiveRefreshRate : 100,
scrollPerPage: true,
navigation: true,
navigationText: [
'<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>',
'<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>'
],
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
},
afterUpdate : function() {
}
});
function sync(el){
var current = this.currentItem;
$("#slideshow-thumbnails")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#slideshow-thumbnails").data("owlCarousel") !== undefined){
center(current)
}
updateResult(".owlItems", this.owl.owlItems.length);
updateResult(".currentItem", this.owl.currentItem 1);
}
$("#slideshow-thumbnails").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function center(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]) {
sync2.trigger("owl.goTo", num - sync2visible.length 2)
} else {
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]) {
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
function updateResult(pos,value){
sliderStatus.find(pos).find(".result").text(value);
}
$(".owl-carousel").fitVids();
});
Ответ №1:
Похоже, это как-то связано с функцией doTranslate(); , более конкретно css translate3d.
Видеоролики YouTube работали на iOS для меня после того, как я изменил код с:
doTranslate : function (pixels) {
return {
"-webkit-transform": "translate3d(" pixels "px, 0px, 0px)",
"-moz-transform": "translate3d(" pixels "px, 0px, 0px)",
"-o-transform": "translate3d(" pixels "px, 0px, 0px)",
"-ms-transform": "translate3d(" pixels "px, 0px, 0px)",
"transform": "translate3d(" pixels "px, 0px,0px)"
};
}
Для:
doTranslate : function (pixels) {
return {
"left": pixels "px"
};
}
Я знаю, хакер, но я не программист.
Спасибо,
Джейд