Как стиль и расположение кнопок в пятно? - PullRequest
Новая
       8

Как стиль и расположение кнопок в пятно?

0 голосов
/ 19 декабря 2018

Я пытаюсь сделать кнопки и «точечное меню» в скользком слайдере видимыми.

Мой пример в jsfiddle выглядит нормально, хотя «точечное меню» под элементами отсутствует: Мой блестящий пример

В режиме «в реальном времени» моя реализация выглядит следующим образом: 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
    <script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

     <style >
        .variants {
          cursor: pointer;
          border: 1px solid #CDCDCD;
          width: 192px;
          height: 223px;
          float: left;
        }
    </style>
</head>
<body>

    <div class="variants-container">
      <div class="variants">test</div>
      <div class="variants">test</div>
      <div class="variants">test</div>
      <div class="variants">test</div>
    </div>

      <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
      <script type="text/javascript">
        $('.variants-container').slick({
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3
        });
      </script>

</body>
</html>

В верхней части набора элементов есть кнопки вместо хороших круглых кнопок, отмеченных и включенныхверх левого элемента.

without slick/slick-theme.css

Желаемая реализация:

enter image description here

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

1 Ответ

0 голосов
/ 19 декабря 2018

Приведенный ниже код работает так, как вы ожидали, проблема заключалась в том, что вы включали файлы jquery дважды, один раз в голову и один раз в конец тела.Также вы забыли включить «slick-theme.css» после «slick.css»

Чтобы получить точки внизу карусели, в соответствии с документами, просто добавьте dots: true в настройках

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<style>
html,
body {
  padding: 20px;
  background-color: #CCC;
}

.variants {
  cursor: pointer;
  border: 1px solid #CDCDCD;
  width: 192px;
  height: 223px;
  float: left;
}
</style>
</head>
<body>

    <div class="variants-container">
      <div class="variants">test</div>
      <div class="variants">test</div>
      <div class="variants">test</div>
      <div class="variants">test</div>
    </div>

<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.variants-container').slick({
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 3,
      dots: true
    });
  });
  
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...