bootstrap carousel slider mũi tên tùy chỉnh

Question

Được rồi

Tôi đang dùng bootelps carousel slider, nhưng với hình ảnh tùy chỉnh thay vì glyphicons đi kèm với nó.

Tuy nhiên, vấn đề với vấn đề là chúng được đặt ở các cạnh của thanh trượt. Trên cùng bên trái cho mũi tên trái và trên cùng bên phải cho hình ảnh bên phải.

Tôi đã thử thay đổi vị trí, hoạt động nhưng không ở vị trí của chúng khi cửa sổ được kích thước lại. Và tôi không biết nơi để nhắm mục tiêu mã để mã bỏ qua bóng xuất hiện khi di chuột qua mũi tên.

Đây là html.

<div class="container-fluid banner_fluid"> 
    <div class="carousel slide" data-ride="carousel" id="carousel_slider"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="images/home_banner_1.jpg" alt="home slide 1" /> 
      </div> 
      <div class="item"> 
       <img src="images/home_banner_2.jpg" alt="home slide 1" /> 
      </div> 
      <div class="item"> 
       <img src="images/home_banner_3.jpg" alt="home slide 1" /> 
      </div> 
     </div> 
     <div href="#carousel_slider" class="left carousel-control" data-slide="prev"> 
      <span> 
       <img src="images/chevron_left.jpg" /> 
      </span> 
     </div> 
     <div href="#carousel_slider" class="right carousel-control" data-slide="next"> 
      <span> 
       <img src="images/chevron_right.jpg" /> 
      </span> 
     </div> 
    </div> 
</div> 

Tôi đã sử dụng công cụ dành cho nhà phát triển để có giao diện nhanh và thử nghiệm cho các tùy chọn khác nhau. Vị trí tuyệt đối không hoạt động. Có cách nào khác để làm cho nó, vì vậy họ xuất hiện ở vị trí tương tự như glyphicons ban đầu và trả lời quá?

hình ảnh với việc sửa chữa gợi ý vào nó ...

Những thay đổi được thực hiện trong mã cho đến nay là sự bổ sung của css và img đáp ứng trong lớp của băng chuyền kiểm soát bản thân.

------------- biểu ngữ ---------------- */

.banner_fluid { 
    padding-left:0; 
    padding-right:0; 
} 

.carousel-control { 
    position: absolute; 
    top: 50%; /* pushes the icon in the middle of the height */ 
    z-index: 5; 
    display: inline-block; 

}

Các khác mã tôi đã thử tất cả đã cho hiệu quả tốt nhưng chỉ trong xem máy tính để bàn.

Answer 1

thêm này vào file CSS của bạn:

.carousel-control { 
position: absolute; 
top: 50%; /* pushes the icon in the middle of the height */ 
z-index: 5; 
display: inline-block; 
} 

Answer 2

xây dựng trên câu trả lời stylesenberg, bạn nên thêm mã, tuy nhiên, thay vì gọi .carousel kiểm soát, trong đó sẽ đẩy toàn bộ nút xuống 50%, cuộc gọi trên phần tử img thay thế. Hơn nữa, bạn sẽ muốn chuyển phần tử img lên 50% chiều cao của nó để nó sẽ hoàn toàn chính giữa.

CẬP NHẬT 1: Tôi đã thêm bản dịch (-50%, -50%) để chuyển các nút sang trái nếu không chúng sẽ được bù đắp bởi phần tử <span>.

.carousel-control > span > img{   
    position: absolute; 
    /*set position of image from top to be 50%...*/ 
    top: 50%; 
    /*and then shift it down to make it perfectly center.*/ 
    transform: translate(-50%, -50%); 

    z-index: 5; 
    display: inline-block; 
} 

Cập nhật 2: Tôi vừa nhận ra rằng nó có thể được thực hiện đơn giản hơn nhiều. Vì bạn đang sử dụng mũi tên thanh trượt tùy chỉnh, phần tử <span> là không cần thiết. Vì vậy, mã html của bạn có thể chỉ đơn giản là:

<a class="left carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="prev"> 
    <img src="chevron-left.png" /> 
</a> 

<a class="right carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="next"> 
    <img src="chevron-right.png" /> 
</a> 

và chỉ xóa "span" khỏi css.