Как изменить изображение основного слайдера при нажатии на стрелку карусели?

Question

Как изменить изображение основного слайдера при нажатии на стрелку карусели?

0

У меня есть главный div, содержащий большое изображение. И под ним есть маленькое эскиз. Я пишу это:

> <script type="text/javascript">
>                 $(document).ready(function(){
>                   $('#carousel').flexslider({
>                     animation: "slide",
>                     controlNav: false,
>                     animationLoop: false,
>                     slideshow: false,
>                     itemWidth: 150,
>                     itemMargin: 5,
>                     asNavFor: '#slider'
>                   });
> 
>                   $('#slider').flexslider({
>                     animation: "slide",
>                     controlNav: false,
>                     animationLoop: false,
>                     slideshow: false,
>                     sync: "#carousel",
>                     start: function(slider){
>                       $('body').removeClass('loading');
>                     }
>                   });
> 
>                 });
>             </script>

Теперь, когда я нажимаю стрелку (как предыдущую, так и следующую) основного большого изображения, уменьшаются изображения миниатюр. Теперь я хочу сделать то же самое, когда щелчок слайдера миниатюры (как предыдущий, так и следующий) будет нажат, и основное большое изображение изменится. Кто-нибудь?

вы можете проверить это http://flexslider.woothemes.com/thumbnail-slider.html здесь, нажав на миниатюру, стрелка не изменит основное большое изображение. Я хочу добиться этого.

the.big.lebowski 20 март 2014, в 19:01

Источник

0

создать jsfiddle, jsfiddle.net
dreamweiver 20 март 2014, в 17:55
0

Возможно, вы захотите проверить этот flexslider.woothemes.com/thumbnail-slider.html здесь, нажав на стрелку миниатюры, вы не измените главное большое изображение. Я хочу добиться этого.
the.big.lebowski 20 март 2014, в 17:56
0

Вы хотите перейти к следующему уменьшенному изображению (при нажатии на предыдущую или следующую кнопку) вместо того, чтобы сдвигать весь набор, верно?
dreamweiver 20 март 2014, в 18:00
0

При нажатии на стрелку миниатюрного изображения я хочу изменить указанное выше большое изображение, основное изображение.
the.big.lebowski 20 март 2014, в 18:02

Показать ещё 2 комментария

Теги:

jquery

html

css

dom

flexslider

2 ответа

Ещё вопросы

Возможно, вы захотите проверить этот flexslider.woothemes.com/thumbnail-slider.html здесь, нажав на стрелку миниатюры, вы не измените главное большое изображение. Я хочу добиться этого.
Вы хотите перейти к следующему уменьшенному изображению (при нажатии на предыдущую или следующую кнопку) вместо того, чтобы сдвигать весь набор, верно?
При нажатии на стрелку миниатюрного изображения я хочу изменить указанное выше большое изображение, основное изображение.

Mr.TK · Answer 1 · 2014-03-20T16-34-00.000Z

Это просто. Привяжите клик по стрелке, чтобы щелкнуть следующий слайд слайдов.

Внимание: если слайд не отображается, сделайте оригинальную стрелочную вещь. :) Он может сделать это сам, но не обязательно.

Это работает :) - протестировано на сайте с примером - просто сделайте это. :)

$('.flex-next').on('click', function(e){ e.preventDefault(); $('.flex-active-slide').next('li').click();

Типичный способ обойти слайдер API;)
Я бы играл с событиями, но не знаю, получил ли the.big.lebowski навыки. :) В своей карьере я играл с исходным кодом нескольких плагинов, включая three.js, mcustomscrollbar ... не помню. :) И еще один пример моей любви к JS-коду:: D gabrielecirulli.github.io/2048 Текущий лучший мой - 168152 - я кое-что изменил в консоли.
Отличная штука, пару раз это приводило к неизвестным проблемам, но, как вы сказали, нужно быть опытным в jQuery :)

the.big.lebowski · Answer 2 · 2014-03-20T16-34-00.000Z

$('.flex-next').on('click', function(e){ e.preventDefault();$('#slider').flexslider('next') });
$('.flex-prev').on('click', function(e){ e.preventDefault();$('#slider').flexslider('previous') });

Привет, ребята, я понял. Его довольно простой, не получилось раньше, было глупо.