Làm thế nào để tạo 2 nút điều khiển trên Slider?

[Tran123 (Tran)]

A/c cho em hỏi cách nào tạo ra 2 nút điều khiển như hình không ạ.Em mới chỉ biết là có thể sử dụng javascript để làm nhưng chưa thực sự hiểu rõ lắm và tìm trên mạng cũng không thấy. Em mới học về Fontend nên a/c chỉ giúp em.em cám ơn.em sử dụng lightslider để tạo slide ạ

[HR16 (Gà Coder)]

Hai nút trên được gọi là next và prev (previous). Mình xem code minh họa thì thấy lightslider thì có sẵn hai cái nút trên rồi.

[HR16 (Gà Coder)]

Vào trang này ngâm cứu thôi

http://sachinchoolur.github.io/lightslider/index.html

[anon71189590]

bootstrap có hỗ trợ sắn slider này gọi là carousel bạn mở source tham khảo thử xem

[LocNguyenXuan99 (Loc)]

Nó chỉ đơn giản là css position các thẻ cho đúng thôi

<div class='slider'>
  <img></img>
  <div class='prev'> &lt;</div>
  <div class='next'> &gt;</div>
</div>

Bạn set postion của parent là relative, của 2 button prev và next là absolute

.slider {
  position: relative;
}
.prev {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
}
.next {
  position: absolute;
  right: 0;
  display: inline-block;
  top: 50%;
}

Lúc này top của 2 button nằm giữa slider.
Bạn chỉ cần translateY 50% là căn giữa 2 button vào chính giữa slider.

.prev, .next{
  transform: translateY(-50%)
}