Tái định vị MỘT hình ảnh trong plugin Nivo Slider

Question

Tôi khá mới để phát triển web và jQuery, vì vậy hãy chịu với tôi.

Tôi đang sử dụng Nivo Slider trên trang web mà tôi đang làm việc. Đó là một trang web đáp ứng và tôi muốn thanh trượt hiển thị dễ dàng trên tất cả các kích thước màn hình. Tôi đã đặt một điểm ngắt trong CSS để khi trang web đạt đến kích thước nhỏ nhất (khoảng kích thước của màn hình thiết bị di động), thanh trượt được đặt thành chiều rộng 200%, với phần ẩn bị ẩn, để hình ảnh lớn hơn.

Tính năng này hoạt động tốt, tuy nhiên ở kích thước này, bạn chỉ có thể thấy trung tâm của thanh trượt, trong khi các cạnh bị cắt cạnh cạnh màn hình. Đối với hầu hết các hình ảnh tôi đang sử dụng, đây không phải là vấn đề, tuy nhiên một trong số chúng bị cắt rất lúng túng. Thật dễ dàng để định vị lại toàn bộ thanh trượt, nhưng tôi muốn thử và di chuyển hình ảnh ONE này để nó có thể được nhìn thấy rõ hơn trên màn hình nhỏ.

CSS Tôi đã thêm vào mặc định NIVO-slider.css là:

@media screen and (max-width: 31.25em) { /* 500px ÷ 16px */ 

.slider-wrapper{ 
    overflow: hidden; 
} 

.nivoSlider { 
    left: -50%; 
    width:200%; 
} 

.nivo-caption { 
    margin-left: 25%; 
    width: 50%; 
} 

} 

Cảm ơn rất nhiều!

Answer 1

Chỉ cần sử dụng CSS, bạn có thể thêm một lớp kiểu one-off với hình ảnh cụ thể, và ném đó vào truy vấn @media của bạn:

.my-one-off { left:??px; margin-right:??px }

Bạn có thể tìm kiếm các hình ảnh đó với jQuery cũng (nếu tôi không nhầm, Nivo sử dụng thư viện jQ).

$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example

Hoặc

$('img[src*="one-off.jpg"]').addClass('my-one-off');

Answer 2

Tôi nhìn NIVO-slider3.1. Để chọn một hình ảnh cụ chỉ và di chuyển nó để lại cho bạn có thể sử dụng sau trong css:

img[src="YourSpecialPic.jpg"]{ 
    left:50px !important; 
} 

Bạn cũng có thể thiết lập một hình ảnh động tùy chỉnh cho một slide đặc biệt với các thuộc tính img sau đây trong HTML:

data-transition="slideInLeft" 

Bạn có thể phụ bất kỳ thuộc tính nào để có được hiệu ứng mong muốn, nhưng tôi nghĩ điều này sẽ thực hiện thủ thuật.

LƯU Ý:

Tùy thuộc vào những gì hiệu ứng mà bạn đang sử dụng sẽ quyết định có hay không mà messes lên các hình ảnh động (ví dụ: Các hình ảnh động cắt trở nên hơi say lên sau khi thực hiện di chuyển trái Hình ảnh động slideInLeft dường như làm việc tốt..) .

Tôi không có giải pháp nhanh chóng hoặc dễ dàng để sửa tất cả hiệu ứng hoạt ảnh cho một trang trình bày cụ thể, nhưng tôi chắc chắn một câu lệnh có điều kiện trong javascript có thể đạt được nó (tôi không đủ thông minh cho nó)).