jcarousel Отзывчивый и выравнивание элементов - PullRequest
Новая
       39

jcarousel Отзывчивый и выравнивание элементов

0 голосов
/ 06 мая 2019

Я работаю над макетом на основе карусели.Я использую html5, css3 (boostrap 4), jquery и js.Желаемый результат выглядит следующим образом:

Desired Results Я попытался использовать пример работы с отзывом Jcarousel.В настоящее время я работаю на экране MD (ноутбук). Я застрял на проблему

  1. Выравнивание внутренних элементов (наложение текста, а также изображение)
  2. Также,на фронте реагирования.

Current Results Вот оригинальная [Responsive Carousel] (https://sorgalla.com/jcarousel/examples/responsive/)! для оставшихся кодов css и js.

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

Это мой HTML-код. Я сократил свой код, и поэтому вы увидите толькопервый список строк, состоящий из 2 изображений, расположенных рядом. 

        <div class="jcarousel">
            <ul>
                  <li>
                    <div class="item ">
                      <div class="row">
                        <div class="col-md-6 ">
                          <div class="overlay">
                           <img src="jcarousel/images/image1.jpg" class="left-img" alt="Image 1">
                           <p class="p-left">Text Header overlay</p>
                          </div>
                        </div>
                        <div class="col-md-6">
                          <div class="overlay">
                           <img src="jcarousel/images/image2.jpg" class="right-img" alt="Image 2">
                           <p class="p-right">Text Header overlay</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>               
            </ul>
        </div>

        <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
        <a href="#" class="jcarousel-control-next">&rsaquo;</a>

</div>

Это CSS внутренних элементов, т. е. абзаца и элементов изображения. 

.jcarousel img {
    display: block;
    max-width: 100%;

    height: auto !important;
}

.right-img{
    position: absolute;
        left: -50px;
}
.left-img{
    position: absolute;
    left: 50px;
}

.overlay{
     position: relative; 
   width: 100%;

}

.p-right{
    position: absolute;
    top: 190px;
    left: -50px;
    width:100%;
    color: white; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 10px; 
}


.p-left{
    position: absolute;
    top: 190px;
    left: 50px;
    width:100%;

    color: white; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: -1px;  
    background: rgb(0, 0, 0); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
    padding: 10px; 
}
...