Как добавить движущиеся кнопки и автоматизировать c перемещение на несколько секунд для картинок? - PullRequest
Новая
       44

Как добавить движущиеся кнопки и автоматизировать c перемещение на несколько секунд для картинок?

0 голосов
/ 20 апреля 2020

Я хотел бы добавить левую и правую кнопку для перехода к последнему или следующему изображению + автоматически перемещать изображение на несколько секунд. Я видел некоторые учебные пособия, но я не знаю, как добавить код к этому коду с помощью кнопок внизу

кнопки слева и справа

buttons on left and right sides

индекс. html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="slidershow middle">

      <div class="slides">
        <input type="radio" name="r" id="r1" checked>
        <input type="radio" name="r" id="r2">
        <input type="radio" name="r" id="r3">
        <input type="radio" name="r" id="r4">
        <div class="slide s1">
          <img src="img/d1.jpg" alt="">
        </div>
        <div class="slide">
          <img src="img/d2.jpg" alt="">
        </div>
        <div class="slide">
          <img src="img/d3.png" alt="">
        </div>
        <div class="slide">
          <img src="img/d4.jpg" alt="">
        </div>
      </div>

      <div class="navigation">
        <label for="r1" class="bar"></label>
        <label for="r2" class="bar"></label>
        <label for="r3" class="bar"></label>
        <label for="r4" class="bar"></label>

      </div>
    </div>

    <script>
    </script>


  </body>
</html>

1 Ответ

0 голосов
/ 20 апреля 2020

вы должны использовать что-то вроде Сова Карусель 2

Если вы хотите использовать стили навигации по умолчанию, вам также необходимо включить owl.theme.default. css.

Поместите скрипт внизу разметки сразу после jQuery: 

<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>

Использование Оберните ваши элементы (div, a, img, span, li et c.) С помощью элемент контейнера (div, ul et c.). Только класс owl-carousel обязателен для применения надлежащих стилей: 

<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

ПРИМЕЧАНИЕ. Класс owl-theme является необязательным, но без него вам придется самостоятельно разрабатывать навигационные функции.

Вызовите функцию плагина, и ваша карусель готова. 

$(document).ready(function(){
  $('.owl-carousel').owlCarousel();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...