I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) swiper 슬라이드 display none에서 block 됐을 때 깨짐 방지하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 7. 18. 12:29

반응형

[즐거'웅'코드] 목차

  1. 리소스
  2. JAVASCRIPT
  3. 예제 소스
  4. 구현 예시
리소스
리소스.zip
43.6 kB
JAVASCRIPT
1
2
3
4
 
<script>
    observer: true,
    observeParents: true,
</script>
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"/>
<script type="text/javascript" src="js/swiper-bundle.min.js"></script>
 
<style>
    #test_obj {
        width: 500px;
        height: 250px;
        background-color: #eeeeee;
        display: none;
    }
</style>
 
<button onclick="test()">swiper 슬라이드 보이기</button>
 
<div id="test_obj">
    <div class="swiper-container mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
</div>
 
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        loop: true,
        centeredSlides: true,
        observer: true,
        observeParents: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
 
    function test() {
        document.getElementById("test_obj").style.display = "block";
    }
</script>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) 자바스크립트 변수 중 가장 값이 큰 변수의 이름(변수명) 가져오기  (0) 2021.07.20
(즐거웅코드) 자바스크립트 파라미터 값 가져오기  (0) 2021.07.19
(즐거웅코드) swiper 슬라이드 특정 슬라이드로 이동시키기  (0) 2021.07.17
(즐거웅코드) swiper 슬라이드 다음 슬라이드로 이동시키기  (0) 2021.07.16
(즐거웅코드) swiper 슬라이드 이전 슬라이드로 이동시키기  (0) 2021.07.15

관련글

댓글 0

티스토리툴바