Элементы навигации Flexslider
Здравствуйте. Проблема в том, что при использовании Flexslider c 3+ слайдами, работает только одна стрелка (PREV), NEXT - не кликабельна.
Если слайда 2, все работает корретно. Помогите пофиксить, заранее спасибо.
$(window).load(function() {
$(".flexslider1").flexslider({
animation: "fade",
easing: "swing",
controlNav: true,
directionNav: true,
})
<section id=services class="section services">
<div class=container>
<header class=section-heading>
<h2>Услуги</h2>
<span>Полный список услуг</span>
</header>
<div class="flexslider1">
<ul class=slides>
<ol class=flex-control-nav></ol>
<li>
<div class=row>
<div class=col-sm-8>
<figure class="about-content center"><img class="img-responsive center-block" src=assets/images/about-us/center_image6.png></figure>
</div>
<div class=col-sm-1>
<div class=line1></div>
</div>
<div class=col-sm-3>
<div class=srv-text>
<b>Разработка логотипов</b>
</div>
</div>
</div>
</li>
<li>
<div class=row>
<div class=col-sm-8>
<figure class="about-content center"><img class="img-responsive center-block" src=assets/images/about-us/center_image2.png></figure>
</div>
<div class=col-sm-1>
<div class=line1></div>
</div>
<div class=col-sm-3>
<div class=srv-text>
<b>Разработка фирменного стиля</b>
</div>
</div>
</div>
</li>
<li>
<div class=row>
<div class=col-sm-8>
<figure class="about-content center"><img class="img-responsive center-block" src=assets/images/about-us/center_image2.png></figure>
</div>
<div class=col-sm-1>
<div class=line1></div>
</div>
<div class=col-sm-3>
<div class=srv-text>
<b>Разработка фирменного стиля</b>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
|
AlienVampire,
смотрите ваше css и html, если кнопка не перекрыта другими элементами , проверьте другие скрипты на предмет отмены клика, а так всё работает.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script type='text/javascript'>
$(window).load(function() {
$(".flexslider1").flexslider({
animation: "fade",
easing: "swing",
controlNav: true,
directionNav: true,
})
})
</script>
</head>
<body>
<section id=services class="section services">
<div class=container>
<header class=section-heading>
<h2>Услуги</h2>
<span>Полный список услуг</span>
</header>
<div class="flexslider1">
<ul class=slides>
<ol class=flex-control-nav></ol>
<li>
<div class=row>
<div class=col-sm-8>
<figure class="about-content center"><img class="img-responsive center-block" src=assets/images/about-us/center_image6.png></figure>
</div>
<div class=col-sm-1>
<div class=line1></div>
</div>
<div class=col-sm-3>
<div class=srv-text>
<b>Разработка логотипов 1</b>
</div>
</div>
</div>
</li>
<li>
<div class=row>
<div class=col-sm-8>
<figure class="about-content center"><img class="img-responsive center-block" src=assets/images/about-us/center_image2.png></figure>
</div>
<div class=col-sm-1>
<div class=line1></div>
</div>
<div class=col-sm-3>
<div class=srv-text>
<b>Разработка фирменного стиля 2</b>
</div>
</div>
</div>
</li>
<li>
<div class=row>
<div class=col-sm-8>
<figure class="about-content center"><img class="img-responsive center-block" src=assets/images/about-us/center_image2.png></figure>
</div>
<div class=col-sm-1>
<div class=line1></div>
</div>
<div class=col-sm-3>
<div class=srv-text>
<b>Разработка фирменного стиля 3</b>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 04:05. |