HTML, CSS 및 JS로 슬라이드쇼 만들기

HTML과 CSS3 및 javascript로 슬라이드쇼를 만드는 방법. 따라서 멋진 자동 슬라이더에 외부 소스나 스크립트를 사용하지 않을 것입니다.

우리가 알고 있듯이 웹 슬라이더/슬라이드쇼는 특정 시간 간격으로 흐름의 한 요소를 표시하는 이미지 또는 텍스트의 흐름입니다. 실시간 상황에서는 웹 애플리케이션, 웹 페이지 또는 다른 곳에 이미지 슬라이드쇼를 넣어야 할 수도 있습니다. 몇 초 안에 개발자는 기존 jQuery 플러그인 또는 다른 것 또는 슬라이더 스크립트 사용을 고려합니다.

이러한 종류의 스크립트를 사용하다 보면 웹 애플리케이션이나 페이지에서 사용하는 기존 라이브러리와 스크립트 라이브러리 사이에 코드 충돌이 발생할 가능성이 있으며 이를 수정하는 데 시간이 걸립니다. 플러그인을 사용하여 슬라이드쇼를 만들면 웹 페이지 속도 및 기타 여러 효과가 느려질 수 있음을 명심하십시오. 따라서 외부 플러그인 사용을 권장할 수 없습니다.

HTML 및 CSS3의 슬라이드쇼

슬라이더가 간단하고 짧으면 HTML, CSS 및 JavaScript를 사용하여 자신만의 슬라이드쇼를 만들 수 있습니다. 슬라이드쇼를 만드는 가장 좋은 방법 중 하나입니다. 이렇게 하면 수행 시간이 줄어들고 오류와 시간 소모가 없습니다.
자, 만들어 봅시다.

<div class="soft-slideshow">

<div class="softSlides out">
  <div class="numbers">1 / 3</div>
  <img src="https://softcodeon.com/wp-content/uploads/revslider/home-3/slide-sh-8n.jpg" style="width:100%">
  <div class="text">Your text here</div>
</div>

<div class="softSlides out">
  <div class="numbers">2 / 3</div>
  <img src="https://softcodeon.com/wp-content/uploads/revslider/home-3/slide-sh-7n.jpg" style="width:100%">
  <div class="text">Your text here</div>
</div>

<div class="softSlides out">
  <div class="numbers">3 / 3</div>
  <img src="https://softcodeon.com/wp-content/uploads/revslider/home-3/slide-sh-9n.jpg" style="width:100%">
  <div class="text">Your text here</div>
  </div></div><br>
<div style="text-align:center">
  <span class="bullets"></span> 
  <span class="bullets"></span> 
  <span class="bullets"></span> 
</div>

CSS 코드:

<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.softSlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.soft-slideshow {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* 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) */
.numbers {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* The bulletss/bullets/indicators */
.bullets {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active {
  background-color: #717171;
}
/* Fading animation */
.out {
  -webkit-animation-name: out;
  -webkit-animation-duration: 1.5s;
  animation-name: out;
  animation-duration: 1.5s;
}

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>

자세한 내용 및 데모 보기 자세한 내용: Create A Slideshow In HTML And CSS3