bootstrap карусель слайдер пользовательские стрелки

ОК

Я использую bootstraps Carousel slider, но с пользовательскими изображениями вместо глификонов, поставляемых с ним.

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

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

это html.

<div class="container-fluid banner_fluid">
    <div class="carousel slide" data-ride="carousel" id="carousel_slider">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/home_banner_1.jpg" alt="home slide 1" />
            </div>
            <div class="item">
                <img src="images/home_banner_2.jpg" alt="home slide 1" />
            </div>
            <div class="item">
                <img src="images/home_banner_3.jpg" alt="home slide 1" />
            </div>
        </div>
        <div href="#carousel_slider" class="left carousel-control" data-slide="prev">
            <span>
                <img src="images/chevron_left.jpg" />
            </span>
        </div>
        <div href="#carousel_slider" class="right carousel-control" data-slide="next">
            <span>
                <img src="images/chevron_right.jpg" />
            </span>
        </div>
    </div>
</div>

я использовал инструменты разработчика для быстрого просмотра и тестера для разных опций. Абсолютная позиция не работает. Есть ли другой способ сделать это, так что они появляются в таком же положении, как и оригинал glyphicons и тоже отвечать?

Изображение с предложенным исправлением на нем...The right seems to be only problem though.

изменения, внесенные в код до сих пор является добавление css и img-отзывчивые в классе карусели контролируют себя сами.

------------- баннер ----------------*/

 .banner_fluid {
   padding-left:0;
   padding-right:0;
}

.carousel-control {
    position: absolute;
    top: 50%; /* pushes the icon in the middle of the height */
     z-index: 5;
    display: inline-block;

}

другой код, который я пробовал, дал эффект отлично, но только в режиме рабочего стола.

7
css html twitter-bootstrap

2 ответов

добавьте это в свой файл CSS:

.carousel-control {
position: absolute;
top: 50%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}
6

основываясь на ответе stylesenberg, вы должны добавить этот код, однако, вместо вызова .carousel-control, который будет нажимать всю кнопку на 50%, вместо этого вызовите элемент img. Кроме того, вы хотели бы переместить элемент img на 50% от его высоты, чтобы он был идеально центром.

обновление 1: Я добавил translate (-50%, -50%), чтобы сдвинуть кнопки влево, если они не будут смещены <span> элемент.

.carousel-control > span > img{        
    position: absolute;
    /*set position of image from top to be 50%...*/
    top: 50%;
    /*and then shift it down to make it perfectly center.*/
    transform: translate(-50%, -50%);

    z-index: 5;
    display: inline-block;
}

обновление 2: я только что понял что это можно сделать намного проще. Поскольку вы используете пользовательские стрелки слайдера,<span> элемент не нужен. Таким образом, ваш html-код может быть просто:

<a class="left carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel"  role="button" data-slide="prev">
  <img src="chevron-left.png" />
</a>

<a class="right carousel-control" href="https://getbootstrap.com/examples/carousel/#myCarousel"  role="button" data-slide="next">
  <img src="chevron-right.png" />
</a>

и просто удалите "span" из css.

0