슬라이더 - 액티브 흐림

Question

나는 현재이

하고 난 그것이 내가 좀 도와주세요 일했다있는 havent 한 많은 것들을 시도

처럼보고 싶어!

나는 올빼미 회전 목마를 사용하고

내 CSS :

#owl-slider .item{ 
    padding: 30px 0px; 
    margin: 10px; 
    color: #FFF; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    text-align: center; 
} 
.customNavigation{ 
    text-align: center; 
} 
.customNavigation a{ 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
.image-fade-left { 
    -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,0)); 
} 

.image-fade-right { 
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0)); 
} 

내 HTML :

<div class="image-fade-right"> 
    <div class="image-fade-left"> 
     <div id="owl-slider" class="owl-carousel"> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
      <div class="item"> 
       <img class="lazyOwl" data-src="" alt=""> 
      </div> 
     </div> 
    </div> 
</div> 

전체 코드 : http://hastebin.com/hevogeqijo.xml

당신을 감사합니다!

Answer 1

당신은 아마이 작업을 수행하여 하나의 클래스 만 대신 두 개를 사용하여이 작업을 수행 할 수 있습니다 내가 무슨 짓을

.image-fade { 
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1), rgba(0,0,0,0)); 
} 

은 흰색입니다 수 있도록 (두 경계에서, 기울기에 더 많은 "앵커"포인트를 추가입니다 rgba(0,0,0,0))이고 중앙에 투명 (rgba(0,0,0,1))입니다.

또는, 적어도 수에서 코드를 수정하려는 경우,이 시도 :

.image-fade-left { 
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,1)); 
} 

.image-fade-right { 
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0), rgba(0,0,0,0)); 
}