$(function(){ var imgItems = $('.slider li').length; var imgPos = 1; for(i = 1; i <= imgItems; i++){ $('.pagination').append('<li><span>●</span></li>'); } $('.slider li').hide(); $('.slider li:first').show(); $('.pagination li:first').css({'color': '#cd6e2e'}); $('.pagination li').click(pagination); $('.left span').click(prevSlider); $('.right span').click(nextSlider); function pagination(){ var paginationPos = $(this).index() + 1; $('.slider li').hide(); $('.slider li:nth-child('+ paginationPos +')').fadeIn(); $('.pagination li').css({'color': '#858585'}); $('.pagination li:nth-child('+ paginationPos +')').css({'color': '#cd6e2e'}); imgPos = paginationPos; } function nextSlider(){ if(imgPos >= imgItems){ imgPos = 1; }else{imgPos++;} $('.slider li').hide(); $('.slider li:nth-child('+ imgPos +')').fadeIn(); $('.pagination li').css({'color': '#858585'}); $('.pagination li:nth-child('+ imgPos +')').css({'color': '#cd6e2e'}); } function prevSlider(){ if(imgPos <= 1){ imgPos = imgItems; }else{imgPos--;} $('.slider li').hide(); $('.slider li:nth-child('+ imgPos +')').fadeIn(); $('.pagination li').css({'color': '#858585'}); $('.pagination li:nth-child('+ imgPos +')').css({'color': '#cd6e2e'}); } setInterval(function(){ nextSlider(); },4000); });
<div class="slideshow"> <ul class="slider"> <li> <img src="http://vnfrkehd.dothome.co.kr/img/bg1.jpg" alt=""> <section class="caption"> <h1>Lorem ipsum1.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quas animi ratione, adipisci iure.</p> </section> </li> <li> <img src="http://vnfrkehd.dothome.co.kr/img/bg2.jpg" alt=""> <section class="caption"> <h1>Lorem ipsum2.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quas animi ratione, adipisci iure.</p> </section> </li> <li> <img src="http://vnfrkehd.dothome.co.kr/img/bg3.jpg" alt=""> <section class="caption"> <h1>Lorem ipsum3.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quas animi ratione, adipisci iure.</p> </section> </li> <li> <img src="http://vnfrkehd.dothome.co.kr/img/bg4.jpg" alt=""> <section class="caption"> <h1>Lorem ipsum4.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis quas animi ratione, adipisci iure.</p> </section> </li> </ul> <ol class="pagination"> </ol> <div class="left"> <span><</span> </div> <div class="right"> <span>></span> </div> </div>
*{ padding: 0; margin: 0; box-sizing: border-box; } ul, ol{ list-style: none; } body{ font-family: sans-serif; } .slideshow{ width: 100%; position: relative; } .slider li, ul{ width: 100%; } .slider li img{ width: 100%; } .slider .caption{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; z-index: 1; } .slider .caption h1{ font-size: 50px; } .slider .caption p{ margin-top: 10px; font-size: 20px; } .pagination{ position: absolute; top: 102%; width: 100%; display: flex; justify-content: center; } .pagination li{ font-size: 20px; margin: 2px 5px; color: #858585; } .left, .right{ position: absolute; top: 0; height: 100%; display: flex; align-items:center; color: #fff; font-size: 35px; z-index: 2; cursor:pointer; } .left{ left: 10px; } .right{ right: 10px; }