Materializeデザインのカルーセル画像から不透明度を削除します。

Question

3Dカルーセルを使用しています。画像には不透明感があります。しかし、私はイメージ上に不透明度を望んでいません。

$('.carousel').carousel({ 
 
      dist:0, 
 
      shift:0, 
 
      padding:20, 
 
      interval:100 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css"> 
 
    
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
 

 

 
<div class="carousel"> 
 
    <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a> 
 
    <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a> 
 
    <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a> 
 
    <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a> 
 

 

 
    <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a> 
 

 
</div>

私はすべての画像から不透明度を減らしたいです。

Answer 1

カルーセルプラグインがイメージに不透明度を設定するオプションはないので、CSSスタイルを使用してそれを行わなければなりません。ない最良の選択が、私は任意の簡単な方法:)助けるために

$('.carousel').carousel({ 
 
    dist: 0, 
 
    shift: 0, 
 
    padding: 20, 
 
    interval: 100 
 
});

.carousel .carousel-item { 
 
    opacity: 1 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css"> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
 

 

 
<div class="carousel"> 
 
    <a class="carousel-item" href="#one!"> 
 
    <img src="http://lorempixel.com/250/250/nature/1"> 
 
    </a> 
 
    <a class="carousel-item" href="#two!"> 
 
    <img src="http://lorempixel.com/250/250/nature/2"> 
 
    </a> 
 
    <a class="carousel-item" href="#three!"> 
 
    <img src="http://lorempixel.com/250/250/nature/3"> 
 
    </a> 
 
    <a class="carousel-item" href="#four!"> 
 
    <img src="http://lorempixel.com/250/250/nature/4"> 
 
    </a> 
 

 

 
    <a class="carousel-item" href="#five!"> 
 
    <img src="http://lorempixel.com/250/250/nature/5"> 
 
    </a> 
 

 
</div>