Слайдер не показывает точки слайдера - PullRequest
Новая
       29

Слайдер не показывает точки слайдера

0 голосов
/ 04 февраля 2020

Я очень новичок в liquid, и мне удалось добавить ползунок продукта на веб-сайт, который я создаю для клиента, но вместо точек ползунка есть цифры, а вместо горизонтали они вертикальные .

enter image description here

Понятия не имею, что я делаю не так. Это то, что я сделал до сих пор. Если кто-нибудь может понять, что именно я делаю неправильно, пожалуйста, дайте мне знать, я действительно ценю ваше время:

CSS (SASS): 

.all-container{
  padding-top: 50px;
  padding-bottom: 50px;

  .inner-container{
    padding: 0px 15px;
    width: 100%;
    margin: auto;
/*     max-width: 1000px; */
    .title-container{
      display: -webkit-flex;
      flex-wrap: wrap;    
      .title_inner{
        padding: 15px;
        max-width: 100%;
        flex-basis: 100%;
        .title_wrapper{
          width: 100%;
          h3{
            text-align: center;
            font-family: Vollkorn;
            font-weight: 600;
            font-size: 35px;
            color: #232c3b;

            span{
              font-weight: inherit;
              vertical-align: baseline;
              word-break: break-word;
              display: inline-block;
            }
          }
        }
      }
    }

    .item-container{
      justify-content: center;
      align-items: center;
      display: -webkit-flex;
      flex-wrap: wrap;

      .item{
        padding: 15px;
        width:320px !important;

        .item-inner{
          text-align: center;
          position: relative;

          img{
            overflow: hidden;
            display: inline-flex;
            -webkit-box-pack: start;
            justify-content: flex-start;
            align-items: flex-start;
            vertical-align: middle;
            max-width: 100%;
          }

          .itm-title{
            text-align: center;
            font-family: Volkron;          
            font-size: 24px;
            font-weight: 600;
            padding-top: 15px ;
            span{
              font-weight: inherit;
              vertical-align: baseline;
              word-break: break-word;
              display: inline-block;
            }
          }

          .item-price{
            text-align: center;
            font-family: Lato;
            font-size: 18px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding-bottom:  15px;

            span{
              font-weight: inherit;
              vertical-align: baseline;
              word-break: break-word;
              display: inline-block;
            }
          }

          .shop-now{
            background-color: #232c3b;
            color: #fff;
            font-size: 11px;
            padding: 15px 40px;
            font-family: Lato;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 700;
            display: inline-block;
            line-height: 1;
            text-align: center;
            text-decoration: none;
            outline: 0px;
            cursor:pointer;



            span{
              color: inherit;
              text-decoration: none;
              vertical-align: baseline;
              word-break: break-word;
              display: inline-block;
            }

            &:hover{
              background-color: #fff;
              color: #232c3b;
            }
          }
        }
      }

      .slick-dots{
        bottom: -30px;
        .slick-active{
          button{
            &:before{
              border-color: #000000 !important;
              background-color: #ffffff !important;
            }
          }
        }
        li{
           button{
             &:before{
                background-color: #000000 !important;
             }
          }
        }
      }

    }
  }

}

JS: 

  $(function() {
      $('#slider-product').slick({
      dots: true,
      speed: 300,
      slidesToShow: 5,
      slidesToScroll: 5,
      autoplay: true,
      autoplaySpeed: 2000,
      variableWidth: true,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
  // ...
...