Question

Как переместить переключатели слайдера к предыдущему и следующему слайдам?(Необходимо их поместить к левому и правому краям изображений слайдера) Данный код показывается при вызове кода на главной странице сайта, но в стилях CSS его найти не удаётся.    <ul class="flex-direction-nav"><li><a class="flex-prev" href="#">Previous</a></li><li><a class="flex-next" href="#">Next</a></li></ul>

Answer 1

Попробуйте добавить в таблицу стилей CSS следующие стили:

 .flex-prev {position: absolute;left:0;top:30%;padding:10px;border-radius:50px;background:#fff;} .flex-next {position: absolute;right:0;top:30%;padding:10px;border-radius:50px;background:#fff;}

как-то так, далее стилизируйте эти кнопки переключатели как вам хочется.

Comments

Получилось с правым переключателем, а левый остался без изменений

---

Иван Иванов #25,

Удалите с стилей выше вот этот бред:

 <script>  function collapsElement(id) {  if ( document.getElementById(id).style.display != "none" ) {  document.getElementById(id).style.display = 'none';  }  else {  document.getElementById(id).style.display = '';  }  }  </script>

кто вас учил, что в стили можно устанавливать скрипты, в стилях только стили, не скрипты и не HTML теги там ставить нельзя, для того это таблица стилей, а не HTML шаблон из-за этого скрипта и не сработала правая кнопка, удалите скрипт, после все сработает.

---

Yuri_Geruk,

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

---

Иван Иванов #25,

Чтобы убрать точки и пространство под ними, в стили добавьте:

 ul.flex-direction-nav {height:0;list-style:none;margin-bottom:-20px;} 

по тексту, перейдите в глобальный блок промо, найдите код вида:

 <a class="flex-prev" href="#">Previous</a>

где удалите текст названия кнопки и сохраните изменения.

---

Yuri_Geruk,

Точки убрались, а кода 

   <a class="flex-prev" href="#">Previous</a>   ни в блоке PROMO, ни в стилях CSS нету

---

Иван Иванов #25,

Меняется текст в скрипте - http://9bclass.ucoz.ru/js/jquery.flexslider-min.js загрузите его себе в файловы менеджер я уже удалил текст осталась малость. Перейти в в глобальный блок промо:
  Что заменить:

 <script type="text/javascript" src="/.s/t/1322/jquery.flexslider-min.js"></script>

на что:

 <script type="text/javascript" src="здесь ваша ссылка на скрипт который загрузите в файловый менеджер"></script>

и готово.

---

Yuri_Geruk,

Получилось, отлично, хотелось бы узнать, в каких строках того скрипта можно заменить белые круги на свои изображения, а также сместить их чуть ниже и добавить прозрачность

---

Иван Иванов #25,

Стили что я писал выше:

.flex-prev {position: absolute;left:0;top:30%;padding:10px;border-radius:50px;background:#fff;} .flex-next {position: absolute;right:0;top:30%;padding:10px;border-radius:50px;background:#fff;}

в них произвести изменения:

.flex-prev {position: absolute;left:0;top:30%;padding:10px;border-radius:50px;background:url('ссылка на иконку переключателя предыдущего слайда')no-repeat;} .flex-next {position: absolute;right:0;top:30%;padding:10px;border-radius:50px;background:url('ссылка на иконку перейключения следующего слайда')no-repeat;}

только иконки на переключатели делайте одинаковых размеров чтобы все смотрелось корректно и более менее прилично.