Показать сообщение отдельно
  #7 (permalink)  
Старый 16.07.2024, 13:26
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Сергей Ракипов, так должно быть?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js"></script>

<style>
img {max-height: 100px}
.slider {position: relative}
.flex-control-nav {bottom: 0}
</style>

<script>
$(() => {
  $('.slider').each((i, node) => {
    $(node).find('.flexslider').flexslider({
      animation: "slide",
      controlsContainer: $(node).find(".custom-controls-container"),
      customDirectionNav: $(node).find(".custom-navigation a"),
    })
  });
});
</script>

<div class="slider">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <img src="image1.jpg" alt="img-1" />
      </li>
      <li>
        <img src="image2.jpg" alt="img-2" />
      </li>
      <li>
        <img src="image3.jpg" alt="img-3" />
      </li>
      <li>
        <img src="image4.jpg" alt="img-4" />
      </li>
    </ul>
  </div>
  <div class="custom-navigation">
    <a href="#" class="flex-prev">Prev</a>
    <div class="custom-controls-container"></div>
    <a href="#" class="flex-next">Next</a>
  </div>
</div>

<div class="slider">
  <div class="flexslider">
    <ul class="slides">
      <li>
        <p>Text 1</p>
      </li>
      <li>
        <p>Text 2</p>
      </li>
      <li>
        <p>Text 3</p>
      </li>
      <li>
        <p>Text 4</p>
      </li>
    </ul>
  </div>
  <div class="custom-navigation">
    <a href="#" class="flex-prev">Prev</a>
    <div class="custom-controls-container"></div>
    <a href="#" class="flex-next">Next</a>
  </div>
</div>

Последний раз редактировалось Nexus, 16.07.2024 в 13:30.
Ответить с цитированием