Jickery 포커스가 매끄러운 슬라이더와 작동하지 않습니다.

Question

각 이미지에 캡션이있는 매끄러운 슬라이더가 있습니다. 현재 (탭을 사용하여) 캡션을 약간 변경하려고하는데 캡춰가 약간 변경되었습니다. 캡션 요소,하지만 난 캡처 할 수 없습니다 그것을

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

문제는 jquery url을 (를) 사용했기 때문입니다. https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js을 사용하고 잘 작동합니다.

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