Làm thế nào để làm cho hướng nav liên tục trên flexslider?

Question

Tôi muốn các mũi tên nhỏ màu xám di chuột được hiển thị và không hoạt ảnh khi di chuột qua điều hướng hình thu nhỏ. Bạn có thể xem bản demo here. Tôi đã lội qua javascript cho các plugin và không thể cho cuộc sống của tôi làm việc ra nơi nó được làm động các mũi tên. Nếu có thể, tôi sẽ bình luận ra mã đó. Vậy có ai khác không?

Answer 1

Điều này làm tôi bối rối một chút, nhưng hóa ra hoạt ảnh mũi tên không thực sự nằm trong plugin javascript. Đó là trong CSS sử dụng -webkit-transition: all .3s ease;. Nếu bạn nhìn vào tệp CSS mặc định và đi tới dòng 52, bạn cần xóa phần trên khỏi số .flex-direction-nav a. Vì vậy, dòng nên trông giống như dưới đây.

.flex-direction-nav a { 
    width: 30px; 
    height: 30px; 
    margin: -20px 0 0; 
    display: block; 
    background: url(images/bg_direction_nav.png) no-repeat 0 0; 
    position: absolute; 
    top: 50%; 
    z-index: 10; 
    cursor: pointer; 
    text-indent: -9999px; 
    opacity: 0; 
} 

Answer 2

Tạo mũi tên của riêng bạn: tắt directionNav và sử dụng manualControls.

Answer 3

Gần đây tôi đã chạy vào vấn đề này và giải quyết nó (với sự giúp đỡ của câu hỏi này/câu trả lời) bằng cách ghi đè các phong cách sau:

.flex-direction-nav a { 
    ... 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    transition: all .3s ease; 
} 

với những phong cách trong css của riêng tôi:

.flexslider .flex-direction-nav a.flex-prev, 
.flexslider .flex-direction-nav a.flex-next { 
    ... 
    -moz-transition: none; 
    -webkit-transition: none; 
    transition: none; 
} 

Tôi là một người hâm mộ lớn không sửa đổi mã nguồn do thư viện cung cấp, vì vậy tôi nghĩ đây là giải pháp tốt hơn và hoàn thiện hơn.

Answer 4

Nó rất đơn giản, chỉ cần thay đổi mã css sau như thế này:

.flexslider .flex-direction-nav .flex-next { 
 
    right: 5px; /* adjust offset to match the hover style */ 
 
    opacity: .8; /* adjust opacity to match the hover style */ 
 
} 
 

 
.flexslider .flex-direction-nav .flex-prev { 
 
    left: 5px; /* adjust offset to match the hover style */ 
 
    opacity: .8; /* adjust opacity to match the hover style */ 
 
}