반응형 페이지 제작 1-4

결과

HTML

</section><!-- 2022-12-06 -->
			<section id="banner" class="banner-area">
				<h2 class="ir_so">배너영역</h2>
				<div class="container">
					<div class="bLeftBtn"><img src="./images/left.png" alt="leftBtn"></div>
					<div class="bRightBtn"><img src="./images/right.png" alt="rightBtn"></div>
					<div class="bannerArea">
						<ul class="area">
							<li><a href="#"><img src="./images/templt_info_img01.jpg" alt="info01"></a></li>
							<li><a href="#"><img src="./images/templt_info_img02.jpg" alt="info02"></a></li>
							<li><a href="#"><img src="./images/templt_info_img03.jpg" alt="info03"></a></li>
							<li><a href="#"><img src="./images/templt_info_img04.jpg" alt="info04"></a></li>
							<li><a href="#"><img src="./images/templt_info_img05.jpg" alt="info05"></a></li>
							<li><a href="#"><img src="./images/templt_info_img06.jpg" alt="info06"></a></li>
							<li><a href="#"><img src="./images/templt_info_img07.jpg" alt="info07"></a></li>
							<li><a href="#"><img src="./images/templt_info_img08.jpg" alt="info08"></a></li>
							<li><a href="#"><img src="./images/templt_info_img09.jpg" alt="info09"></a></li>
							<li><a href="#"><img src="./images/templt_info_img10.jpg" alt="info10"></a></li>
						</ul>
					</div>
				</div>
			</section>
			<section id="swiperSlide">
				<h2 class="ir_so">모바일 슬라이드</h2>
				<div class="container">
					<div class="swiper mySwiper">
						<div class="swiper-wrapper">
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img01.jpg" alt="info01"></a></div>
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img02.jpg" alt="info02"></a></div>
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img03.jpg" alt="info03"></a></div>
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img04.jpg" alt="info04"></a></div>
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img05.jpg" alt="info05"></a></div>
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img06.jpg" alt="info06"></a></div>
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img07.jpg" alt="info07"></a></div>
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img08.jpg" alt="info08"></a></div>
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img09.jpg" alt="info09"></a></div>
						  <div class="swiper-slide"><a href="javascript:;"><img src="./images/templt_info_img10.jpg" alt="info10"></a></div>
						</div>
						<div class="swiper-pagination"></div>
						<div class="swiper-button-prev"></div>
						<div class="swiper-button-next"></div>
						<div class="swiper-scrollbar"></div>
					  </div>
				</div>
			</section>

모바일 슬라이드 섹션부분은 'swiper'에서 가져왔다. 반응형페이지 이므로 모바일 사이즈로 줄어들면 보이는 슬라이드 영역이다. 기존의 슬라이드는 diplay: none; 이 된다.

CSS

/* #banner */
.banner-area > div{position: relative;}
.banner-area .bLeftBtn{position: absolute; top: 50%; left: -80px; transform: translateY(-50%);}
.banner-area .bRightBtn{position: absolute; top: 50%; right: -80px; transform: translateY(-50%);}
.banner-area .bannerArea{width: 1160px; overflow: hidden;}
.banner-area .bannerArea ul{width: 2350px; position: relative; left: 0;}
.banner-area .bannerArea ul li{width: 220px; margin-right: 15px; float: left;}
.banner-area .bannerArea ul li a{display: block;}
.banner-area .bannerArea ul li a img{width: 100%; vertical-align: bottom;}

/* swiper */
#swiperSlide{display: none;}
.swiper {width: 100%; height: 100%; padding: 20px 0;}
.swiper-slide {text-align: center; font-size: 18px; background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
.swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
.swiper-pagination-bullet-active{background: #f9c200;}

Script

const slideBanner=$('.bannerArea > .area');
const leftBtn=$('.bLeftBtn');
const rightBtn=$('.bRightBtn');
const slideList=$('.bannerArea > .area > li');
const slide=$('.bannerArea > .area')
const slideWidth=slideList.width();
let setIntervalId;

bannerslider();
function bannerslider(){
    
    setIntervalId=setInterval(function(){
        slideBanner.stop().animate({left:-(slideWidth+15)},500, function(){
            $('.bannerArea > .area > li:first').insertAfter('.bannerArea > .area > li:last')
            slideBanner.css({left:0})
        })
    },2000);
}
leftBtn.hover(function(){
    clearInterval(setIntervalId)
    },function(){
    bannerslider();
    });
rightBtn.hover(function(){
    clearInterval(setIntervalId)
    },function(){
    bannerslider();
    });
slideBanner.hover(function(){
    clearInterval(setIntervalId)
    },function(){
    bannerslider();
    }); 
    $('.bRightBtn').click(function(){
        slideBanner.stop().animate({left:-(slideWidth+15)},500, function(){
            $('.bannerArea > .area > li:first').insertAfter('.bannerArea > .area > li:last')
            slideBanner.css({left:0})
        });
    });
leftBtn.click(function(){
    $('.bannerArea > .area > li:last').insertBefore('.bannerArea > .area > li:first');
    slideBanner.css({left:-(slideWidth+15)}).stop().animate({left:0},500)
})

//swiper
var swiper = new Swiper(".mySwiper", {
    slidesPerView: 4,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    autoplay: {
        delay: 3000,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    breakpoints: {
      // when window width is >= 320px
      480: {
        slidesPerView: 3,
        spaceBetween: 20
      },
     
      // when window width is >= 640px
      720: {
        slidesPerView: 4,
        spaceBetween: 40
      }
    }
  }); 

Swiper API 적용

  1. swiperjs.com 에 들어가서 'Get started' 에서
    Use Swiper from CDN에 있는 Script를 복사 붙여넣기를 한다.(HTML이 있는곳에)

  1. API 를 클릭한다. HTML란에 div class="swiper-slide">Slide 1를 복사하여 HTML에 붙여넣는다.

  1. Demos에 들어가서 마음에 드는 슬라이드를 고른 후 'open in new window'를 눌러준다.

  1. 페이지 소스보기를 한다.

  1. 그대로 적용하여 슬라이드를 설정한다.

JavaScipt

슬라이드(slide) 만들기

결과

HTML

    <div class="container">
        <ul class="list" id="slider">
            <li class="slide">
                <blockquote>
                    전 젊은이들이 결혼을 주제로 얘기하는 것에 거의 신경쓰지 않아요. 결혼에 대해서 안좋게 얘기하면 전 그냥 그 사람들이 아직 제 짝을 못찾아서 그런다고 생각해요.
                </blockquote>
                <cite>-Jane Austen</cite>
            </li>
            <li class="slide">
                <blockquote>
                    국가가 존재하는 동안에는 자유가 있을 수 없다. 자유가 있으면 국가는 없을 것이다.
                </blockquote>
                <cite>-레닌 러시아의 혁명가</cite>
            </li>
            <li class="slide">
                <blockquote>
                    사랑에 대한 여자의 열정은 전기 작가의 열정을 훨씬 뛰어넘는다.
                </blockquote>
                <cite>-Jane Austen</cite>
            </li>
            <li class="slide">
                <blockquote>
                    사랑을 두려워하는 것은 삶을 두려워하는 것과 같으며, 삶을 두려워 하는 사람은 이미 세 부분이 죽은 상태다.
                </blockquote>
                <cite>-버트런드 러셀</cite>
            </li>
            <li class="slide">
                <blockquote>
                    난 항상 아버지의 조언을 따랐다. 첫째, 언행을 일치시켜라. 둘째, 무심코 상대방을 모욕하지 말라. 그러므로 내가 누군가를 모욕할 때, 그것은 분명 의도적인 것이다. 셋째, 괜히 시비거리를 찾아다니지 말라.
                </blockquote>
                <cite>-John Wayne</cite>
            </li>
            <li class="slide">
                <blockquote>
                    내 어머니는 성취와 성공의 차이를 분명히 하셨다. 어머니는 말씀하셨다. '성취란 네가 열심히 공부하고 일했으며 네가 가진 최선을 다했다는 인식이다. 성공은 남들에게 추앙받는 것이며, 이것이 멋진 일이긴 하나 그렇게 중요하거나 만족을 주는 것은 아니다. 항상 성취를 목적으로 삼고 성공에 대해선 잊어라.
                </blockquote>
                <cite>-Helen Hayes</cite>
            </li>
        </ul>
        <p class="pager">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </p>
        <a href="#" id="prev"></a>
        <a href="#" id="next"></a>
    </div>

CSS

body{margin-top: 5em; font-size: 20px; background: #ededed;}
.container{width: 100%; padding-bottom: 80px; /* background: rgba(0, 0, 0, .3); */ position: relative; overflow: hidden;}
.list{position: absolute; width: 100%; left: 0;}
.list .slide{position: absolute; width: 100%; padding: 0 10%; box-sizing: border-box; top: 50%; transform: translateY(-50%); text-align: center; overflow: hidden;}
.list.animated{transition: left .3s ease-in;}
blockquote{color: #636363; font-weight: 300; font-style: italic; margin-bottom: 1.5em;}
cite{font-size: .75em; font-weight: bold; font-style: normal;}
.pager{position: absolute; right: 0; left: 0; bottom: 0; text-align: center; margin: 0; padding: 0;}
.pager span{width: 10px; height: 10px; background: rgba(78, 15, 251, .5); border-radius: 50%; display: inline-block; margin: 0 5px; text-indent: -9999em;}
.pager span.active{background: rgba(78, 15, 251, 1);}
#prev,#next{position: absolute; top: 50%; left: 50%; transform: translateY(-50%); z-index: 9999; height: 5em; width: 5em; border-radius: 50%; background-position: center center; background-repeat: no-repeat; transition: .3s ease-in;}
#prev{background-image: url(../img/arrow-left-out.svg); margin-left: -500px;}
#prev:hover{background-image: url(../img/arrow-left-over.svg);}
#next{background-image: url(../img/arrow-right-out.svg); margin-left: 400px;}
#next:hover{background-image: url(../img/arrow-right-over.svg);}

#prev.disabled, #next.disabled{display: none;}

CSS

document.addEventListener('DOMContentLoaded', function(){
    const slideWrap=document.querySelector('.container');
    const slideContainer=document.querySelector('.list');
    const slide=document.querySelectorAll('.slide');
    const slidePrev=document.getElementById('prev');
    const slideNext=document.getElementById('next');
    const pager=document.querySelector('.pager');
    const pagerBtn=document.querySelectorAll('.pager span');
    let slideHeight=0;
    let currentIndex=0;
    let slideCount=slide.length;
    let timer=undefined;
let topheight=slide[0].offsetHeight;
//console.log(topheight); //슬라이드 높이 알아보기 위해서 사용 : 104

for(let i=0; i<slideCount; i++){
    if(slideHeight< slide[i].offsetHeight){
        slideHeight=slide[i].offsetHeight;
    }
}
//console.log(slideHeight);
//가장 큰 높이값
slideWrap.style.height=slideHeight+'px';
slideContainer.style.height=slideHeight+'px';

//가로배열
for(let j=0; j<slideCount; j++){
    slide[j].style.left=j*100+'%';//float:left 효과
}
//슬라이드 함수
function goToSlide(idx){
    slideContainer.classList.add('animated')
    slideContainer.style.left=-100*idx+'%';
    currentIndex=idx
    for(let k=0; k<pagerBtn.length; k++){
        pagerBtn[k].classList.remove('active');
    }
    pagerBtn[idx].classList.add('active')
}
goToSlide(0);
//버튼 클릭하면 이동
slideNext.addEventListener('click',function(){
    //goToSlide(currentIndex+1);
    if(currentIndex==slideCount-1){
        //slideNext.classList.add('disabled')
        goToSlide(0)
    }else{
        slideNext.classList.remove('disabled')
        goToSlide(currentIndex+1);
    }
});
slidePrev.addEventListener('click', function(){
    if(currentIndex==0){
        goToSlide(slideCount-1)
    }else{
        goToSlide(currentIndex-1);
    }
})
//자동슬라이드
autoSlide();
function autoSlide(){
    timer=setInterval(function(){
       let nextIdx=(currentIndex +1) % slideCount 
       goToSlide(nextIdx);
    },3000);
}
//멈춤기능
function stopAutoSlide(){
    clearInterval(timer)
}
slideWrap.addEventListener('mouseenter',function(){
    stopAutoSlide();
})
slideWrap.addEventListener('mouseleave',function(){
    autoSlide();
})
//pager으로 슬라이드
for(let i=0; i<pagerBtn.length; i++){
    pagerBtn[i].addEventListener('click',function(e){
        //console.log(e.target);
        let pagerNum=e.target.innerText-1;
        //console.log(pagerNum);
        goToSlide(pagerNum);
    })
}

});

0개의 댓글