Entfernen Sie die Opazität von Karussell Bilder in Materialise Design

Question

Ich verwende 3d Karussell. Und Bilder haben etwas Opazität. Aber ich möchte keine Transparenz auf Bildern.

$('.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>

Ich möchte von allen Bildern Opazität reduzieren.

Answer 1

Es gibt keine Option für das Karussell-Plugin, um die Deckkraft auf die Bilder einzustellen, also müssten Sie es über CSS-Stile machen. Nicht die beste Wahl, aber ich sehe keine einfachere Art und Weise :)

$('.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>