[slick] 클릭한 이미지의 오른쪽 부분을 간단하게 제작한 후 슬라이드를 다음 이미지, 왼쪽 뒤에 있는 앞 이미지로 상영합니다

개막사

이번에는 캘켈 라이브러리 슬릭을 사용해 실시했기 때문에 1부터 실시하려는 사람에게는 적합하지 않은 보도다.
slick: 슬라이더에서 실현하고자 하는 대부분의 기능을 갖추고 있으며 그것을 직관적으로 설정할 수 있는 우수한 프로그램 라이브러리입니다.
공식적으로는 다음과 같다: http://kenwheeler.github.io/slick/
도입 단계는 이번에 쓰지 않지만, 이 부근의 보도는 참고할 수 있다.
http://uzurea.net/explanation-of-jquery-slider-slick/
그럼 본론입니다.
기본적으로 slick의 슬라이더는 좌우 화살표를 누르고 드래그해서 그림을 전환할 수 있습니다.이것은 당연히 우수한 기능이다
"좌우 화살표의 클릭 판정을 그림 자체의 오른쪽, 왼쪽, 왼쪽에 분배하고, 그것들을 클릭한 후 미끄러집니다."
이런 기능은 좀 가공해야 한다.

이런 느낌.

클릭하여 설치 판단

화살표 요소 자체의 영역을 넓히면 아무것도 쓰지 않아도 클릭 판정이 가능하다.
검증 도구로 화살표 요소의 코드를 보니 이렇다.

css로 이 button 요소의 영역을 조정하고 before 요소의 화살표로 표시된 위치를 좋은 느낌으로 하면 됩니다.
이미지의 오른쪽 및 왼쪽 부분에 영역을 설정하면 부모 요소 너비의 50%로 지정할 수 있습니다.
slick-theme.css

.slick-prev {
  height: 100%;
  width: 50%;
  left: 0;  /*幅を画像の50%にして左寄せ*/
}
.slick-prev:before {
    position: absolute;
    left: 8px; /*何もしないと要素の中央になってしまうので位置調整*/
    content: '◀︎';
}
.slick-next {
  height: 100%;
  width: 50%;
  right: 0;  /*幅を画像の50%にして右寄せ*/
}
.slick-next:before {
    position: absolute;
    right: 8px; /*何もしないと要素の中央になってしまうので位置調整*/
    content: '▶︎';
}

이렇게 해서 그림의 오른쪽 부분을 클릭하면 다음 그림에서 왼쪽 부분을 누르면 이전 그림으로 이동합니다.

저 그거 할 줄 알아요!사용자에게 전달

기본 기능의 설치 자체가 금방 완성되었지만 여기서 의외로 걸려들었다.
상술한 실시 기능을 사용자에게 전달하기 위해
"마우스가 각각 그림의 반 위에 있을 때 화살표 아이콘이 더욱 눈에 띈다."
실현
보통 이 동작을 하려면 JS 클릭 판정 요소를 얻어 화살표 아이콘의 요소를 변경하는 css라는 간단한 방법으로 완성할 수 있다.
그러나 이번 상황에서 css에 변경을 더하면 before 요소, 즉 위조 요소다.
위조 요소는 비덤이기 때문에 보통은 JS로 조작해도 원활하지 않다.
위선적인 요소를 먼저 동적으로 바꾸는 방법이 있는 것 같은데, 이번 경우는 이 글입니다.
　 http://ithat.me/2015/11/30/jquery-css-pseudo-before-after-change　
둘째, 헤드 요소에 스타일 라벨을 억지로 추가하면 다른 방법으로 바꿀 수 있을 것 같지만 그렇지 않아도 방법이 있다.
동적으로 before 요소의 원요소인 button 요소 자체의opacity를 바꾸면 before 요소의 화살표도 외관을 바꿀 수 있다.
slick-option.js

$(function() {
  $('.slick-prev').on('mouseenter', function(){
    $(this).css('opacity', '1');
  });
  $('.slick-prev').on('mouseleave', function(){
    $(this).css('opacity', '.5');
  });
  $('.slick-next').on('mouseenter', function(){
    $(this).css('opacity', '1');
  });
  $('.slick-next').on('mouseleave', function(){
    $(this).css('opacity', '.5');
  });
})

이렇게 하면 마우스가 떠날 때 반투명 50%, 마우스가 탈 때 불투명한 변화가 된다.
그러나 이 방법은 이번처럼 원요소가 투명한 상황에서 css를 만지작거려도 영향을 주지 않을 때만 사용할 수 있기 때문에 대부분의 경우 위의 시뮬레이션 요소를 동태적으로 만지작거리는 방법을 사용해야 한다.

더 좋은 방법이 있으면 저에게 알려주세요.

나는 3개월의 엔지니어 경험을 가지고 있다.평론을 기다리다.