슬라이드 스크립트

</p>

<p><script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></a></p>

<p>

<div class="slide">

  <ul class="panel">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

  </ul>

  <ul class="dot">

    <li class="on">1번 탭</li>

        <li>2번 탭</li>

        <li>3번 탭</li>

        <li>4번 탭</li>

        <li>5번 탭</li>

   </ul>

</div></p>

<p>

<style>

* {

  margin: 0px;

  padding: 0px;

  background:#000

}</p>

<p>ul,

ol,

li {

  list-style: none;

}</p>

<p>a {

  text-decoration: none;

}</p>

<p>img {

  vertical-align: top;

  border: none;

}</p>

<p>.slide {

  position: relative;

  padding-top: 50px;

  overflow: hidden;</p>

<p>}</p>

<p>.panel {

  width: 400%;

}</p>

<p>.panel:after {

  content: "";

  display: block;

  clear: both;

}</p>

<p>.panel>li {

  width: 25%;

  height: 750px;

  float: left;

  background-repeat: no-repeat;

  background-size: 100% 100%;

  position: relative;

  font-size:30px;

  text-align:center;

  color:#fff

}</p>

<p>.panel>li:nth-of-type(1) {

  background-color: red;

}</p>

<p>.panel>li:nth-of-type(2) {

  background-color: blue;

}</p>

<p>.panel>li:nth-of-type(3) {

  background-color: green;

}</p>

<p>

.panel>li:nth-of-type(4) {

  background-color: #ffcc00;

}</p>

<p>.panel>li:nth-of-type(5) {

  background-color: #ededed;

}

.dot:after {

  content: "";

  display: block;

  clear: both;

}</p>

<p>.dot {

  position: absolute;

  left: 50%;

  bottom: 10%;

  transform: translateX(-50%);

}</p>

<p>.dot>li {

  float: left;

  width: 25px;

  height: 25px;

  border-radius: 50%;

  background-color: #fff;

  margin-left: 10px;

  margin-right: 10px;

  text-indent: -9999px;

  cursor: pointer;

}</p>

<p>.dot>li.on {

  background-color: #342f2f;

}</p>

<p></style></p>

<p><script>

$(document).ready(function() {

  slide();

});</p>

<p>

// 슬라이드 

function slide() {

  var wid = 0;

  var now_num = 0;

  var slide_length = 0;

  var auto = null;

  var $dotli = $('.dot>li');

  var $panel = $('.panel');

  var $panelLi = $panel.children('li');</p>

<p>  // 변수 초기화

  function init() {

    wid = $('.slide').width();

    now_num = $('.dot>li.on').index();

    slide_length = $dotli.length;

  }</p>

<p>  // 이벤트 묶음

  function slideEvent() {</p>

<p>    // 슬라이드 하단 dot버튼 클릭했을때

    $dotli.click(function() {

      now_num = $(this).index();

      slideMove();

    });</p>

<p>

    // 오토플레이

    autoPlay();</p>

<p>    // 오토플레이 멈춤

    autoPlayStop();</p>

<p>    // 오토플레이 재시작

    autoPlayRestart();</p>

<p>    // 화면크기 재설정 되었을때

    resize();

  }</p>

<p> // 자동실행 함수

  function autoPlay() {

    auto = setInterval(function() {

      nextChkPlay();

    }, 3000);

  }</p>

<p>  // 자동실행 멈춤

  function autoPlayStop() {

    $panelLi.mouseenter(function() {

      clearInterval(auto);

    });

  }</p>

<p>

 // 자동실행 멈췄다가 재실행

  function autoPlayRestart() {

    $panelLi.mouseleave(function() {

      auto = setInterval(function() {

        nextChkPlay();

      }, 3000);

    });

  }</p>

<p>

 // 슬라이드 무브

  function slideMove() {

    $panel.stop().animate({

      'margin-left': -wid * now_num

    });

    $dotli.removeClass('on');

    $dotli.eq(now_num).addClass('on');

  }</p>

<p>// 화면크기 조정시 화면 재설정

  function resize() {

    $(window).resize(function() {

      init();

      $panel.css({

        'margin-left': -wid * now_num

      });

    });

  }

  init();

  slideEvent();

}

</script></p>

<p>