Как сделать стрелки ползунка выше - PullRequest
Новая
       12

Как сделать стрелки ползунка выше

0 голосов
/ 27 июня 2018

Я хочу сделать стрелки моего слайдера выше. Я хочу, чтобы они были вытянуты вертикально. Я использую плагин WordPress под названием SmartSlider. Я уже пытался использовать CSS: 

.nextend-arrow{
    width:100px!important;
    height:100px!important;
}

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

.nextend-arrow{
        height:100%!important;
    }

Это предыдущая стрелка (из Chrome inspect): 

<div data-ssleft="0+15" data-sstop="height/2-previousheight/2" id="n2-ss-7-arrow-previous" class="n2-ss-widget n2-ss-widget-display-desktop n2-ss-widget-display-tablet n2-ss-widget-display-mobile n2-style-15840d24d130269e6b64e6608dab2b08-heading nextend-arrow n2-ow nextend-arrow-previous  nextend-arrow-animated-fade n2-ib" style="position: absolute; width: 22.4px; height: 280px; top: 2.5px; left: 15px;" role="button" aria-label="Previous slide" tabindex="0"><img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDMzIDE1Ljk5MkwyMi42OSA1LjcxMmMuMzkzLS4zOS4zOTMtMS4wMyAwLTEuNDItLjM5My0uMzktMS4wMy0uMzktMS40MjMgMGwtMTEuOTggMTAuOTRjLS4yMS4yMS0uMy40OS0uMjg1Ljc2LS4wMTUuMjguMDc1LjU2LjI4NC43N2wxMS45OCAxMC45NGMuMzkzLjM5IDEuMDMuMzkgMS40MjQgMCAuMzkzLS40LjM5My0xLjAzIDAtMS40MmwtMTEuMjU3LTEwLjI5IiBmaWxsPSIjMzcyZjJmIiBvcGFjaXR5PSIwLjUxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=" alt="previous arrow" style="width: 100%;"></div>

<img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDMzIDE1Ljk5MkwyMi42OSA1LjcxMmMuMzkzLS4zOS4zOTMtMS4wMyAwLTEuNDItLjM5My0uMzktMS4wMy0uMzktMS40MjMgMGwtMTEuOTggMTAuOTRjLS4yMS4yMS0uMy40OS0uMjg1Ljc2LS4wMTUuMjguMDc1LjU2LjI4NC43N2wxMS45OCAxMC45NGMuMzkzLjM5IDEuMDMuMzkgMS40MjQgMCAuMzkzLS40LjM5My0xLjAzIDAtMS40MmwtMTEuMjU3LTEwLjI5IiBmaWxsPSIjMzcyZjJmIiBvcGFjaXR5PSIwLjUxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=" alt="previous arrow" style="width: 100%;">

Img находится внутри этого div.

И изображение: Слайдер

Я хочу, чтобы эти стрелки были почти такими же высокими, как ползунок, но тонкими, как сейчас.

Это мой первый пост, извините за плохой язык и спасибо за вашу помощь.

1 Ответ

0 голосов
/ 27 июня 2018

Я бы создал контейнер для них. Дайте контейнеру position: relative;, стрелки - position: absolute;, тогда вы можете использовать 100%.

Причина, по которой height: 100%; сейчас не работает, заключается в том, что браузер не знает, с чем сравнивать 100%, поскольку для родительского элемента не задано height.

...