Question

Доброго времени суток!

Почитал несколько вопросов на эту тему, но ответа так и не нашел.

Суть в чем - нужен слайдер, ну или что-то вроде того - набор картинок, щелкая на которые можно будет перейти на определенную страницу сайта. Картинки должны автоматически прокручиваться по кругу.

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

 

Это код на странице:

<div id="slider">
 <ul class="slides">
 <li class="slide">
 <img src="/Picture-link/egeh.png" alt="">
 <div class="caption">
 <div class="cap-ttl">ЕГЭ</div>
 <div class="cap-ds description">Единый государственный экзамен 11 класс</div>
 <div class="cap-ds"><a role="button" href="/index/0-21">More</a></div>
 </div>
 </li>
 <li class="slide">
 <img src="/Picture-link/gia.png" alt="">
 <div class="caption">
 <div class="cap-ttl">ОГЭ</div>
 <div class="cap-ds description">Основной Государственный экзамен 9 класс</div>
 <div class="cap-ds"><a role="button" href="/index/osnovnoi_gosudarstvenniy_ekzamen_oge/0-112">More</a></div>
 </div>
 </li>
 <li class="slide">
 <img src="/Picture-link/ehkzh.png" alt="">
 <div class="caption">
 <div class="cap-ttl">ЭКЖ</div>
 <div class="cap-ds description">Электронный классный журнал (дн)</div>
 <div class="cap-ds"><a role="button" href="/index/page_3/0-321">More</a></div>
 </div>
 </li>
 <li class="slide">
 <img src="/vosp_rabota/19-20/ZberpEqaE5E.jpg" alt="">
 <div class="caption">
 <div class="cap-ttl">Воспитательная работа</div>
 <div class="cap-ds description">Наши мероприятия</div>
 <div class="cap-ds"><a role="button" href="/index/mer_19_20/0-427">More</a></div>
 </div>
 </li>
 </ul>
 <div class="custom-navigation">
 <i class="material-icons flex-prev">keyboard_arrow_left</i>
 <div class="custom-controls-container"></div>
 <i class="material-icons flex-next">keyboard_arrow_right</i>
 </div>
 </div>
 <script type="text/javascript" src="/.s/t/1710/jquery.flexslider-min.js"></script>
 <script>
 $(function(){
 $('#slider').flexslider({
 animation: "slide",
 slideshowSpeed: 6000,
 controlsContainer: $(".custom-controls-container"),
 customDirectionNav: $(".custom-navigation i")
 });
 })
 </script>

 

Это вставил в стили CSS

.slides,.slide{padding:0;margin:0;list-style:none}
.slide:first-child{display:block}
.slide img{display:block;padding:0;margin:0}
.caption{position:absolute;left:50%;top:40%;width:70%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff;z-index:15}
.cap-ttl{padding:20px 20px 10px;text-transform:uppercase;font-family:Cuprum;font-size:37px}
.cap-ttl a{color:#fff}
.cap-ds{padding:0 20px 30px;font-size:14px} 
#slider{width: 1200px; margin: 0 auto;text-align:center;position:relative;overflow:hidden}
.custom-navigation,.custom-controls-container{bottom:0;z-index:10}
.flex-control-nav{margin:0;padding:0;list-style:none;position:absolute;bottom:25px;text-align:center;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:inline-block;z-index:1}
i.material-icons.flex-prev,i.material-icons.flex-next{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);padding:15px;margin:0 30px;background-color:rgba(31,38,64,0.5);color:#e64c53;cursor:pointer;border-radius:5px;z-index:15;transition:all .15s ease}
i.material-icons.flex-prev:hover,i.material-icons.flex-next:hover{color:#fff;padding:22px;box-shadow:0 2px 5px rgba(0,0,0,0.15);background-image:linear-gradient(to top,#e64c53 0,#f25058 100%);transition:all .15s ease}
i.material-icons.flex-prev:active,i.material-icons.flex-next:active{padding:15px;box-shadow:0 0 0 rgba(0,0,0,0.15);background-image:linear-gradient(to top,#e64c53 0,#d9484f 100%);transition:all .15s ease}
i.material-icons.flex-next{right:0}
i.material-icons.flex-prev{left:0}
.flex-control-nav li{margin:0 16px 20px;display:inline-block;position:relative}
.flex-control-paging li a{position:absolute;width:20px;height:20px;display:block;cursor:pointer;background-color:rgba(31,38,64,0.5);text-indent:74px;overflow:hidden;white-space:nowrap;border-radius:4px;z-index:15;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.flex-control-paging li a.flex-active:after{background:#fff}
.flex-control-paging li a:not(.flex-active):hover{width:24px;height:24px}
.flex-control-paging li a:not(.flex-active):hover:after{width:10px;height:10px}
.flex-control-paging li a:not(.flex-active):active{width:20px;height:20px}
.flex-control-paging li a:not(.flex-active):active:after{width:8px;height:8px;background-color:#cc434a}
.flex-control-paging li a.flex-active{cursor:default}
.flex-control-paging li a:after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;display:block;background-color:#e64c53;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} 

@media only screen and (max-width:960px){
 .cap-ttl{padding:15px 20px 10px;font-size:18px}
 .cap-ds{padding:0 20px 30px}
}
@media only screen and (max-width:640px){
 .cap-ds{padding:7px 10px 15px}
 .caption{width:100%}
 i.material-icons.flex-prev,i.material-icons.flex-next{top:75%;margin:0 5px}
 .cap-ttl{font-size:15px}
 .cap-ds{font-size:12px}
}
@media only screen and (max-width:480px){
 .cap-ttl{padding:10px 20px;font-size:14px}
 .cap-ds.description,i.material-icons.flex-prev,i.material-icons.flex-next,.smilesPart{display:none}
}

 

Comments

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

Нашёл ещё вот такой вариант - он даже больше меня устраивает. Вариант autoplay. Но тоже ничего не получилось.

В общем, подскажите как быть, где ошибки, или может что-то другое можно использовать?

Answer 1

Как вариант, попробуйте в общих настройках сайта переключить версию квери с 1.12.4 на 3.3.1 http://joxi.ru/RmzEX0atY6W6Dr

Comments

Спасибо, попробовал - то же самое...

---

Андрей Овсиенко,

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

 <i class="material-icons flex-prev">keyboard_arrow_left</i>
 <div class="custom-controls-container"></div>
 <i class="material-icons flex-next">keyboard_arrow_right</i>

замените его на:

 <i class="material-icons flex-prev"><img src="ссылка на фото стрелку влево"></i>
 <div class="custom-controls-container"></div>
 <i class="material-icons flex-next"><img src="ссылка на фото стрелку вправо"></i>

---

Yuri_Geruk,

Хорошо, спасибо, попробую так. А само отображение? На образце Заголовок, Описание и Кнопка накладываются на изображение, а у меня нет...

Может есть слайдер попроще, типа этого - вариант autoplay?

Или как сделать его уже, чтобы сразу несколько картинок отображалось, а остальные прокручивались?

---

Андрей Овсиенко,

Слайдер работает отлично и текст не накладывается. У вас фото маленькие, а должны быть большие, в итоге текст в слайдах белый и фон сайт белый, думаю понимаете почему его не видно, фото делайте нормальных размеров под размеры слайдера.

---

Yuri_Geruk,

Ну ввобще-то я пробовал и маленькие и большие, Текст прекрасно видно под фото и большим и маленьким, причем очень маленьким шрифтом, Кнопка MORE отображается как ссылка, поэтому и говорю, что такое впечатление, что код работает наполовину, а если быть точным - от него осталась только смена слайдов и все. В примере все это прекрасно видно - (слайдер 1710 - там и стрелки есть, и шрифт отформатирован и разные размеры для заголовка и для описания, и кнопка More), добавил еще несколько фото для пробы https://xn--8-dtbgbocfjdbg0bb2bf2e.xn--p1ai/index/test/0-435 все равно, ни стрелок, ни оформления, и кнопка More в виде ссылки...

---

Андрей Овсиенко,

Здесь проблема в другом, в том, что конкретно под ваш дизайн слайдер еще нужно настраивать. За настройкой обращайтесь к специалистам на https://upartner.pro/ или https://divly.ru/

---

Yuri_Geruk,

Спасибо. Может подскажете какой слайдер будет работать без донастройки? Может 1708 или 1716? Или в любом случае надо будет обращаться к специалистам?

---

Андрей Овсиенко,

Посмотрите примеры https://www.ucoz.ru/qa/index.php/5401 в моем ответе дан простенький слайдер. По других слайдерах нужно пробовать, я не знаю как поведет себя слайдер на вашем сайте когда вы крепите фото разных размеров и маленькие и слишком маленькие в итоге все смещается и нужно настраивать.

---

Yuri_Geruk,

Попробовал из другой инструкции (отсюда: https://manual.ucoz.net/board/10-1-0-462) результат можно увидеть здесь: https://xn--8-dtbgbocfjdbg0bb2bf2e.xn--p1ai/index/test_2/0-436#

В файловом менеджере в корне создал папку Demo1, внутрь скачал все файлы из архива для установки, в том числе все картинки из примера.

 

Содержимое папки Demo1

В стили скопировал код CSS

 

Код CSS

.container {width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;}
#example {width:600px;height:350px;position:relative;}
#ribbon {position:absolute;top:-3px;left:-15px;z-index:500;}
#frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;}
#slides {position:absolute;top:15px;left:4px;z-index:100;}
.slides_container {width:570px;overflow:hidden;position:relative;display:none;}
.slides_container div.slide {width:570px;height:270px;display:block;}
#slides .next, #slides .prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}
#slides .next {left:585px;}
.pagination {margin:26px auto 0;width:100px;}
.pagination li {float:left;margin:0 1px;list-style:none;}
.pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(paginati.png);background-position:0 0;float:left;overflow:hidden;}
.pagination li.current a {background-position:0 -12px;}
.caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 20px 0 20px;background:#000;background:rgba(0, 0, 0, .5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid #000;text-shadow:none;}
.slide{position: absolute; top: 0px; left: 570px; display: none; z-index: 0;}

На странице разместил вот такой код на основе index.html из архива для установки:

 

Код на странице

<html>
<head>
<title>Demo1</title>
<link rel="stylesheet" href="/Demo1/demo.css">
<script type="text/javascript" src="http://s1.ucoz.net/src/jquery-1.6.1.js"></script>
<script type="text/javascript" src="/Demo1/slides.js"></script> 
 <script type="text/javascript"> 
 $(function(){ 
 $('#slides').slides({ 
 preload: true, 
 preloadImage: 'loading.gif', 
 play: 5000, 
 pause: 2500, 
 hoverPause: true, 
 animationStart: function(current){ 
 $('.caption').animate({ 
 bottom:-35 
 },100); 
 if (window.console && console.log) { 
 console.log('animationStart on slide: ', current); 
 }; 
 }, 
 animationComplete: function(current){ 
 $('.caption').animate({ 
 bottom:0 
 },200); 
 if (window.console && console.log) { 
 console.log('animationComplete on slide: ', current); 
 }; 
 }, 
 slidesLoaded: function() { 
 $('.caption').animate({ 
 bottom:0 
 },200); 
 } 
 }); 
 });</script>
</head>
<body>
<div class="container" id="example"><div id="slides"><div class="slides_container"> 

 <div class="slide"> 
 <a href="#"><img src="/Demo1/slide-10.jpg" width="570" height="270" alt="Slide 1"></a> 
 <div class="caption" style="bottom:0"><p>Логотип uCoz</p> 
 </div></div> 

 <div class="slide"> 
 <a href="#"><img src="/Demo1/slide-20.jpg" width="570" height="270" alt="Slide 2"></a> 
 <div class="caption"> 
 <p>Тут описание</p> 
 </div></div> 

 <div class="slide"> 
 <a href="#"><img src="/Demo1/slide-30.jpg" width="570" height="270" alt="Slide 3"></a> 
 <div class="caption"> 
 <p>Opa Gangnam Style :D</p> 
 </div></div> 

 <div class="slide"> 
 <a href="#"><img src="/Demo1/slide-40.jpg" width="570" height="270" alt="Slide 4"></a> 
 <div class="caption"> 
 <p>Описание текста, представим, что тут много текста.</p> 
 </div></div> 

 <div class="slide"> 
 <a href="#"><img src="/Demo1/slide-50.jpg" width="570" height="270" alt="Slide 5"></a> 
 <div class="caption"> 
 <p>Описание</p> 
 </div></div> 

 <div class="slide"> 
 <a href="#"><img src="/Demo1/slide-60.jpg" width="570" height="270" alt="Slide 6"></a> 
 <div class="caption"> 
 <p>Логотип uCoz'a</p> 
 </div></div> 

 <div class="slide"> 
 <a href="#"><img src="/Demo1/slide-70.jpg" width="570" height="270" alt="Slide 7"></a> 
 <div class="caption"> 
 <p>Логотип uCoz'a</p> 
 </div></div> 
 </div> 

 <a href="#" class="prev"><img src="/Demo1/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> 
 <a href="#" class="next"><img src="/Demo1/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> 

 </div> 
 <img src="/Demo1/example-.png" width="739" height="341" alt="Example Frame" id="frame"> 
 </div>
</body>
</html>

Постарался вроде бы везде заменить участи кода со ссылками на картинки и необходимые файлы. Опять частично что-то появилось, но не работает...

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

---

Андрей Овсиенко,

Не дублируйте на страницу код:

<html><head><title>Demo1</title><body></body></html>

 он там не нужен.  Скрипт:

<script type="text/javascript" src="http://s1.ucoz.net/src/jquery-1.6.1.js"></script>

замените на:

<script type="text/javascript" src="https://s1.ucoz.net/src/jquery-1.6.1.js"></script>

---

Yuri_Geruk,

Огромное спасибо, убрал лишнее и зменил ссылку на скрипт. Почти все заработало, проблема только с подписями к картинкам - они явно не на своем месте и смещены. Если не трудно, подкажите, как можно подправить!

---

Андрей Овсиенко,

Замените все стили в файле https://xn--8-dtbgbocfjdbg0bb2bf2e.xn--p1ai/Demo1/demo.css на стили:

 #slides {position:absolute;top:15px;left:4px;z-index:100;} 
.slides_container {width:570px;overflow:hidden;position:relative;display:none;} 
.slides_container div.slide {width:570px;height:270px;display:block;} 
#slides .next, #slides .prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}
#slides .next {left:585px;} 
.pagination {margin:26px auto 0;width:100px;} 
.pagination li {float:left;margin:0 1px;list-style:none;} 
.pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(paginati.png);background-position:0 0;float:left;overflow:hidden;} 
.pagination li.current a {background-position:0 -12px;} 
.caption {z-index:500;position:absolute;top:88%;bottom:-35px;left:280px;height:30px;padding:20px;background:#000;background:rgba(0, 0, 0, .5);width:540px;font-size:1.3em;line-height:1.33;color:#fff!important;border:0;text-shadow:none;} 
.caption p {color:#fff!important;position:relative;top:-8px;}
.slide{position: absolute; top: 0px; left: 570px; display: none; z-index: 0;}

после должно быть все корректно.

---

Yuri_Geruk,

Да, все заработало, БОЛЬШОЕ спасибо Вам за помощь!

---

Yuri_Geruk,

На не широкоформатном димплее все развалилось - сама рамка в одном месте страницы, слайд-шоу в другом месте страницы, ширина страницы сайта поползла... Возможно ли это исправить?

---

Андрей Овсиенко,

Не стоило ожидать идеального отображения так как слайдер простой и не адаптивный. Исправить возможно лишь адаптацией для мобильных. Обращайтесь к фрилансерам на https://upartner.pro/ или https://divly.ru/

---

Yuri_Geruk,

Как правильно добавить слайд в конструкцию? Или 7 слайдов - максимальное число?

---

Андрей Овсиенко,

добавьте еще один блок междупредпоследним таким же и последним

 <div class="slide"> 
 <a href="#"><img src="/Demo1/slide-60.jpg" width="570" height="270" alt="Slide 7"></a> 
 <div class="caption"> 
 <p>Логотип uCoz'a</p> 
 </div></div> 

---

webanet,

Спасибо! И ещё, если не трудно один вопрос - после добавления еще одного слайда, точка, которая внизу под слайдами показывает сколько их по количеству перенеслась на следующую строку (наверное не поместилась в widht который под них прописан), как можно увеличить место под нее?

---

Андрей Овсиенко,

в этой строчке пробуйте регулировать .pagination {margin:26px auto 0;width:100px;} 

---

webanet,

Большое спасибо, все получилось!