Нужна помощь по адаптации слайдера

вопрос

Здравствуйте! Нужна помощь со слайдером. Начал верстать получается такая беда:

А нужно так:

Код HTML:

Показать / Скрыть текст

             <div id="myCarousel" class="carousel slide" data-ride="carousel">
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="item active">
          <div class="car"><img src="img/1.jpg" alt=""/></div>
           <div class="carousel-caption">
            <h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div>
 
         <div class="item">
          <div class="car"><img src="img/2.jpg" alt=""/></div>
           <div class="carousel-caption">
            <h4><a href="#">consetetur sadipscing elitr, sed diam nonumy eirmod</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div>
        
        <div class="item">
          <div class="car"><img src="img/3.jpg" alt=""/></div>
           <div class="carousel-caption">
            <h4><a href="#">tempor invidunt ut labore et dolore</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div><!-- End Item -->
        
        <div class="item">
          <div class="car"><img src="img/4.jpg" alt=""/></div>
           <div class="carousel-caption">
            <h4><a href="#">magna aliquyam erat, sed diam voluptua</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div>

        <div class="item">
          <div class="car"><img src="img/5.jpg" alt=""/></div>
           <div class="carousel-caption">
            <h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
          </div>
        </div>                
      </div>

    <ul class="list-group col-sm-4">
      <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Коррекция бровей в домашних условиях</h4></li>
      <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>Подборка модных детских стрижек для...</h4></li>
      <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>Итальянский стиль</h4></li>
      <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>magna aliquyam erat, sed diam voluptua</h4></li>
      <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>tempor invidunt ut labore et dolore magna aliquyam erat</h4></li>
    </ul>

      <div class="carousel-controls">
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
      </div>

    </div>

Код в DLE в slaider.tpl:

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
      
        <div class="item active">
          <div class="car"><img src="{image-1}" alt="{title}"/></div>
           <div class="carousel-caption">
            <h4><a href="{full-link}" title="{title}">{title}</a></h4>
            <p>{short-story limit="292"}</p>
          </div>
        </div><!-- End Item -->
                
      </div><!-- End Carousel Inner -->


    <ul class="list-group col-sm-4">
      <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>{title limit="40"}</h4></li>
    </ul>

      <!-- Controls -->
      <div class="carousel-controls">
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
      </div>

Код в DLE в main.tpl:

               <div id="myCarousel" class="carousel slide" data-ride="carousel">
                {custom category="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,23,24,25,26,30,32," template="slaider" aviable="global" from="0" limit="5" cache="no" order="date"}
               </div>

Как исправить?

Ответа пока нет

<script> document.addEventListener('DOMContentLoaded', function() { const links = document.querySelectorAll('a#xfield_value'); links.forEach(link => { let href = link.getAttribute('href'); if (href) { href = href.replace(/ /g, '+'); link.setAttribute('href', href); } }); }); </script>

Технический сбой

Нужна помощь по адаптации слайдера

Ответа пока нет

Похожие вопросы

Выборка категории модулем

Слайдер

Вид новостей в категории

Вывод изображения в новости!

Слайдер. ошибка

Как правильно подключить JavaScript слайдера.

Помогите пожалуйста, фильмы отображаются не в том разделе?

Как исправить поиск сайта?

Почему при верстке шаблона не работает JS?