티스토리 뷰
반응형
메가박스 사이트 만들기
동영상 보며 코딩하기 -메가박스 사이트 만들기
web's 동영상 바로가기
아홉번째 강의 : 영화 차트 이미지 슬라이드
//영화차트 이미지 슬라이드
var mySwiper = new Swiper('.swiper-container2', {
slidesPerView: 4,
spaceBetween: 24,
// mousewheel: {
// invert: true,
// },
keyboard: {
enabled: true,
onlyInViewport: false,
},
autoplay: {
delay: 5000,
},
});
.movie_chart {overflow: hidden; height: 592px;}
.movie_chart > div > div > div {float: left; width: 292px; height: 592px; margin-right: 18px;}
.movie_chart > div > div > div:last-child {margin-right: 0;}
.movie_chart > div > div > div .poster {position: relative;}
.movie_chart > div > div > div .poster img {display: block;}
.movie_chart > div > div > div .poster .rank {position: absolute; top: 17px; left: 0; width: 50px; height: 50px; font-size: 22px; box-shadow: 3px 3px 8px rgba(0,0,0,0.5); line-height: 50px; background-color: #38116a; text-align: center;}
.movie_chart > div > div > div .poster .rank strong {color: #fff; text-shadow: 2px 2px 3px rgba(0,0,0,0.1)}
.movie_chart > div > div > div .poster .mx {position: absolute; top: 17px; right: 17px;}
.movie_chart > div > div > div .poster .mx span {width: 103px; height: 25px; display: block;}
.movie_chart > div > div > div .poster .mx .m {background-position: 0 -75px;}
.movie_chart > div > div > div .poster .mx .b {background-position: 0 -100px; }
.movie_chart > div > div > div .infor {background: #fff; padding: 17px; border: 1px solid #d9d9d9;}
.movie_chart > div > div > div .infor h3 {color: #333; font-size: 30px; font-weight: 700; margin-bottom: 20px;}
.movie_chart > div > div > div .infor h3 strong {}
.movie_chart > div > div > div .infor h3 span {width: 29px; height: 29px; display: inline-block; margin-top: 9px; vertical-align: -2px;}
.movie_chart > div > div > div .infor h3 span.all {background-position: -87px -125px;}
.movie_chart > div > div > div .infor h3 span.a12 {background-position: -58px -125px;}
.movie_chart > div > div > div .infor h3 span.a15 {background-position: 0px -125px;}
.movie_chart > div > div > div .infor h3 span.a19 {background-position: -29px -125px;}
.movie_chart > div > div > div .infor .infor_btn {overflow: hidden;}
.movie_chart > div > div > div .infor .infor_btn a {float:left; width: 49%; margin-right: 2%; text-align: center; background: #f2f2f2; font-size: 18px; padding: 15px; box-sizing: border-box;}
.movie_chart > div > div > div .infor .infor_btn a:last-child {margin-right: 0;}
<section id="movie">
<div class="container">
<div class="row">
<div class="movie">
<h2 class="ir_so">최신 영화 정보</h2>
<div class="movie_title">
<ul>
<li class="active"><a href="#">박스오피스</a></li>
<li><a href="#">최신개봉작</a></li>
<li><a href="#">상영예정작</a></li>
<li><a href="#">큐레이션</a></li>
</ul>
</div>
<div class="movie_chart">
<div class="swiper-container2">
<div class="chart_cont1 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster02.jpg" srcset="assets/img/poster02@2.jpg 2x" alt="신세계">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세</span> <strong>신세계</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster03.jpg" srcset="assets/img/poster03@2.jpg 2x" alt="마스터">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세</span> <strong>마스터</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster04.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>5</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>6</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>7</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster04@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>8</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_cont1 -->
<div class="swiper-container2">
<div class="chart_cont2 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster05@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="신세계">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세</span> <strong>신세계</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="마스터">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세</span> <strong>마스터</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>5</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster02.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>6</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_cont2 -->
<div class="swiper-container2">
<div class="chart_cont3 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster06@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="신세계">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세</span> <strong>신세계</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="마스터">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세</span> <strong>마스터</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster04.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>5</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster05.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>6</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_cont3 -->
<div class="swiper-container2">
<div class="chart_cont4 swiper-wrapper">
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster07.jpg" srcset="assets/img/poster07@2.jpg 2x" alt="침묵">
</figure>
<div class="rank"><strong>1</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon all ir_pm">전체관람가</span> <strong>침묵</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster08.jpg" srcset="assets/img/poster08@2.jpg 2x" alt="신세계">
</figure>
<div class="rank"><strong>2</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a12 ir_pm">12세</span> <strong>신세계</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster09.jpg" srcset="assets/img/poster09@2.jpg 2x" alt="마스터">
</figure>
<div class="rank"><strong>3</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a15 ir_pm">15세</span> <strong>마스터</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster10.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>4</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>5</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="poster">
<figure>
<img src="assets/img/poster06.jpg" srcset="assets/img/poster10@2.jpg 2x" alt="마약왕">
</figure>
<div class="rank"><strong>6</strong></div>
<div class="mx">
<span class="icon m ir_pm">mx</span>
<span class="icon b ir_pm">Botique</span>
</div>
</div>
<div class="infor">
<h3><span class="icon a19 ir_pm">19세</span> <strong>마약왕</strong></h3>
<div class="infor_btn">
<a href="#">상세보기</a>
<a href="#">예매하기</a>
</div>
</div>
</div>
</div>
</div>
<!-- //chart_cont4 -->
</div>
</div>
</div>
</div>
</section>
<!-- //movie -->반응형
UP NEXT : 메가박스 사이트 코딩/메가박스 사이트 만들기 - 동영상 보며 코딩하기
댓글
© 2019 Eun's