Jquery Fokus funktioniert nicht mit Slick Slider

Question

Ich habe eine glatte Slider mit Bildunterschrift für jedes Bild, ich möchte derzeit Fokus (mit Tab) Überschrift, um einige Änderungen daran zu machen, aber ich kann sehen, der Fokus arbeitet an der Bildunterschrift Elemente, aber ich kann es nicht erfassen

HTML

<div class="customer-logos"> 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image1.png"> 
    <a>Test</a> 
    </div> 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image2.png"> 
    <a>Test</a> 
    </div> 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image3.png"> 
    <a>Test</a> 
    </div> 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image4.png"> 
    <a>Test</a> 
    </div> 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image5.png"> 
    <a>Test</a> 
    </div> 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image6.png"> 
    <a>Test</a> 
    </div> 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image7.png"> 
    <a>Test</a> 
    </div> 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image8.png"><a>Test</a></div> 
</div> 

JS:

$(document).ready(function(){ 
      $('.customer-logos').slick({ 
       slidesToShow: 4, 
       slidesToScroll: 1, 
       autoplay: true, 
       autoplaySpeed: 10000, 
       arrows: false, 
       dots: false, 
        pauseOnHover: false, 
        responsive: [{ 
        breakpoint: 768, 
        settings: { 
         slidesToShow: 3 
        } 
       }, { 
        breakpoint: 520, 
        settings: { 
         slidesToShow: 2 
        } 
       }] 
      }); 
     }); 

    $("a").on('focus',function(e) { 
    console.log($(this)) 
        $(this).addClass('focused'); 
    }); 
    $("a").on('blur',function(e) { 

       $(this).removeClass('focused');  
    });   

Fiddle example

Answer 1

Das Problem ist, weil jquery url Sie verwendet haben. Ich habe https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js verwendet und funktioniert gut.

$(document).ready(function(){ 
 
    $('.customer-logos').slick({ 
 
\t \t slidesToShow: 4, 
 
\t \t slidesToScroll: 1, 
 
\t \t autoplay: true, 
 
\t \t autoplaySpeed: 3000, 
 
\t \t arrows: false, 
 
\t \t dots: false, 
 
\t \t \t pauseOnHover: false, 
 
\t \t \t responsive: [{ 
 
\t \t \t breakpoint: 768, 
 
\t \t \t settings: { 
 
\t \t \t \t slidesToShow: 3 
 
\t \t \t } 
 
\t \t }, { 
 
\t \t \t breakpoint: 520, 
 
\t \t \t settings: { 
 
\t \t \t \t slidesToShow: 2 
 
\t \t \t } 
 
\t \t }] 
 
    }); 
 
}); 
 
$("a").on('focus',function(e) { 
 
    alert("a focus"); 
 
    $(this).addClass('focused'); 
 
}); 
 
$("a").on('blur',function(e) { 
 
\t \t $(this).removeClass('focused'); \t \t 
 
}); 
 

 

/* Slider */ 
 
.slick-slide { 
 
    margin: 0px 20px; 
 
} 
 

 
.slick-slide img { 
 
    width: 100%; 
 
} 
 

 
.slick-slider 
 
{ 
 
    position: relative; 
 

 
    display: block; 
 
    box-sizing: border-box; 
 

 
    -webkit-user-select: none; 
 
     -moz-user-select: none; 
 
     -ms-user-select: none; 
 
      user-select: none; 
 

 
    -webkit-touch-callout: none; 
 
    -khtml-user-select: none; 
 
    -ms-touch-action: pan-y; 
 
     touch-action: pan-y; 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 

 
.slick-list 
 
{ 
 
    position: relative; 
 

 
    display: block; 
 
    overflow: hidden; 
 

 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slick-list:focus 
 
{ 
 
    outline: none; 
 
} 
 
.slick-list.dragging 
 
{ 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 

 
.slick-slider .slick-track, 
 
.slick-slider .slick-list 
 
{ 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
     -moz-transform: translate3d(0, 0, 0); 
 
     -ms-transform: translate3d(0, 0, 0); 
 
     -o-transform: translate3d(0, 0, 0); 
 
      transform: translate3d(0, 0, 0); 
 
} 
 

 
.slick-track 
 
{ 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 

 
    display: block; 
 
} 
 
.slick-track:before, 
 
.slick-track:after 
 
{ 
 
    display: table; 
 

 
    content: ''; 
 
} 
 
.slick-track:after 
 
{ 
 
    clear: both; 
 
} 
 
.slick-loading .slick-track 
 
{ 
 
    visibility: hidden; 
 
} 
 

 
.slick-slide 
 
{ 
 
    display: none; 
 
    float: left; 
 

 
    height: 100%; 
 
    min-height: 1px; 
 
} 
 
[dir='rtl'] .slick-slide 
 
{ 
 
    float: right; 
 
} 
 
.slick-slide img 
 
{ 
 
    display: block; 
 
} 
 
.slick-slide.slick-loading img 
 
{ 
 
    display: none; 
 
} 
 
.slick-slide.dragging img 
 
{ 
 
    pointer-events: none; 
 
} 
 
.slick-initialized .slick-slide 
 
{ 
 
    display: block; 
 
} 
 
.slick-loading .slick-slide 
 
{ 
 
    visibility: hidden; 
 
} 
 
.slick-vertical .slick-slide 
 
{ 
 
    display: block; 
 

 
    height: auto; 
 

 
    border: 1px solid transparent; 
 
} 
 
.slick-arrow.slick-hidden { 
 
    display: none; 
 
} 
 
*.focused { 
 
\t outline-width: 2px ; 
 
\t outline-color: #282828; 
 
\t outline-style: dotted; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script> 
 
<div class="customer-logos"> 
 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image1.png"> 
 
    <a>Test</a> 
 
    </div> 
 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image2.png"> 
 
    <a >Test</a> 
 
    </div> 
 
    <div class="slide"><img src="https://www.solodev.com/assets/carousel/image3.png"> 
 
    <a >Test</a> 
 
    </div> 
 
</div> \t \t