Buongiorno a tutti.
Con "Slick" ho costruito uno Slideshow che mi permette di visualizzare in orizzontale "n" immagini che posso fare scorrere sia con le classiche freccette che con i pallini. Su ogni immagine ho inserito una Mappa che mi consente di Linkare di volta in volta ulteriori informazioni relative a quell'immagine. Slick è abbastanza efficiente da opacizzare le immagini non in primo piano, ma non abbastanza da impedire che si possa fare Click anche sulle immagini NON in primo piano. Io vorrei, per chiarezza, che le immagini che vengono opacizzate non possano essere linkate. Non credo che bastino i CSS per fare questo e non so immaginare quale funzione sia necessaria.
Aspetto quindi l'aiuto di chi ne sa più di me, grazie in anticipo.
Per chiarezza posto l'HTML dove per semplicità ho inserito solo una immagine mappata. Se servissero i CSS posso postarli.
codice:
<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" type="text/css" href="slick/slick.css">
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css">
  <link rel="stylesheet" type="text/css" href="slick/slickLoc.css">
   
</head>

<body>
    <section class="center slider">
    <div><img src="Immagini/01.jpg" usemap="#MiaMappa" border="0">
        <map name="MiaMappa" id="MiaMappa">
            <area href="https://www.sistemax.it" shape="rect" coords="0, 0, 30px, 30px">
        </map>
    </div>

<!--    
        <div><img src="Immagini/01.jpg"></div>
-->        
        <div><img src="Immagini/02.jpg"></div>
        <div><img src="Immagini/03.jpg"></div>
        <div><img src="Immagini/04.jpg"></div>
        <div><img src="Immagini/05.jpg"></div>
        <div><img src="Immagini/06.jpg"></div>
        <div><img src="Immagini/07.jpg"></div>
        <div><img src="Immagini/08.jpg"></div>
    </section>

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).on('ready', function() {
            $(".center").slick({
            dots: true,
            infinite: true,
            centerMode: true,
            slidesToShow: 7,
            slidesToScroll: 3
            });
        });
    </script>

</body>
</html>