bootstrap carousel (background image) 적용방법 > 그누보드5 팁자료실

그누보드5 팁자료실

bootstrap carousel (background image) 적용방법 정보

bootstrap carousel (background image) 적용방법

본문

1890263260_1619021106.5284.png

 

1. https://getbootstrap.com/ > Get started 에서 부트스트랩에 필요한 코드 불러오기

(아래는 최신 버전이 아닐 수도 있음)

 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 

 

2. 메뉴에서 Components > Carousel 에 있는 예시 입력

 

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

위에서 이미지를 백그라운드로 적용하고 싶다면

아래 부분으로 변경하여 적용

    <div class="carousel-item <?php if($i==0){?>active<?php }?>" style="background-image: url('<?php echo G5_DATA_URL.'/banner/'.$row['bn_id'];?>')">
        <!-- <div class="carousel-caption d-none d-md-block">
        <a href="http://ety.kr/board/ety_theme_manual" target="_blank">
            <h3 class="ko_20_main"><?php echo $row['bn_alt']?></h3>
            <p class="white"></p>
        </a>
        </div> -->
    </div>

 

스타일 추가

 

<style>
    .carousel-item {
  /*height: 65vh;*/
  min-height: 250px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

 

*부트스트랩 설치시 css가 추가되어 디자인이 흐트러질 수 있음

이때는 cdn으로 css를 불러오지 않고 파일을 로컬파일로 불러온 뒤 부트스트랩 css에서 적용하는 태그의 스타일을 삭제하면 됨

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

를 

<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.open.css" > (integrity 같은 값 지워야함)

cdn 외부파일을 크롬 개발자 모드에서 코드 정리 기능을 사용하여 펼친 뒤

상기와 같이 로컬파일 생성 후 해당 파일에 코드를 넣고 불러온다.

그리고 a태그와같이 일반적으로 사용하는 코드를 삭제하고 부트스트랩 코드만 남기면 됨

 

=======제 개인적인 완성 코드(관리자에서 등록한 배너로 노출)=======

 

슬라이드 출력 페이지 : 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
      <?php for($i=0;$i<display_board_banner('메인','banner_only_imgsrc.skin.php','y');$i++){?>
      <li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $i?>" <?php if($i==0){?>class="active"<?php }?>></li>
      <?php }?>
  </ol>
  <div class="carousel-inner">

    <?php echo display_board_banner('메인','banner_only_imgsrc.skin.php');?>

  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<style>
    .carousel-item {
  /*height: 65vh;*/
  min-height: 250px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

 

스킨 파일 : 

 

<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>

<?php
for ($i=0; $row=sql_fetch_array($result); $i++){
?>
    <div class="carousel-item <?php if($i==0){?>active<?php }?>" style="background-image: url('<?php echo G5_DATA_URL.'/banner/'.$row['bn_id'];?>')">
        <!-- <div class="carousel-caption d-none d-md-block">
        <a href="http://ety.kr/board/ety_theme_manual" target="_blank">
            <h3 class="ko_20_main"><?php echo $row['bn_alt']?></h3>
            <p class="white"></p>
        </a>
        </div> -->
    </div>
<?php }?>
 

*위와같이 동일하게 하실분은 관리자 배너 출력 글 참조

https://sir.kr/g5_tip/12591

 

 

 

 

추천
1

댓글 0개

전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

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