Как использовать CSS для создания слайдера? - PullRequest
Новая
       7

Как использовать CSS для создания слайдера?

0 голосов
/ 30 апреля 2018

Я скачал тему для своей веб-страницы, в которой есть слайдер. но слайдер не работает. Я попытался использовать загрузчик для создания слайд-шоу. но когда я ссылаюсь на bootstrap.css с этим html, стиль ломается. Как я могу создать слайд-шоу с этим кодом с помощью CSS?

Я не хочу использовать такие события, как javascript onclick. Я все еще учусь.

Это мой HTML-код для блока слайд-шоу. 

<ul class="home-slider slick-initialized slick-slider">

        <div style="opacity: 1; width: 9515px;">


            <li class="slick-slide"  style="width: 1903px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 750ms ease;">

                <div class="image-caption"> <img class="desktop-img" src="images/slider-1.jpg"> </div>

                         </li>
             <li class="slick-slide"  style="width: 1903px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 750ms ease;">

                <div class="image-caption"> <img class="desktop-img" src="images/slider-2.jpg"> </div>

                         </li>
            <li class="slick-slide"  style="width: 1903px; position: relative; left: -7612px;; top: 0px; z-index: 999; opacity: 1; transition: opacity 750ms ease;">

                <div class="image-caption"> <img class="desktop-img" src="images/slider-3.jpg"> </div>

                         </li>

        </div>  
        <ul class="slick-dots" style="display: block;" role="tablist">  
            <li><button type="button"  tabindex="0">1</button></li> 
            <li><button type="button" tabindex="0">2</button></li>  
            <li><button type="button"  tabindex="0">3</button></li>

        </ul>

</ul>

и это CSS. 

.home-slider {position: relative;}
.home-slider {width: 100%;float: left;padding: 0px;margin: 0px;}
.home-slider li.slick-slide {width: 100%;float: left;position: relative;}

.home-slider ul.slick-dots {bottom: 32px;margin: 0px;width: auto;float: right;right: 0px;padding-right: 52px;}
.home-slider ul.slick-dots li {margin: 0 8px;}
.home-slider ul.slick-dots li button {width: 25px;height: 25px;display: inline-block;border: 5px solid #fff;border-radius: 50%;background: #fff;}
.home-slider ul.slick-dots button:before {display: none;}
.home-slider ul.slick-dots li.slick-active button {border-color: #f5be18;background: transparent;}
.home-slider ul.slick-dots li button {width: 15px;height: 15px;}
.home-slider ul.slick-dots {bottom: 10px;}
.slick-slide {float: left;height: 100%;min-height: 1px;display: none;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}

Это ссылка на таблицу стилей в моем html 

<link type="text/css" href="css/ModuleStyleSheets.css" rel="stylesheet">
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/Box.css" type="text/css" media="screen">

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Почему бы просто не использовать оригинальный слайдер Slick . Вам нужно будет изменить свою разметку, а также добавить несколько ссылок css и js. Проверьте мой фрагмент: 

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="home-slider">
  <div class="image-caption">
    <img class="desktop-img" src="http://kenwheeler.github.io/slick/img/fonz1.png">
  </div>
  <div class="image-caption">
    <img class="desktop-img" src="http://kenwheeler.github.io/slick/img/fonz2.png">
  </div>
  <div class="image-caption">
    <img class="desktop-img" src="http://kenwheeler.github.io/slick/img/fonz3.png">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
  $(document).ready(function() {
    $('.home-slider').slick({
      dots : true,
      arrows : false
    });
  });
</script>

Некоторые соображения:

  • Прочтите документацию , чтобы вы могли настроить ползунок в соответствии со своими потребностями
  • Измените slick-theme.css в соответствии с вашими потребностями (убедитесь, что вы загрузили этот файл), измените его так, как вы хотите (я включил связанный только для того, чтобы фрагмент работал)
0 голосов
/ 30 апреля 2018

Файлы CSS соответствуют иерархии, поэтому вам нужно вызывать файлы по приоритету, от «наименее важных» до «наиболее важных», как вы уже сделали, если файл начальной загрузки конфликтует, просто измените порядок вызов, то есть:

стиль начальной загрузки

стиль скользящего слайдера

и самое главное, что ваш основной стиль сайта (main.css, style.css) должен быть последним файлом, который будет импортирован в код.

...