메인에 이미지슬라이드넣고싶은데요

메인에 이미지슬라이드넣고싶은데요

QA

메인에 이미지슬라이드넣고싶은데요

본문

안녕하세요. 메인에 이미지 슬라이드 넣고 싶은데요. 
어떤소스를 활용하면 될까요? 암것도 모르니 답답하네요. 
쉽게 참고할수있는곳 있으면 알려주세요. 

이 질문에 댓글 쓰기 :

답변 3

메인이면 접속해서 처음 보이는 화면에 즉 index.php에 넣으시는 것이라고 생각이 되는데요.

슬라이드를 넣는 방법은 많습니다.

bx-slider를 사용해도 되고 아니면 소스를 index.php에 직접 붙여넣기 해도 됩니다.

w3schools.com에도 슬라이드쇼 넣는 방법이 나오는데요.

W3Schools How TO - Code snippets for HTML, CSS and JavaScript

이방법이 더 쉬울 것 같습니다.

index.php에 코드를 붙여넣기하고 이미지 경로만 조절하면 됩니다.

詩人 李恩京 (gratia.kr) 이 사이트에서 적용해보았는데요

굵은 글씨의 코드를 붙여넣기 하면 잘 될겁니다.

 

<?php
include_once('./_common.php');

define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if(defined('G5_THEME_PATH')) {
    require_once(G5_THEME_PATH.'/index.php');
    return;
}

if (G5_IS_MOBILE) {
    include_once(G5_MOBILE_PATH.'/index.php');
    return;
}

include_once(G5_PATH.'/head.php');
?>


<!-- 슬라이더 넣기 CSS, 출처: https://www.w3schools.com/howto/howto_js_slideshow.asp -->
<style>
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
</style>


<!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 4</div>
    <img src="zz/images/slider/img_lights_wide.jpg" style="width:100%">
    <div class="text">내가 시를 만든 것이 아니다. 시가 나를 만든 것이다.
-괴테</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 4</div>
    <img src="zz/images/slider/img_mountains_wide.jpg" style="width:100%">
    <div class="text"> 시는 번갯불의 섬광이어서, 어휘들의 배열로만 끝날 때는 단순한 작문에 불과하다.
-칼릴 지브란</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 4</div>
    <img src="zz/images/slider/img_nature_wide.jpg" style="width:100%">
    <div class="text">시는 불가해한 것에의 탐구이다.
-스티븐스</div>
  </div>
    
    <div class="mySlides fade">
    <div class="numbertext">4 / 4</div>
    <img src="zz/images/slider/img_snow_wide.jpg" style="width:100%">
    <div class="text">시란 쓰지 않고는 못 배길 때 쓰는 것이다.
-유치환</div>
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
    <span class="dot" onclick="currentSlide(4)"></span>
</div>


<!-- 슬라이더 넣기 자바스크립트 -->


<!-- 자동변환 슬라이더 -->
<!--
<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>
-->

<!-- 수동변환 슬라이더 -->
<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

<!-- 이미지 슬라이더 끝 -->

 

 

<h2 class="sound_only">최신글</h2>

<div class="latest_top_wr">
    <?php
    // 이 함수가 바로 최신글을 추출하는 역할을 합니다.
    // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
    // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
    echo latest('pic_list', 'free', 1, 23);            // 최소설치시 자동생성되는 자유게시판 4,23
    echo latest('pic_list', 'qa', 1, 23);            // 최소설치시 자동생성되는 질문답변게시판 4, 23
    echo latest('pic_list', 'notice', 1, 23);        // 최소설치시 자동생성되는 공지사항게시판 4, 23
    ?>
</div>


<div class="latest_wr">
    <!-- 사진 최신글2 { -->
    <?php
    // 이 함수가 바로 최신글을 추출하는 역할을 합니다.
    // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
    // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
    echo latest('pic_block', 'gallery', 4, 23);        // 최소설치시 자동생성되는 갤러리게시판
    ?>
    <!-- } 사진 최신글2 끝 -->
</div>


<div class="latest_wr">
<!-- 최신글 시작 { -->
    <?php
    //  최신글
    $sql = " select bo_table
                from `{$g5['board_table']}` a left join `{$g5['group_table']}` b on (a.gr_id=b.gr_id)
                where a.bo_device <> 'mobile' ";
    
    if(!$is_admin)
    $sql .= " and a.bo_use_cert = '' ";
    $sql .= " and a.bo_table not in ('notice', 'gallery') ";     //공지사항과 갤러리 게시판은 제외
    $sql .= " order by b.gr_order, a.bo_order ";
    $result = sql_query($sql);
    
    for ($i=0; $row=sql_fetch_array($result); $i++) {
        $lt_style = '';
        if ($i%3 !== 0 ) $lt_style = "margin-left:2%";
    ?>
    
    <div style="float:left;<?php echo $lt_style ?>" class="lt_wr">
        <?php
        // 이 함수가 바로 최신글을 추출하는 역할을 합니다.
        // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
        // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
        echo latest('basic', $row['bo_table'], 3, 24);//원래 6, 24
        ?>
    </div>
    <?php
    }
    ?>
    <!-- } 최신글 끝 -->
</div>

<?php
include_once(G5_PATH.'/tail.php');

 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,160 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT