슬라이드에 링크 추가

debugcn 에 게시 Dev

니나 투 캣츠

Codepen에서이 캐 러셀을 사용했습니다.

https://codepen.io/dangvanthanh/pen/AgHnB

각 슬라이드에 링크를 추가했지만 그렇게하면 모든 슬라이드가 마지막 슬라이드의 링크로 연결됩니다. onclick = "window.location = 'https : //codepen.io'"이벤트 추가를 시도했지만 성공하지 못했습니다 .. 도와주세요.

Fyi, Im은 프론트 엔드 개발자가 아닌 디자이너이고, Im은 웹 사이트 용 캐 러셀을 구성하려고합니다 ..

/**
 * Carousel.sass
 * @author: Dang Van Thanh
 * @github: https://github.com/dangvanthanh/carousel.sass
 * @description: A Simple Carousel Pure CSS Using Sass
 * @version: 1.0.0
 */
.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(5), .carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(5), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__prev > label:nth-child(4), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__next > label:nth-child(1) {
  opacity: 1 !important;
  z-index: 3;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  background: #fcfcfc;
  margin: 0;
}

.container {
  width: 900px;
  min-width: 900px;
  margin: 50px auto;
}

.carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.carousel > input[type="radio"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
}
.carousel > input[type="radio"]:checked ~ .carousel__items .carousel__item,
.carousel > input[type="radio"]:checked ~ .carousel__prev > label,
.carousel > input[type="radio"]:checked ~ .carousel__next > label {
  opacity: 0;
}
.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__items .carousel__item:nth-child(1) {
  opacity: 1;
}
.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__nav > label:nth-child(1) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__items .carousel__item:nth-child(2) {
  opacity: 1;
}
.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__nav > label:nth-child(2) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__items .carousel__item:nth-child(3) {
  opacity: 1;
}
.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__nav > label:nth-child(3) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__items .carousel__item:nth-child(4) {
  opacity: 1;
}
.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__nav > label:nth-child(4) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__items .carousel__item:nth-child(5) {
  opacity: 1;
}
.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__nav > label:nth-child(5) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel__items {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  height: 600px;
  position: relative;
}
.carousel__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: opacity 2s;
  -webkit-transition: opacity 2s;
}
.carousel__item img {
  width: 100%;
  vertical-align: middle;
}
.carousel__prev > label, .carousel__next > label {
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  opacity: 0;
  z-index: 2;
}
.carousel__prev > label:hover, .carousel__prev > label:focus, .carousel__next > label:hover, .carousel__next > label:focus {
  opacity: .5 !important;
}
.carousel__prev > label:before, .carousel__prev > label:after, .carousel__next > label:before, .carousel__next > label:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
}
.carousel__prev > label:before, .carousel__next > label:before {
  background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%), linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);
  width: 60%;
  height: 60%;
  top: 20%;
}
.carousel__prev > label {
  left: 2%;
}
.carousel__prev > label:before {
  left: 35%;
  top: 20%;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.carousel__next > label {
  right: 2%;
}
.carousel__next > label:before {
  left: 10%;
  transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
}
.carousel__nav {
  position: absolute;
  bottom: 3%;
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 3;
}
.carousel__nav > label {
  border: 1px solid #fff;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 .125%;
  width: 20px;
  height: 20px;
}

<div class="container">
<div class="carousel">
    <input type="radio" id="carousel-1" name="carousel[]" checked   onclick="window.location.href='http://google.com'">
    <input type="radio" id="carousel-2" name="carousel[]">
 <input type="radio" id="carousel-3" name="carousel[]">
    <input type="radio" id="carousel-4" name="carousel[]">
    <input type="radio" id="carousel-5" name="carousel[]">
    <ul class="carousel__items">
    
     <li class="carousel__item" onclick="window.location='http://google.com'"> 
        <a href"http://google.com">
    <img src="//lh5.googleusercontent.com/-cTEgPOnd3l8/U8-EmaZ4KNI/AAAAAAAABc8/6eacbALkQ6A/w1358-h905-no/carousel-1.JPG" alt="" style="border: 3px solid red">
   </a>  
  </li>
  
        <li class="carousel__item">
    <a href"http://instagram.com">
    <img src="//lh4.googleusercontent.com/-ntVHbbWX5eo/U8-EmV8P4cI/AAAAAAAABc4/ICYBGkcztTc/w1358-h905-no/carousel-2.jpg" alt="">
    </a>
    </li>
        <li class="carousel__item">
    <a href"http://facebook.com">
    <img src="//lh5.googleusercontent.com/-batEXUZE_e4/U8-EmLF9-hI/AAAAAAAABc0/J3tJVUa6Buk/w1358-h905-no/carousel-3.jpg" alt="">
    </a>
    </li>
        <li class="carousel__item">
    <a href"http://tiktok.com">
    <img src="//lh5.googleusercontent.com/-gywqIeMvel0/U8-EolKdtkI/AAAAAAAABdM/G0-NHuvvJUU/w1358-h905-no/carousel-4.jpg" alt="">
    </a>
    </li>
        <li class="carousel__item">
    <a href"http://pinterest.com">
    <img src="//lh5.googleusercontent.com/--2iANjL3ikc/U8-EoGJ18mI/AAAAAAAABdI/fBe-q3Gos6Y/w1358-h905-no/carousel-5.jpg" alt="">
    </a>
    </li>
    </ul>
 <div class="carousel__prev">
    <label for="carousel-1"></label>
    <label for="carousel-2"></label>
    <label for="carousel-3"></label>
    <label for="carousel-4"></label>
    <label for="carousel-5"></label>
 </div>
 <div class="carousel__next">
   <label for="carousel-1"></label>
   <label for="carousel-2"></label>
   <label for="carousel-3"></label>
   <label for="carousel-4"></label>
   <label for="carousel-5"></label>
 </div>
 <div class="carousel__nav">
   <label for="carousel-1"></label>
   <label for="carousel-2"></label>
   <label for="carousel-3"></label>
   <label for="carousel-4"></label>
   <label for="carousel-5"></label>
 </div>
   </div>
 </div>

HMZ

끝났습니다 : Codepen

이 동작은 전환이 슬라이드 불투명도를 사용했기 때문에 마지막 링크가 항상 맨 앞에 있기 때문입니다.

/**
 * Carousel.sass
 * @author: Dang Van Thanh
 * @github: https://github.com/dangvanthanh/carousel.sass
 * @description: A Simple Carousel Pure CSS Using Sass
 * @version: 1.0.0
 */
.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__prev > label:nth-child(5), .carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__next > label:nth-child(2), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__prev > label:nth-child(1), .carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__next > label:nth-child(3), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__prev > label:nth-child(2), .carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__next > label:nth-child(4), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__prev > label:nth-child(3), .carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__next > label:nth-child(5), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__prev > label:nth-child(4), .carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__next > label:nth-child(1) {
  opacity: 1 !important;
  z-index: 3;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  background: #fcfcfc;
  margin: 0;
}

.container {
  width: 900px;
  min-width: 900px;
  margin: 50px auto;
}

.carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.carousel > input[type="radio"] {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
}
.carousel > input[type="radio"]:checked ~ .carousel__items .carousel__item,
.carousel > input[type="radio"]:checked ~ .carousel__prev > label,
.carousel > input[type="radio"]:checked ~ .carousel__next > label {
  opacity: 0;
  z-index: -1;
}
.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__items .carousel__item:nth-child(1) {
  opacity: 1;
  z-index: 1;
}
.carousel > input[type="radio"]:nth-child(1):checked ~ .carousel__nav > label:nth-child(1) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__items .carousel__item:nth-child(2) {
  opacity: 1;
  z-index: 1;
}
.carousel > input[type="radio"]:nth-child(2):checked ~ .carousel__nav > label:nth-child(2) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__items .carousel__item:nth-child(3) {
  opacity: 1;
  z-index: 1;
}
.carousel > input[type="radio"]:nth-child(3):checked ~ .carousel__nav > label:nth-child(3) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__items .carousel__item:nth-child(4) {
  opacity: 1;
  z-index: 1;
}
.carousel > input[type="radio"]:nth-child(4):checked ~ .carousel__nav > label:nth-child(4) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__items .carousel__item:nth-child(5) {
  opacity: 1;
  z-index: 1;
}
.carousel > input[type="radio"]:nth-child(5):checked ~ .carousel__nav > label:nth-child(5) {
  background: #ccc;
  cursor: default;
  pointer-events: none;
}
.carousel__items {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  height: 600px;
  position: relative;
}
.carousel__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: opacity 2s;
  -webkit-transition: opacity 2s;
}
.carousel__item img {
  width: 100%;
  vertical-align: middle;
}
.carousel__prev > label, .carousel__next > label {
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  opacity: 0;
  z-index: 2;
}
.carousel__prev > label:hover, .carousel__prev > label:focus, .carousel__next > label:hover, .carousel__next > label:focus {
  opacity: .5 !important;
}
.carousel__prev > label:before, .carousel__prev > label:after, .carousel__next > label:before, .carousel__next > label:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
}
.carousel__prev > label:before, .carousel__next > label:before {
  background: linear-gradient(to top, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%), linear-gradient(to left, #fff 0%, #fff 10%, rgba(51, 51, 51, 0) 10%);
  width: 60%;
  height: 60%;
  top: 20%;
}
.carousel__prev > label {
  left: 2%;
}
.carousel__prev > label:before {
  left: 35%;
  top: 20%;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.carousel__next > label {
  right: 2%;
}
.carousel__next > label:before {
  left: 10%;
  transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
}
.carousel__nav {
  position: absolute;
  bottom: 3%;
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 3;
}
.carousel__nav > label {
  border: 1px solid #fff;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 .125%;
  width: 20px;
  height: 20px;
}

<div class="container">
    <div class="carousel">
        <input type="radio" id="carousel-1" name="carousel[]" checked>
        <input type="radio" id="carousel-2" name="carousel[]">
     <input type="radio" id="carousel-3" name="carousel[]">
        <input type="radio" id="carousel-4" name="carousel[]">
        <input type="radio" id="carousel-5" name="carousel[]">
        <ul class="carousel__items">
      <li class="carousel__item"><a href="https://www.google.com"><img src="//lh5.googleusercontent.com/-cTEgPOnd3l8/U8-EmaZ4KNI/AAAAAAAABc8/6eacbALkQ6A/w1358-h905-no/carousel-1.JPG" alt=""></a></li>
      <li class="carousel__item"><a href="https://www.facebook.com"><img src="//lh4.googleusercontent.com/-ntVHbbWX5eo/U8-EmV8P4cI/AAAAAAAABc4/ICYBGkcztTc/w1358-h905-no/carousel-2.jpg" alt=""></a></li>
      <li class="carousel__item"><a href="https://www.yahoo.com">
        <img src="//lh5.googleusercontent.com/-batEXUZE_e4/U8-EmLF9-hI/AAAAAAAABc0/J3tJVUa6Buk/w1358-h905-no/carousel-3.jpg" alt="">
      </a></li>
      <li class="carousel__item"><a href="https://www.stackoverflow.com"><img src="//lh5.googleusercontent.com/-gywqIeMvel0/U8-EolKdtkI/AAAAAAAABdM/G0-NHuvvJUU/w1358-h905-no/carousel-4.jpg" alt=""></a></li>
      <li class="carousel__item"><a href="https://www.github.com"><img src="//lh5.googleusercontent.com/--2iANjL3ikc/U8-EoGJ18mI/AAAAAAAABdI/fBe-q3Gos6Y/w1358-h905-no/carousel-5.jpg" alt=""></a></li>
        </ul>
     <div class="carousel__prev">
        <label for="carousel-1"></label>
        <label for="carousel-2"></label>
        <label for="carousel-3"></label>
        <label for="carousel-4"></label>
        <label for="carousel-5"></label>
     </div>
     <div class="carousel__next">
       <label for="carousel-1"></label>
       <label for="carousel-2"></label>
       <label for="carousel-3"></label>
       <label for="carousel-4"></label>
       <label for="carousel-5"></label>
     </div>
     <div class="carousel__nav">
       <label for="carousel-1"></label>
       <label for="carousel-2"></label>
       <label for="carousel-3"></label>
       <label for="carousel-4"></label>
       <label for="carousel-5"></label>
     </div>
   </div>
 </div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

슬라이드에 링크 추가

슬라이드에 링크 추가

슬라이더 배너에 링크 추가

배경 이미지 슬라이더에 클릭 가능한 링크 추가

페이지 섹션에 대한 링크가있는 메뉴 슬라이드

가로 스크롤 시스템에 슬라이드 애니메이션 추가

<td>에 링크 추가

jquery 추가에 링크 추가

Laravel은 링크에 추가 슬래시를 추가합니다.

toctree에 다운로드 링크 추가

UIlabel에 하이퍼 링크 추가

Greasemonkey : 테이블에 링크 추가

PHP -ZendFramework에 하이퍼 링크 추가

링크가있는 URL에 추가

섹션에 슬라이드 추가

자바 스크립트를 사용하여 슬라이드 슬라이더에 타이머를 어떻게 추가합니까?

이 스크립트에 자동 슬라이드를 추가하고 싶습니다.

링크가없는 경우 링크에 http : // 추가

"온 링크"라우팅 항목 추가

사용자가 클릭하는 링크에 따라 페이지에 다른 슬라이드를로드하려면 어떻게해야합니까?

Cakephp : 에코에 링크 추가

대상 링크 라이브러리에 추가

목록보기에서 링크 추가

Javascript의 .textcontent에 대한 링크 추가

링크 끝에 Javascript 변수 추가

비디오에 장 링크 추가

jQuery 링크에 도메인 추가

Onclick Toggle with Jquery 후 img에 링크 추가

외부 링크에 target = _blank 추가

PHP로 Wordpress 메뉴에 링크 추가

ajax에서 django 링크로 html 추가