Гладкая карусель, не работает в CSS Grid или Flexbox - PullRequest
Новая
       44

Гладкая карусель, не работает в CSS Grid или Flexbox

0 голосов
/ 25 января 2019

У меня проблема со Сликом. Обычно это работает нормально, но я хочу использовать CSS Grid или Flexbox, чтобы ползунок был справа, а что-то еще слева. Базовая раскладка содержимого (изображение). Проблема в том, что если я по какой-то причине использую CSS Grid, ползунок Slick умножает изображения, и ползунок перестает работать; все изображения отображаются рядом друг с другом, занимая больше, чем длина всего экрана. Я пытался найти способ изменить режим отображения в разделителе слайдера, но я не могу найти, каким должно быть исходное значение. Кроме того, стрелки, чтобы пройти слайды исчезают. Я попытался поискать в Интернете и нашел что-то похожее, но это не похоже на мой случай Ссылка на страницу Github .

Кто-нибудь знает, как это исправить? Спасибо.

HTML-код: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- IMPORT STYLES -->
    <link rel="stylesheet" href="style/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel='stylesheet' href='http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css'>
    <link rel='stylesheet' href='http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css'>
    <script src="js/script.js"></script>

    <title>Slider</title>
</head>

<body>
    <div id="wrapper">
        <div id="left">
            <div class="box">
                ITEM 1
            </div>
            <div class="box">
                ITEM 2
            </div>
        </div>
        <div id="right">
            <div id="player">
                PLAYER
            </div>
            <br>
            <div id="slider">
                <!-- SLIDER BEGIN -->
                <div class="container">
                    <div class="slider center">
                        <div class="slide">
                            <div class="cl cl-yellow"></div>
                        </div>
                        <div class="slide">
                            <div class="cl cl-blue"></div>
                        </div>
                        <div class="slide">
                            <div class="cl cl-red"></div>
                        </div>
                        <div class="slide">
                            <div class="cl cl-4"></div>
                        </div>
                        <div class="slide">
                            <div class="cl cl-5"></div>
                        </div>
                    </div>
                    <div class="pagination"></div>
                </div>
                <!-- SLIDER END -->
            </div>
        </div>
    </div>

    <!-- IMPORT SCRIPTS -->
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js'></script>
</body>

</html>

SCSS: 

body, html {
    padding: 0;
    margin: 0;
}

#wrapper {
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: 20% 80%;
    #left {
        padding: 1em;

        .box {
            width: 100%;
            height: 38.5%;
            background-color: blue;
            margin-bottom: 10px;
        }
    }

    #right {
        margin-top: 1em;
        #player {
            width: 100%;
            height: 450px;
            background-color: orange;
        }
        #slider {
            width: 100%;
            height: 120px;
        }
    }
}

/* SLIDER STYLE */
.container {
    padding: 30px;
  }

  h1 {
    text-align: center;
    color: white;
    padding-bottom: 10px;
    font-family: "Raleway", sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
  }

  /*****************************************
  *  --------------------------------------*
  *  Slick                                 *
  *  --------------------------------------*
  *****************************************/
  .cl {
    height: 190px;
    padding: 10px;
  }

  .cl-yellow {
    background-image: url(https://edit.co.uk/uploads/2016/12/Image-1-Alternatives-to-stock-photography-Thinkstock.jpg);
  }

  .cl-blue {
    background-image: url(https://pbs.twimg.com/profile_images/949787136030539782/LnRrYf6e.jpg);
  }

  .cl-red {
    background-image: url(https://amp.businessinsider.com/images/59787de25d8a2f1e008b5538-750-563.jpg);
  }

  .cl-4 {
    background-image: url(https://assets3.thrillist.com/v1/image/1299823/size/tmg-article_default_mobile.jpg);
  }

  .cl-5 {
    background-image: url(https://edit.co.uk/uploads/2016/12/Image-3-Alternatives-to-stock-photography-Thinkstock.jpg);
  }

  .slick-active {
    padding: 20px 0;
  }

  .slick-center {
    transform: scale(1.08);
  }

  .slick-slide:not(.slick-active) {
    margin: 20px 0;
  }

  .child {
    width: 100%;
  }

  .slide:not(.slick-active) {
    cursor: pointer;
  }

  .pagination {
    text-align: center;
    color: #fff;
    font-family: "Raleway", sans-serif;
    font-size: 1.2rem;
  }

И файл JavaScript: 

// Sets the variable to display the text under the slide
var $st = $('.pagination');

//defines the slick variable, targeting the "center" divider.
var $slickEl = $('.center');

$slickEl.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  var i = (currentSlide ? currentSlide : 0) + 1;
  $st.text(i + ' of ' + slick.slideCount);
});

$slickEl.slick({
  centerMode: true,
  centerPadding: '0px',
  slidesToShow: 3,
  focusOnSelect: true,
  dots: false,
  infinite: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
...