Search the Community
Showing results for tags 'flexslider'.
-
Доброго времени суток. Столкнулся с проблемой: Есть некий сайт, пстроен на ModxRevo. На главной есть слайдер, реализован с помощью Flexslider. При горизонтальном масштабировании(изменении размеров окна браузера) катринка исчезает Вызов слайдера: <div class="row"> <div class="col-sm-3">[[$sidenav]]</div> <div class="col-sm-9 hidden-sm">[[$slider?set=`set1`]]</div> </div> Чанк слайдера: <!--========== SLIDER ==========--> <div class="flexslider"> <ul class="slides"> [[parseMIGXToGallery? &tpl=`images.gallery.tpl` &input=`[[*ws.images]]` &set=`[[+set]]`]] </ul> </div> <!--========== SLIDER ==========--> Чанк слайда: <li class="slide"> <img class="img-responsive" style="max-width:100%;" src="[[++site_url]][[+image]]" alt="[[+description:htmlentities]]" /> <!-- --> <div class="slide-inner"> <p class="slide-title col-sm-12">[[+title:htmlentities]]</p> <p class="slide-description col-sm-12">[[+description:htmlentities]]</p> </div> <a class="slide-link" href="[[++site_url]][[+link]]">УЗНАТЬ БОЛЬШЕ</a> </li> Помогите решить проблему
-
Здравйствуйте ! у меня возникла проблема ! Я вставил слайдер и картинки все хорошо по задумке нужно кнопки вставить под слайдер ! а сейчас кнопки навигации на слайдере ! я вписал z-index: -5 кнопки встали нормально только вот они потеряли ссылки ! незнаю как исправить чтоб и кпонки были снизу и ссылками они были! вот код слайдера /* * jQuery FlexSlider v1.0 (Release) * http://flex.madebymufffin.com * * Copyright 2011, Tyler Smith * Free to use under the MIT license. * http://www.opensourc...mit-license.php */ /* Необходимые стили для FlexSlider *********************************/ .flexslider { height: 302px; width: 901px; margin: 0; padding: 0; position: relative; } .flexslider .slides li {display: none; list-style-type:none;} /* Скрываем слайды доя загрузки JS. Избегаем дергания изображений */ .flexslider .slides img { height: 302px; width: 901px; display: block; position: relative; right: 0; } /* Тема по умолчанию для FlexSlider *********************************/ .flexslider {} .flexslider .slides li {position: relative;} /* Стиль заголовков */ .flex-caption {width: 849px; padding: 3%; position: absolute; right: 0; bottom: -20px; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 15px; line-height: 18px; overflow:hidden; } /* Навигация */ .flex-direction-nav li a { height: 94px; width: 94px; display: block; } .flex-direction-nav li a.next { background: url(theme/right.png) no-repeat 0 0; position:absolute; top: 100px; left: 860px; } .flex-direction-nav li a.prev { background: url(theme/left.png) no-repeat 0 0; position:absolute; top: 100px; right:860px; z-index:-5; } .flex-direction-nav { list-style-type:none;} вот код style.css /* Theme Name: plus Theme URI: Description: r plus Version: 1.0 Author: Author URI: */ /* Css Document */ * {padding: 0; margin: 0} body { background: #fff; font-family: Arial, Verdana, sans-serif } /*——————————-header———————————*/ .header { background: #fff; width: 901px; margin: 0 auto } .header-top { height: 108px; width: auto } .logo { height: 85px; width: 221px; float: left; padding: 8px 0 17px 0 } .contacts { height: 108px; width: 635px; float: right } .contacts-first span{ font-family: "Arial black", sans-serif; font-size: 11px; font-weight: bold; padding: 19px 40px 0 0; color: #1a1a1a; float: left } .contacts-first span h1{ font-family: arial, regular, sans-serif; font-weight: normal; font-size: 40px; color: #808080 } .contacts-last { position: relative; top:16px; left:35px } .contacts-last ul li { list-style-type:none; line-height: 15px } .contacts-last ul li span { font-family: arial, sans-serif; font-size: 11px } .contacts-last ul li span a{ font-family: arial, sans-serif; font-size: 11px; color:#009245; text-decoration:underline } .contacts-last ul li span a:hover{ font-family: arial, sans-serif; font-size: 11px; color:#009245; text-decoration: none; } .contacts-last ul li a { font-family: arial, sans-serif; font-size: 18px; color: #009245; list-style-type: none; line-height: 20px; text-decoration:none } /*——————————-menu-nav——————————--*/ .menu { background: red; height: 39px; padding: 2px 0 0 0; margin: 0 0 20px 0 } .menu ul li { float:left; list-style-type:none; padding: 0 10px } /*——————————menu-end———————————*/ .slider { width: 901px; height: 302px; position:relative; margin: 0 auto; background: white; -webkit-box-shadow:0 1px 4px #818181; -moz-box-shadow:0 1px 4px #818181; box-shadow:0 1px 4px #818181; } .slider:before, .slider:after { content:""; position:absolute; z-index:-2; } .slider:before { top:10px; bottom:10px; left:0; right:0; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-box-shadow:0 0 15px rgba(0,0,0,0.6); box-shadow:0 0 15px rgba(0,0,0,0.6); -moz-border-radius:10px / 100px; border-radius:10px / 100px; } .slider-fon { position:absolute; top:240px; background-color:white; width:100%; height:62px; opacity:0.8; filter:alpha(opacity=80); } .slider-text { position:absolute; top:243px; left:19px; width:100%; color:black; text-align:center; padding: 9px 0 }