jQuery技术:bootstrap carousel translate3d覆盖不适用于Firefox,IE

我一直在尝试修改Bootstrap 3.3.5 Carousel来显示多个图像,而不是标准的单个图像。 该方法涉及覆盖幻灯片操作的库存translate3d变换值,使其在图像之间移动时一次只前进一个。 我已使用此post中的转换覆盖进行自定义。 这是我基本设置的一支笔 。

一切正常,直到我在firefox(以及IE)中尝试它。 translate3d效果根本不起作用。 从我读到的关于firefox的 translate3d 的实现 ,它应该工作(v41.0.2)。 我原本以为FF不喜欢这个百分比,但我刚才提到的链接只说没有tz值的百分比。 所以我不知道为什么它不起作用。

我是一个巨大的菜鸟,所以我猜测有人会只看一眼并且打击我的脑海,但我真的很想知道为什么它会在我转向其他方法之前发生。

如果你有时间,我感谢任何意见,谢谢。

这是我的代码(codepen版本的工作方式应该如此,但这里的嵌入式代码片段并不是出于某种原因)

var mod_screen = function() { /* Cleanup extra divs that were added in previous resizing */ $('.item').each( function (){ $(this).children('div:not(:first)').remove(); }); $('.carousel .item').each(function(){ var next = $(this).next(), i; if (Modernizr.mq('(min-width: 768px) and (max-width: 991px)')) { /* Small screen sizes */ if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } else if (Modernizr.mq('(min-width: 992px) and (max-width: 1199px)')) { /* Medium screen sizes */ if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (i=0;i<1;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } } else if (Modernizr.mq('(min-width: 1200px)')) { /* Large screen sizes */ if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (i=0;i<2;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } } }); } $(function() { // Call on every window resize $(window).resize(mod_screen); // Call once on initial load mod_screen(); }); 
 @media screen and (min-width: 768px) and (max-width: 991px) { .carousel-inner .active.left { left: -50%; } .carousel-inner .next { left: 50%; } .carousel-inner > .item.next, .carousel-inner > .item.active.right { left: 0; transform: translate3d(50%, 0, 0); -webkit-transform: translate3d(50%, 0, 0); } .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); } } @media screen and (min-width: 992px) and (max-width: 1199px) { .carousel-inner .active.left { left: -33.3333%; } .carousel-inner .next { left: 33.3333%; } .carousel-inner > .item.next, .carousel-inner > .item.active.right { left: 0; transform: translate3d(33.3333%, 0, 0); -webkit-transform: translate3d(33.3333%, 0, 0); } .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; transform: translate3d(-33.3333%, 0, 0); -webkit-transform: translate3d(-33.3333%, 0, 0); } } @media screen and (min-width: 1200px) { .carousel-inner .active.left { left: -25%; } .carousel-inner .next { left: 25%; } .carousel-inner > .item.next, .carousel-inner > .item.active.right { left: 0; transform: translate3d(25%, 0, 0); -webkit-transform: translate3d(25%, 0, 0); } .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; transform: translate3d(-25%, 0, 0); -webkit-transform: translate3d(-25%, 0, 0); } } 
     

    所以我已经解决了这个问题但是我不完全确定它为什么会发生。 我添加了三个不包含transform: translate3D单独媒体查询transform: translate3D ,我已经更改了现有的媒体查询以检查transform-3D支持。 标记没有变化,Javascript也没有变化。 现在看来Firefox和IE都很满意。 就像我说的,我不知道为什么FF在我的代码中不支持translate3D,当文档说它的时候。 如果有人能够告诉我为什么它不起作用我会很感激。 这是更新的笔

     @media all and (min-width: 768px) and (max-width: 991px) { .carousel-inner > .next { left: 50%; } .carousel-inner > .prev { left: -50%; } .carousel-inner > .active.left { left: -50%; } .carousel-inner > .active.right { left: 50%; } } @media all and (min-width: 992px) and (max-width: 1199px) { .carousel-inner > .next { left: 33.3333%; } .carousel-inner > .prev { left: -33.3333%; } .carousel-inner > .active.left { left: -33.3333%; } .carousel-inner > .active.right { left: 33.3333%; } } @media all and (min-width: 1200px) { .carousel-inner > .next { left: 25%; } .carousel-inner > .prev { left: -25%; } .carousel-inner > .active.left { left: -25%; } .carousel-inner > .active.right { left: 25%; } } @media all and (min-width: 768px) and (max-width: 991px) and ((transform-3d), (-webkit-transform-3d)) { .carousel-inner > .item.next, .carousel-inner > .item.active.right { left: 0; transform: translate3d(50%, 0, 0); -webkit-transform: translate3d(50%, 0, 0); } .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; transform: translate3d(-50%, 0, 0); -webkit-transform: translate3d(-50%, 0, 0); } } @media all and (min-width: 992px) and (max-width: 1199px) and ((transform-3d), (-webkit-transform-3d)) { .carousel-inner > .item.next, .carousel-inner > .item.active.right { left: 0; transform: translate3d(33.3333%, 0, 0); -webkit-transform: translate3d(33.3333%, 0, 0); } .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; transform: translate3d(-33.3333%, 0, 0); -webkit-transform: translate3d(-33.3333%, 0, 0); } } @media all and (min-width: 1200px) and ((transform-3d), (-webkit-transform-3d)) { .carousel-inner > .item.next, .carousel-inner > .item.active.right { left: 0; transform: translate3d(25%, 0, 0); -webkit-transform: translate3d(25%, 0, 0); } .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; transform: translate3d(-25%, 0, 0); -webkit-transform: translate3d(-25%, 0, 0); } } 

      以上就是jQuery教程分享bootstrap carousel translate3d覆盖不适用于Firefox,IE相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注(计算机技术网)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请点击右边联系管理员删除。

      如若转载,请注明出处:https://www.ctvol.com/jquerytutorial/561244.html

      (0)
      上一篇 2021年2月4日
      下一篇 2021年2月4日

      精彩推荐