bootstrap carousel (background image) 적용방법 정보
bootstrap carousel (background image) 적용방법본문
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 }?>
*위와같이 동일하게 하실분은 관리자 배너 출력 글 참조
1
댓글 0개