모니터 사이즈에 따라 유동적인 swipe 소스 있을까요?

모니터 사이즈에 따라 유동적인 swipe 소스 있을까요?

QA

모니터 사이즈에 따라 유동적인 swipe 소스 있을까요?

본문

http://new.namchon.org 사이트를 제작 중인데, 모니터에 따라 메인 이미지가 crop됩니다.

1280*1024에서 보면 메인 이미지가 가득차게 보이지만, 1920*1080에서 보면 메인 이미지 세로 길이는 동일하지만 가로가 화면에 가득차게 됩니다.

 

여기까지는 여기저기 찾아서 했는데, navigation과 pagination이 안됩니다.

참고할만한 소스가 있을까요?

swipe 소스는 많지만, 모니터에 따라 이미지가 자동으로 crop되는 소스는 찾기가 어렵네요...

 

감사합니다.

이 질문에 댓글 쓰기 :

답변 1

https://swiperjs.com/demos 를 사용한 것 같습니다. 

 

링크를 보고, 옵션을 조정해 보세요

잘 되네요! 감사합니다.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      .swiper-container {
        width: 100%;
        height: 550px;
        background-repeat:no-repeat;
        background-position:center;
      }

      .swiper-slide {
        width: 100%;
        height: 550px;
        background-repeat:no-repeat;
        background-position:center;
        display:block;
      }
    </style>
  </head>

  <body>
    <!-- Swiper -->
    <div class="swiper-container mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url('http://new.namchon.org/images/main_vis01.jpg');"></div>
        <div class="swiper-slide" style="background-image:url('http://new.namchon.org/images/main_vis02.jpg');"></div>
        <div class="swiper-slide" style="background-image:url('http://new.namchon.org/images/main_vis03.jpg');"></div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 3500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>

답변을 작성하시기 전에 로그인 해주세요.
전체 123,125 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT