По нажатию на <a> нужен клик на li
 

Всем привет, уже задавал этот вопрос на другом форуме, но как то тихо там.. может здесь люди поотзывчивее.
Слайдер имеет большое окно(картинку) и под ним кучу маленьких(для выбора какую выводить на большое окно). Есть стрелки перелистывания вперед назад для маленьких картинок, но нет для больших.
Задача: перелистывать стрелками вперед/назад изображение в большом окне.
Слайдер встроен в тему и настроке слайдера нет, чтобы изменить это из админки. Сам код написан в .twig файле.

мыслю в сторону: document.getElementBy.Class ('active').nextSibling.click()

но увы не столь опытен, чтобы знать как верно это прописать, чтобы все работало.

Буду благодарен идеям.



Код:
{% if wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
<div class="carousel property">
<div class="preview">
<a href="{{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" class="fancybox">
<img src="{{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" alt="">
</a>
</div>
<!-- /.preview -->

<div class="content">
<ul>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if loop.first %}
<li class="active">
{% else %}
<li>
{% endif %}
<img src="{{ slide.imgurl }}" alt="">
</li>
{% endfor %}
</ul>

<a id="carousel-prev" href="#">{{ wp.__('Previous', 'aviators') }}</a>
<a id="carousel-next" href="#">{{ wp.__('Next', 'aviators') }}</a>
</div>
<!-- /.content -->
</div><!-- /.carousel -->
{% endif %}


основное выделил жинмым
Сам слайдер: http://vidnamore.com/properties/3412-cloudcroft-dr-2/

Ты хоть пример путний сделай для начала...

Эм...что то непонятно написано, или в чем вопрос?

Ура!! Нашел решени через одно место..подскажите теперь как это в нормальном виде записать)):)



{% if wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
<div class="carousel property">
<div class="preview">
<a href="{{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" class="fancybox">
<img id="img_prev" src="{{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" alt="">
</a>
</div>
<!-- /.preview -->

<div class="content">
<ul>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE)|slice(0, 10) %}
{% if loop.first %}
<li id="li{{ loop.index }}" class="active">
{% else %}
<li id="li{{ loop.index }}">
{% endif %}
<img id="img{{ loop.index }}" src="{{ slide.imgurl }}" alt="">
</li>
{% endfor %}
</ul>


<a id="carousel-prev" href="#">{{ wp.__('Previous', 'aviators') }}</a>
<a id="carousel-next" href="#" onclick="var i=1;
while (i<9) {
if (li1.className.match(/\active\b/)) {
li2.className = 'active'; li1.className = '';
img_prev.src=img2.src;
break;
}
if (li2.className.match(/\active\b/)) {
li3.className = 'active'; li2.className = '';
img_prev.src=img3.src;
break;
}
if (li3.className.match(/\active\b/)) {
li4.className = 'active'; li3.className = '';
img_prev.src=img4.src;
break;
}
if (li4.className.match(/\active\b/)) {
li5.className = 'active'; li4.className = '';
img_prev.src=img5.src;
break;
}
if (li5.className.match(/\active\b/)) {
li6.className = 'active'; li5.className = '';
img_prev.src=img6.src;
break;
}
if (li6.className.match(/\active\b/)) {
li7.className = 'active'; li6.className = '';
img_prev.src=img7.src;
break;
}
if (li7.className.match(/\active\b/)) {
li8.className = 'active'; li7.className = '';
img_prev.src=img8.src;
break;
}
if (li8.className.match(/\active\b/)) {
li1.className = 'active'; li8.className = '';
img_prev.src=img1.src;
break;
}
}">
{{ wp.__('Next', 'aviators') }}</a>


</div>
<!-- /.content -->
</div><!-- /.carousel -->
{% endif %}