Flexslider

Michael Myers · June 2, 2013

http://www.woothemes.com/flexslider/

Решил воспользоваться этим слайдером, т.к. он адаптивный. Все работает, кроме того, что стрелки передвижения слайдов не visible. Они есть, т.к. при наведении курсора курсор меняется. Я сделал отдельный документ *.html без другого контента, только слайдер. Стрелки появились. Следовательно проблема в родителях, но мне ее не найти. Помогите пожалуйста!

Вот css для стрелок:


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(components/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px;}
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

А вот css для всех родителей по порядку:


body{
    max-width: 1200px;
    margin: 0 auto;
background: url(bg.gif);
	    height: 1700px;
}
#wrap{
    height: 100%;
}
.main{
height:100%;
	    padding-top: 3.5%;
	    border: none;
	    background: url(main-bg.gif);
	    background-origin: border-box;
	    background-position: right 222% top;
	    float: left;
	    width: 70%;
}
.img_slides{
	    margin-left: 10%;
	    width: 80%;
    }

Вот сама html структура:


<html>
    <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
	    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	   <link rel="stylesheet" href="styles/flexslider.css" type="text/css">
	   <script src="js/jquery.flexslider-min.js"></script>
<link media="screen" href="styles/main.css" rel="stylesheet" type="text/css"/>
	    <link rel="stylesheet" href="styles/flexslider.css" type="text/css">
	    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
	    <div id="wrap">
  <div class="main">
				 <div class="img_slides">
				 <div class="flexslider">
					  <ul class="slides">
		    <li>
		    <img src="components/anonymous.jpg" />
				    <div class="img_note">Мы приветствуем тебя, дорогой друг!</div>
		 </li>
		 <li>
		    <img src="components/read_us.jpg" />
				    <div class="img_note">Подписывайся и читай нас!</div>
		 </li>
		 <li>
		    <img src="components/spy.jpg" />
		 </li>
		 <li>
		    <img src="components/anonymous.jpg" />
		 </li>
		  </ul>
	    </div>
	    </div>
<script>
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "fade",
    touch: true,
    controlNav: true,
    directionNav: true
  });
});
	    </script>
</div>
</html>

[не ] - not[not] не, нет, ни; [no] не, нет; [n't] не, нет, ни

zlodeev · June 2, 2013

Во-первых, два раза подключаете одни и те же стили <link rel="stylesheet" href="styles/flexslider.css" type="text/css">

Во-вторых, очень сложно что-то определить о неработающем слайдере, когда не видишь даже куска кода со всеми стилями, включая стили для a,ul,li. Возможно, проблема в них.

Если кнопки есть, но их не видно, то надо смотреть на фон для .flex-direction-nav { a background: url(../images/bg_direction_nav.png) no-repeat 0 0;} Мне кажется, что вы могли напутать с каталогами для изображений слайдера и он их попросту не видит. Чтобы это проверить, зайдите в консоль ошибок (F12 в Chrome, последняя вкладка - console) и если там имеются записи Failed to load resource для картинок bg_direction_nav.png, значит вы не туда скинули папку images из архива слайдера

Radiocity · June 2, 2013

Ссылку, где слайдер расположен, пришлите.

Michael Myers · June 3, 2013

http://www.woothemes.com/flexslider/

[] -

Да, простите. Все-таки проблема в путях. Забыл, что путь указываю из .css, а не из .html . Спасибо!

[] -

Sign In

Flexslider

Question

Michael Myers

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

zlodeev

Link to comment

Share on other sites

Radiocity

Link to comment

Share on other sites

Michael Myers

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information