javascript - GSAP slider 在 IE11 和 Safari 中不起作用

Question

在我发现这个 slider 无法在 IE11 和 safari 上运行后，我将其集成到我的网站中:

这里是 slider 代码的链接:

https://codepen.io/gvrban/pen/qjbpaa

它在 Chrome 和 IE11 中工作正常，我尝试更改样式，但问题仍然存在。我认为这与flexbox有关。

HTML 部分(只有一张幻灯片):

<div class="slider">
<div class="slider-wrapper flex">
        <div class="slide flex">
        <div class="slide-image slider-link next"><img src="https://goranvrban.com/codepen/img6.jpg"><div class="overlay"></div></div>
        <div class="slide-content">
            <div class="slide-date">30.10.2017.</div>
            <div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
            <div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
            <div class="slide-more">READ MORE</div>
        </div>  
    </div>
</div>
<div class="arrows">
<a href="#" title="Previous" class="arrow slider-link prev"></a>
<a href="#" title="Next" class="arrow slider-link next"></a>
</div>
</div>

CSS部分:

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {background-color: #0D1B2B; overflow-x: hidden; font-family: roboto; -webkit-font-smoothing: antialiased; margin: 0;}
.flex { display: -webkit-flex; display: flex; -webkit-flex-direction: row;  flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;}

.slider-wrapper div {position: relative;}
.slider-wrapper {margin-top: 5vw;  margin-left: 11vw;}
.slide-image {height: 24vw;}
.slide-image img {width: 24vw; cursor: pointer;}
.slide-content {width: 25vw; color: #fff; padding:3vw 18vw 3vw 9vw;}
.slide-date {color: #0a8acb; font-size: 1.1vw; font-weight: 400; letter-spacing: 0.1vw; padding-bottom: 1.4vw;}
.slide-title {font-size: 1.2vw; font-weight: 400; letter-spacing: 0.1vw; line-height: 1.55vw; padding-bottom: 1.8vw;}
.slide-text {font-size: 0.80vw; line-height: 1.2vw; opacity: 0.8; padding-bottom: 4vw;}
.slide-more {font-weight: 400; letter-spacing: 0.1vw; float: left; font-size: 0.9vw;}
.slide-bullet {width: 0.5vw; height: 0.5vw; background-color: #0b8bcc; border-radius: 200%; position: relative; margin-left: 1.2vw;}
.slide-nav {margin-left: 64vw; margin-top: -5.5vw;}

div.overlay-blue {width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s ease all;}
div.overlay-blue:hover {background-color: rgba(13, 27, 43, 0.5);}

.arrows{width: 3.5vw; margin-top: -5.8vw; margin-left: 72vw; position: relative;}
.arrow {display: inline-block; position: absolute; width: 1.2vw; height: 1.2vw; background: transparent; text-indent: -9999px; border-top: 0.15vw solid #fff; border-left: 0.15vw solid #fff; transition: all .1s ease-in-out; text-decoration: none; color: transparent;
}
.arrow:hover {border-color: #0A8ACB; border-width: 0.25vw;
}
.arrow:before {display: block; height: 200%; width: 200%; margin-left: -50%; margin-top: -50%; content: ""; transform: rotate(45deg);}
.arrow.prev {transform: rotate(-45deg); left: 0;}
.arrow.next {transform: rotate(135deg); right: 0;}

JS部分:

( function($) {

  $(document).ready(function() {

    var s           = $('.slider'),
        sWrapper    = s.find('.slider-wrapper'),
        sItem       = s.find('.slide'),
        btn         = s.find('.slider-link'),
        sWidth      = sItem.width(),
        sCount      = sItem.length,
        slide_date  = s.find('.slide-date'),
        slide_title = s.find('.slide-title'),
        slide_text  = s.find('.slide-text'),
        slide_more  = s.find('.slide-more'),
        slide_image = s.find('.slide-image img'),
        sTotalWidth = sCount * sWidth;

    sWrapper.css('width', sTotalWidth);
    sWrapper.css('width', sTotalWidth);

    var clickCount  = 0;

    btn.on('click', function(e) {
      e.preventDefault();

      if( $(this).hasClass('next') ) {

        ( clickCount < ( sCount - 1 ) ) ? clickCount++ : clickCount = 0;
      } else if ( $(this).hasClass('prev') ) {

        ( clickCount > 0 ) ? clickCount-- : ( clickCount = sCount - 1 );
      }
      TweenMax.to(sWrapper, 0.4, {x: '-' + ( sWidth * clickCount ) })


      //CONTENT ANIMATIONS

      var fromProperties = {autoAlpha:0, x:'-50', y:'-10'};
      var toProperties = {autoAlpha:0.8, x:'0', y:'0'};

      TweenLite.fromTo(slide_image, 1, {autoAlpha:0, y:'40'}, {autoAlpha:1, y:'0'});
      TweenLite.fromTo(slide_date, 0.4, fromProperties, toProperties);
      TweenLite.fromTo(slide_title, 0.6, fromProperties, toProperties);
      TweenLite.fromTo(slide_text, 0.8, fromProperties, toProperties);
      TweenLite.fromTo(slide_more, 1, fromProperties, toProperties);

    });

  });
})(jQuery);

$('.overlay').addClass('overlay-blue');

非常感谢。

Answer 1

早上好，

您可以在变量声明下使用 console.log(sWidth, 'sWidth') 并查看您的变量在不同浏览器中不会返回相同的值。

解决方案:

从幻灯片 html 代码中删除 Flex 类，并将显示更改为 block ，以在跨浏览器中获得相同的计算，并且您应该在其中添加另一个 div 以保持 Flex 样式。

将 HTML 幻灯片代码更改为:

 <div class="slide">
      <div class="slide-container">
      <div class="slide-image slider-link prev"><img src="https://goranvrban.com/codepen/img2.jpg">
              <div class="overlay"></div>
            </div>
            <div class="slide-content">
               <div class="slide-content-inner">
              <div class="slide-date">30.07.2017.</div>
              <div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
              <div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in
                vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex.
              </div>
          <div class="slide-more">READ MORE</div>
        </div>
     </div>
  </div>
</div>

并添加这些 css 样式:

.slide {
  display:block;
}

.slide-container{
  display: flex;
}
.slide-content-inner{
  width:35vw;
  padding: 5%;
}

并更改这些(删除填充并更改宽度):

.slide-content {
   width: 50vw;  //changed to 50vw
   color: #fff; 
   /*padding:3vw 18vw 3vw 9vw;*/ //removed
}

您可以通过额外的样式获得解决方案:)