Code slider thuần CSS, Javascript không cần thư viện

Đây là code slider mình hay dùng cho các dự án code từ đầu bằng starter theme mà không cần phải tích hợp slider bên thứ 3 như Slick slider, Tiny Slider, Owl slider hay Swiper slide…

Tất nhiên tuỳ vào dự án mà có sự lựa chọn cho phù hợp nhưng các dự án nhỏ không cần phairtichs hợp các thư viện slider vào.

Đây là demo bạn có thể xem qua

See the Pen
Slider thuần CSS, Javascript by Vũ Trụ Số (@vutruso)
on CodePen.

Code slider thuần CSS, Javascript không cần thư viện

Nếu bạn cần slider dạng này có thể sử dụng code dưới đây (trong slider có sử dụng font-awesome v5.11.2)

Code HTML

<div class="slider">

  <div class="slider-inner">
    <div class="slide" data-slide='1'>
      <div class="content" style="background-color: #ff4d4d;"></div>
    </div>

    <div class="slide" data-slide='2'>
      <div class="content" style="background-color: #32ff7e;"></div>
    </div>

    <div class="slide" data-slide='3'>
      <div class="content" style="background-color: #18dcff;"></div>
    </div>

    <div class="slide" data-slide='4'>
      <div class="content" style="background-color: #c56cf0;"></div>
    </div>
  </div>

  <div class="indicators">
    <div class="indicator" data-slide='1' active></div>
    <div class="indicator" data-slide='2'></div>
    <div class="indicator" data-slide='3'></div>
    <div class="indicator" data-slide='4'></div>
  </div>

  <div class="arrows">
    <div class="arrow-prev">
      <i class="fas fa-chevron-left"></i>
    </div>
    <div class="arrow-next">
      <i class="fas fa-chevron-right"></i>
    </div>
  </div>

</div>

Code css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  width: 100%;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.slider {
  position: relative;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.slider .slider-inner {
  display: flex;
  width: 100%;
  transition: all .3s;
}

.slider .slide {
  flex: none;
  width: 100%;
}

.slider .indicators {
  display: flex;
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 1;
}

.slider .indicators .indicator {
  margin: 0px 5px;
  width: 10px;
  height: 10px;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  opacity: .6;
  cursor: pointer;
  transition: all .3s;
}

.slider .indicators .indicator[active] {
  width: 15px;
  opacity: 1;
}

.slider .arrows {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}

.slider .arrows .arrow-prev,
.slider .arrows .arrow-next {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  opacity: .6;
  cursor: pointer;
  transition: all .3s;
}

.slider .arrows .arrow-prev:hover,
.slider .arrows .arrow-next:hover {
  opacity: .8;
}

.slider .arrows .arrow-prev {
  left: 50px;
}

.slider .arrows .arrow-next {
  right: 50px;
}

.slider .arrows .arrow-prev .fas,
.slider .arrows .arrow-next .fas {
  color: #4b4b4b;
  opacity: .5;
}

Code js

const indicators = document.querySelectorAll('.slider .indicators .indicator')
const arrowPrev = document.querySelector('.slider .arrows .arrow-prev')
const arrowNext = document.querySelector('.slider .arrows .arrow-next')

const handleIndicatorClick = (event) => {
  const indicator = event.target
  if (!isActive(indicator)) {
    removeActive()
    addActive(indicator)
    showSlide(indicator.dataset.slide)
  }
}

const handlePrevArrowClick = (event) => {
  let activeSlide = 0
  let newActiveSlide = indicators.length
  let ready = false

  indicators.forEach(indicator => {
    if (isActive(indicator) && !ready) {
      activeSlide = indicator.dataset.slide
      if (activeSlide !== '1') {
        newActiveSlide = parseInt(activeSlide) - 1
      }
      removeActive()
      addActive(document.querySelector(`.slider .indicators [data-slide='${newActiveSlide}']`))
      showSlide(newActiveSlide)
      ready = true
    }
  })
}

const handleNextArrowClick = (event) => {
  let activeSlide = 0
  let newActiveSlide = 1
  let ready = false

  indicators.forEach(indicator => {
    if (isActive(indicator) && !ready) {
      activeSlide = indicator.dataset.slide
      if (activeSlide !== indicators.length.toString()) {
        newActiveSlide = parseInt(activeSlide) + 1
      }
      removeActive()
      addActive(document.querySelector(`.slider .indicators [data-slide='${newActiveSlide}']`))
      showSlide(newActiveSlide)
      ready = true
    }
  })
}

indicators.forEach(indicator => {
  indicator.addEventListener('click', handleIndicatorClick)
})

arrowPrev.addEventListener('click', handlePrevArrowClick)
arrowNext.addEventListener('click', handleNextArrowClick)

function isActive (indicator) {
  return indicator.hasAttribute('active')
}

function removeActive () {
  document.querySelectorAll('.slider .indicators [active]').forEach(item => {
    item.removeAttribute('active')
  })
}

function addActive (indicator) {
  indicator.setAttribute('active', '')
}

function showSlide (newActiveSlide) {
  const newPosition = (100 * (newActiveSlide - 1)).toString()
  document.querySelector('.slider-inner').style.marginLeft = `-${newPosition}%`
}

Okay, hy vọng slider này sẽ giúp ích được cho nhiều người.