У меня сейчас проблема с тем, что моя галерея изображений flexslider инициализируется при загрузке страницы и нарушает функциональность.Это связано с тем, что flexslider содержится в свернутой вкладке jquery для мобильных устройств, для которой установлено значение display: none.
Фактический div, который содержит сворачиваемое содержимое, создается в мобильном скрипте jquery и не может иметь пользовательский идентификатор, прикрепленный к нему во внешнем интерфейсе.Я вставил дополнительный контейнер, для которого установлено значение display:none, чтобы я мог инициализировать ползунок после того, как этот элемент станет видимым.
Это код, который у меня сейчас есть и не работает:
<script type="text/javascript">
$(document).ready(function(){
$('#first_tab').click(function(){
$('#slider_contents').css('display', 'block'){
});
});
if ($('#slider_contents').is(':visible')) {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container"
});
} else {}
});
</script>
HTML-разметка:
<div data-role="collapsible" id="first_tab">
<h3>WORK</h3>
<div id="slider_contents">
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/inacup_samoa.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<a href="#"><img src="img/inacup_pumpkin.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="img/inacup_donut.jpg" />
</li>
<li>
<img src="img/inacup_vanilla.jpg" />
</li>
</ul>
</div>
</div>
</div>
CSS-стили:
#slider_contents{
max-width: 620px;
margin: 0 auto;
display: none;
}
.flexslider {width: 100%; margin: 0; padding: 0;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
Любая помощь будет принята с благодарностью.Я пробовал так много разных вещей, но ничего не получается.
Спасибо