이미지 슬라이드는 부트스트랩이 먹었나(?) 보다. 검색하니까 이것만 나오네.
예제 보니까 엄청 잘 되어 있기도 하다. 플러그인 삽입만 잘 해놓으면 따로 javascript 많이 쓸 필요 없이 그냥 html 코드 가져다 붙이는 걸로 거의 다 해결 된다.
근데 예제 보면서 써보려는데 엄청 엄청 안된다.
그래서 w3wschools.com 에 나와 있는 예제 보고 하나씩 하나씩 수정했다.
내 기준 안 되던 이유는 부트스트랩에서 다운로드 받아 업로드한 js 파일이랑 css 파일이 이상했다.
내가 파일을 잘못 찾아 업로드 했을 수도 있지만 여지껏 제작된 플러그인 사용하면서 이런 적 없었는데, 처음이다.
예제에 설명 되어 있는대로 같은 이름의 파일을 찾아서, bootstrap.min.css랑 bootstrap.min.js, 업로드 했고 경로 제대로 된 것도 확인했었는데 말이야.
그래서 w3wschools.com 예제에 있는 js 파일이랑 css 파일 경로에 가서 내용 복사, 새파일 만들어서 그걸 연결하니까 작동했다. 원래 파일명은 bootstrap.min 인데, 아래는 내가 구분하기 쉬우려고 변경한 것.
+) 아래 두 파일이 바로 그 js, css 파일
+) 위 js, css 파일 긁어 온 예제 경로
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel
Tryit Editor v3.6
Bootstrap Example /* Make the image fully responsive */ .carousel-inner img { width: 100%; height: 100%; }
www.w3schools.com
내 작업. 다음에 할 때 되면 또 까먹기 때문에 참고 하기 위해 필요하다.
예제 마지막의 javascript 는 슬라이드 넘어가는 속도 조절.
<head>
<link rel="stylesheet" type="text/css" href="./css/carousel.css">
<link rel="stylesheet" type="text/css" href="./css/css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./js/js.js"></script>
<script src="./js/carousel.js"></script>
</head>
<body>
<div id="slide" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slide" data-slide-to="0" class="active"></li>
<li data-target="#slide" data-slide-to="1"></li>
<li data-target="#slide" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active"></div>
<div class="carousel-item"></div>
<div class="carousel-item"></div>
</div>
</div>
<script>
$(window).ready(function() {
$('.carousel').carousel({
interval: 2500
});
});
</script>
</body>
