<div style="width:600px; height:450px;">
    <div class="cycle-slideshow"
        data-cycle-fx=scrollHorz
        data-cycle-timeout=0
        data-cycle-prev="#prev"
        data-cycle-next="#next"
        >
        <img src="http://malsup.github.io/images/p1.jpg" width="300">
        <img src="http://malsup.github.io/images/p1.jpg" width="300">
        <img src="http://malsup.github.io/images/p1.jpg" width="300">
        <img src="http://malsup.github.io/images/p1.jpg" width="300">
        <img src="http://malsup.github.io/images/p1.jpg" width="300">
    </div>

    <div class="center" style="margin-top:5px;">
        <a href=# id="prev"><<<<></a> 
        <a href=# id="next">>>>></a>
    </div>

</div>

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script></head>

</head>
<body>
<style>
    html, body {
      position: relative;
      height: 100%;
	  width: 100%;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-container-v .swiper-wrapper .swiper-slide:nth-child(1) {
     height: 50%; background-color:pink;
    }
    .swiper-container-v .swiper-wrapper .swiper-slide:nth-child(2) {
     height: 100%; background-color:#ffffff;
    }
    .swiper-container-v .swiper-wrapper .swiper-slide:nth-child(3) {
     height: 100%; background-color:#eeeeee;
    }
	
	 .swiper-container-h .swiper-wrapper .swiper-slide:nth-child(1) {
     height: 100%;background-color:#eeeeee;
    }
    .swiper-container-h .swiper-wrapper .swiper-slide:nth-child(2) {
     height: 100%;background-color:#ffffff;
    }
    .swiper-container-h .swiper-wrapper .swiper-slide:nth-child(3) {
     height: 100%;background-color:#eeeeee;
    }
	
  </style>
</head>
<body>
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
  <div class="swiper-slide">V1</div>
  <div class="swiper-slide">
	<div class="swiper-container swiper-container-h">
		<div class="swiper-wrapper">
			<div class="swiper-slide">H1</div>
			<div class="swiper-slide">H2</div>
			<div class="swiper-slide">H3</div>
		</div>
		<div class="swiper-pagination swiper-pagination-h"></div>
	</div>	  
  </div>
  <div class="swiper-slide">V3</div>
</div>
</div>

  <script>
window.onload = function () {
    var swiperV = new Swiper('.swiper-container-v', {
	 direction: 'vertical',
      slidesPerView: 'auto',
      pagination: {
      //  el: '.swiper-pagination-v',
        //clickable: true,
      },
    });
    var swiperH = new Swiper('.swiper-container-h', {
      slidesPerView: 1,
      pagination: {
        el: '.swiper-pagination-h',
        //clickable: true,
      },
    });	
};
  </script>
</body>
</html>
<head>
<title>Full page scroll</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./full-page-scroll_0.1.css">
<script src="./full-page-scroll_0.1.js"></script>
<style type="text/css">
.section1 { height:300px; background-color: #7DBCD4;}
.section2 { height:500px; background-color: #98C19F;} 
.section3 { height:700px; background-color:  #A199E2;}
.section4 { height:400px; background-color:  #CC938E;}
.section5 { height:600px; background-color:  #D2C598;}
</style>	
</head>
<body>
	<div id="main" class="scroll-container">
		<section class="section1">
			<div>
				<span>Page #1</span>					
			</div>
		</section>
		<section class="section2">
			<div>
				<span>Page #2</span>				
			</div>
		</section>
		<section class="section3">
			<div>
				<span>Page #3</span>				
			</div>
		</section>
		<section class="section4">
			<div>
				<span>Page #4</span>				
			</div>
		</section>
		<section class="section5">
			<div>
				<span>Page #5</span>				
			</div>
		</section>
	</div>
	<script type="text/javascript">
		new fullScroll({
			displayDots: true,
			dotsPosition: 'left',
			animateTime: 0.7,
			animateFunction: 'ease'
		});
	</script>
</body>
</html>

'fullScroll' 카테고리의 다른 글

full-page-scroll  (0) 2019.09.27

+ Recent posts

티스토리툴바