티스토리 강좌 | Tips > 슬라이더 넣는 방법

상단에 슬라이더가 있는 사이트들이 있습니다. 슬라이더로 어떤 주제의 사이트인지 알려주기도 하고, 광고를 달기도 하고, 특정 글로 링크를 걸어놓기도 합니다.

티스토리는 HTML, CSS, JavaScript 사용이 가능하므로 슬라이더를 넣을 수 있습니다.

Nivo Slider

슬라이더 프로그램은 여러 가지가 있는데, 그 중에서 Nivo Slider를 설치해보겠습니다.

Nivo Slider는 MIT 라이센스로 배포되는 슬라이더 플러그인으로 적용이나 설정이 편합니다.

Nivo Slider 다운로드

다운로드 받을 수 있는 페이지 : https://github.com/Codeinwp/Nivo-Slider-jQuery

오른쪽 위의 [Clone or download] 버튼을 클릭하고 [Download ZIP]을 클릭합니다.

Nivo Slider 업로드

[HTML/CSS 편집]의 [파일업로드]에서 파일을 업로드합니다.

업로드할 파일은 jquery.nivo.slider.pack.js, nivo-slider.css와 themes/default 폴더 안의 모든 파일들입니다.

HTML 수정

</head> 위에 다음의 코드를 입력합니다.

<link rel="stylesheet" href="./images/nivo-slider.css">
<link rel="stylesheet" href="./images/default.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./images/jquery.nivo.slider.pack.js"></script>
<script>
  jQuery( document ).ready( function( ) {
    $( '#jbSlider' ).nivoSlider( {
      effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
      slices: 15, // For slice animations
      boxCols: 8, // For box animations
      boxRows: 4, // For box animations
      animSpeed: 500, // Slide transition speed
      pauseTime: 5000, // How long each slide will show
      startSlide: 0, // Set starting Slide (0 index)
      directionNav: true, // Next & Prev navigation
      controlNav: true, // 1,2,3... navigation
      controlNavThumbs: false, // Use thumbnails for Control Nav
      pauseOnHover: true, // Stop animation while hovering
      manualAdvance: false, // Force manual transitions
      prevText: 'Prev', // Prev directionNav text
      nextText: 'Next', // Next directionNav text
      randomStart: false, // Start on a random slide
      beforeChange: function(){}, // Triggers before a slide transition
      afterChange: function(){}, // Triggers after a slide transition
      slideshowEnd: function(){}, // Triggers after all slides have been shown
      lastSlide: function(){}, // Triggers when last slide is shown
      afterLoad: function(){} // Triggers when slider has loaded
    } );
  } );
</script>

빨간색 코드는 슬라이더 옵션으로, 값을 적절히 변경합니다.

슬라이더가 나올 자리에 다음의 코드를 입력합니다.

<div class="slider-wrapper theme-default">
  <div class="ribbon"></div>
  <div id="jbSlider" class="nivoSlider">
    <a href="#"><img src="./images/slider-01.png" title="Lorem Ipsum" alt=""></a>
    <img src="./images/slider-02.png" alt="">
    <img src="./images/slider-03.png" alt="">
  </div>
</div>

빨간색 코드는 슬라이더에 사용할 이미지의 경로입니다. 적절히 변경하세요. 초록색 코드처럼 title 속성을 추가하면 그 내용이 이미지에 오버레이 되어 나옵니다.

img 요소를 추가하면 더 많은 슬라이더를 사용할 수 있습니다.

Category

Created on 2017-04-14 11:14 | Updated on 2017-04-14 11:14

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Book navigation