Как в слайдшоу заменить слова "вперед", "назад" и "пауза" на стрелки?

Главные вкладки

Аватар пользователя Kitsune Kitsune 15 августа 2017 в 12:22

Здравствуйте! Пожалуйста, помогите чайнику снова! Установила view slideshow. Когда настал черед создавать элементы управления слайд шоу, получилось создать только текстовое управление. А мне бы хотелось сделать стрелки. Просмотрела в инете, наткнулась на этот код:

#block-views-block-slideshow-block-1 {
max-height:450px;
overflow:hidden;
}
#block-views-block-slideshow-block-1 .view-content {
position: relative;
max-width:1170px;
margin: 0 auto;
}
#block-views-block-slideshow-block-1 .view-content div {}
#block-views-block-slideshow-block-1 .view-content .views-row {
margin: 0 !important;
padding: 0 !important;
border-bottom:0 !important;
}
.view-id-slideshow a {
width:100%;
}
.view-id-slideshow img {
display:block;
padding:0;
margin:0;
border:0;
width:100%;
}
.view-id-slideshow .views_slideshow_slide a {
position:relative;
display: inline-block;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-bottom {
position: absolute;
bottom: 40%;
z-index: 10;
width:100%;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_pause {
display:none;}
#block-views-block-slideshow-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_previous {
float:left;
left:2%;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_previous a {
font-size:0;
display:inline-block;
height: 67px;
width:36px;
background: url(http://.../) no-repeat;
background-size:100%;
opacity: 0.4;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_next {
float:right;
right:2%;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_next a {
font-size:0;
display:inline-block;
height: 67px;
width:36px;
background: url(http://.../) no-repeat;
background-size:100%;
opacity: 0.4;
}

Он мне не помог, я снова писала его custom-style.css

Комментарии

Аватар пользователя Kitsune Kitsune 15 августа 2017 в 12:39

Я сделала скрины своего html. я не нашла среди него этот класс .views-slideshow-controls-bottom. Так и должно быть? Помогите, пожалуйста!

Аватар пользователя Mihail.space Mihail.space 15 августа 2017 в 13:30

Вам нужны хотя бы базовые знания html и css и тогда такие вопросы вы будете со скоростью 100 миль в час.
В папке модуля есть директория templates
В этой директории есть нужные вам шаблоны, в которых выводятся искомые ссылки
control views slideshow
Посмотрите какие там классы и по ним делайте выборку в css. В принципе вы все это можете увидеть через f12 в браузере.
Если вышеописанное вам не понятно, давайте ссыль на сайт.

Аватар пользователя Kitsune Kitsune 15 августа 2017 в 13:45

Элементарные знания в html и css есть, но как я говорила чайник, начинающий. да, я вот сделала скрины (они в комментарии), только я не нажимала F12+Fn, просто нажала на Просмотреть код Smile я занимаюсь редактированием через Putty. твиги за весь процесс создания сайта не разу не редактировала. вы, как человек знающий, с опытом, можете, пожалуйста, подсказать как редактировать это в css . тот код что я нашла в инете и написала он верен? мне стоит с ним продолжить работать?

Аватар пользователя Mihail.space Mihail.space 15 августа 2017 в 14:01

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

.youclass a{
background: url(http://.../путь до изображения) no-repeat;
color: transparent;
}

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

Аватар пользователя Mihail.space Mihail.space 15 августа 2017 в 14:41

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

 <a  class="prev">&#10094;</a>
 <a class="next">&#10095;</a>

и далее оформить их в css по типу

.prev, .next{
border-radius: 0 3px 3px 0;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    margin-top: -22px;
    padding: 16px;
position: absolute;
    top: 50%;
}
.next{
right:10px;
}
.prev{
left:10px;
}
.prev:hover, .next:hover{
background: rgba(0,0,0,.8):
}

Но это к самому друпалу уже отношения не имеет.
Коды символов https://jordanhipwell.com/UniChar/app/#Parentheses-HEAVY+LEFT-POINTING+A...

Аватар пользователя Kitsune Kitsune 17 августа 2017 в 15:57

В итоге я психанула и поменяла в твигах. получилось! но опять вопрос возник как сделать чтоб картинка "пауза" и "плэй" менялись и не появлялся текст при наведении на слайд.

Аватар пользователя Kitsune Kitsune 16 августа 2017 в 14:37

Используя найденный в интернете код, я попыталась создать свой. И вышло у меня примерно так:
#block-views-block-slideshow-block-1 {
max-height:450px;
overflow:hidden;
}
#block-views-block-slideshow-block-1 .content {
position: relative;
max-width:1170px;
margin: 0 auto;
}
#block-views-block-slideshow-block-1 .content div {}
#block-views-block-slideshow-block-1 .content .row {
margin: 0 !important;
padding: 0 !important;
border-top:0 !important;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-top.clearfix {
position: absolute;
top: 40%;
z-index: 10;
width:100%;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-top.clearfix .views_slideshow_controls_text_pause {
display:none;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-top.clearfix .view_slideshow_controls_text_previous.views-slideshow-controls-text-previous-processed {
float:left;
left:2%;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-top.clearfix .view_slideshow_controls_text_previous.views-slideshow-controls-text-previous-processed a {
font-size:0;
display:inline-block;
height: 67px;
width:36px;
background: url(http://.../images/arrow_left_0.png) no-repeat;
background-size:100%;
opacity: 0.4;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-top.clearfix .views_slideshow_controls_text_next.views-slideshow-controls-text-next-processed {
float:right;
right:2%;
}
#block-views-block-slideshow-block-1 .views-slideshow-controls-top.clearfix .views_slideshow_controls_text_next.views-slideshow-controls-text-next-processed a {
font-size:0;
display:inline-block;
height: 67px;
width:36px;
background: url(http://.../images/arrow_right_0.png) no-repeat;
background-size:100%;
opacity: 0.4;
}

Но вот никак не могу понять где у меня аналог вот этих двух кодов:

.view-id-slideshow a {
width:100%;
}
.view-id-slideshow img {
display:block;
padding:0;
margin:0;
border:0;
width:100%;
}
Пожалуйста, помогите разобраться, а то голова что-то "не варит"

Аватар пользователя tlito tlito 16 августа 2017 в 21:24

обратите внимние на блок с классом views-slidhow-controls-top в вашем коде.
вы можете добавить каждой стрелке опцию {display:none;}
и вместе с тем добавить псевдоэлемент :after { display:block;width:50px;height:80px;background:url(/images/arrow.png); }

Аватар пользователя Kitsune Kitsune 17 августа 2017 в 7:20

у меня в том коде это вот одна строка вышла: #block-views-block-slideshow-block-1 .views-slideshow-controls-top.clearfix .views_slideshow_controls_text_pause {

я попыталась повторить вот это: #block-views-block-slideshow-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_pause {

конечно я рассматривала и такой вариант:
.views-slideshow-controls-bottom.clearfix {

position: absolute;

top: 350px;

right: 300px;

margin-top: 10px;
}

Кстати их стоит прописывать их в css-файл control text или в файл стиля? просто я поискала информацию, в итоге получилось такое деление.

Аватар пользователя BatKor BatKor 17 августа 2017 в 16:55

Сколько муки?
Не проще слик поставить если как модулем так и напрямую можно подключить.
Wtf?
Зачем ТС мучаете?

Аватар пользователя Kitsune Kitsune 18 августа 2017 в 7:08

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

Аватар пользователя BatKor BatKor 18 августа 2017 в 11:24

Попытаюсь ответить в сравнении.
Начало примера -->
Эстетические проблемы организма человека = Сайт, WEB, и все производные.
Косметология = CMS
Вакуумный аппарат ультразвуковой кавитации = view slideshow
Конец примера --<
View slideshow это инструмент для достижения результата, так же как Вакуумный аппарат. но вы как и с Вакуумным аппааратом должны понимать принцип работы иначе вы можете нанести вред человеку.

П.С. Если вы не добились результата и топик еще актуален, то попробуйте на кодепене сделать слайдер, например по документации слик. Надеюсь у вас сформируется здоровое представление о слайдерах и подобные вопросы по слайдеру у вас больше не возникнут.

Аватар пользователя @@@ @@@ 18 августа 2017 в 9:20

Kitsune wrote:

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

Это пять!))
Ссылку на сайт дадите или он на локальной машине?

Аватар пользователя Kitsune Kitsune 18 августа 2017 в 12:19

пока он на машине, но в принципе последний штрих остался, и на старт! Smile Но думаю я уже так и оставлю, потому что выглядит нормально, а главное кнопочки слайда теперь есть, конечно я не стала добавлять их прям на слайд, а просто аккуратненько разместила снизу Smile

Аватар пользователя @@@ @@@ 18 августа 2017 в 12:52

Покажите потом, как разместите сайт в сети, что вам принесло столько положительных эмоций?))))
Радость от- у меня получилось- того стоит))
Будет интересно посмотреть)