Làm cách nào để thêm mũi tên vào thanh trượt trong css?

Bởi vì Splide đề cập đến các lớp trong đó

new Splide( '.splide', {
  arrowPath: 'm15.5 0.932-4.3 4.38...',
} ).mount();

Trình giữ chỗ

Theo mặc định, Splide chèn mũi tên trước phần tử rãnh. Bạn có thể chỉ định vị trí bằng cách thêm một trình giữ chỗ là

new Splide( '.splide', {
  arrowPath: 'm15.5 0.932-4.3 4.38...',
} ).mount();

<section class="splide" aria-label="Placeholder Example">
  

  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">...</li>
		</ul>
  </div>




  <div class="splide__arrows"></div>
</section>
HTML
 


 

  


  

		

			
...
		
  


  

Nếu bạn muốn căn giữa các mũi tên theo chiều dọc trong băng chuyền, hãy đặt nó bên trong phần tử tương đối tùy ý của bạn. Kỹ thuật này hữu ích cho băng chuyền với một số điều khiển khác

<section class="splide" aria-label="Placeholder Example">
  <div style="position: relative">
    <div class="splide__arrows"></div>




    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">...</li>
      </ul>
    </div>
  </div>

  <div>
    
  </div>
</section>
HTML
 


 

  

    



    

      

        
...
      
    
  


  

    
  

Nhưng không chèn phần giữ chỗ vào phần tử theo dõi (hạn chế về cấu trúc)

Mũi tên tùy chỉnh

Nếu bạn muốn sử dụng phông chữ biểu tượng, hình ảnh hoặc văn bản, bạn có thể tạo mũi tên tùy chỉnh của mình bằng mã đánh dấu bổ sung

new Splide( '.splide', {
  arrowPath: 'm15.5 0.932-4.3 4.38...',
} ).mount();

new Splide( '.splide', {
  arrowPath: 'm15.5 0.932-4.3 4.38...',
} ).mount();

Bạn có thể đặt

new Splide( '.splide', {
  arrowPath: 'm15.5 0.932-4.3 4.38...',
} ).mount();

new Splide( '.splide', {
  arrowPath: 'm15.5 0.932-4.3 4.38...',
} ).mount();

new Splide( '.splide', {
  arrowPath: 'm15.5 0.932-4.3 4.38...',
} ).mount();

Làm cách nào để thêm mũi tên trong CSS?

Làm cách nào để thêm mũi tên vào div trong CSS?