如何防止光滑的滑块在页面加载时加载隐藏的 div

问题描述 投票:0回答:0

我正在设计光滑的滑块,所有工作正常排除隐藏的 div。

当我刷新页面时,它正在加载所有隐藏的 div 而不是隐藏的,所以我设置了 overflow:hidden; 并且它停止在滑块支架外部加载隐藏的 div。 但仍然继续在 slider-holder div 中加载隐藏的 div。

我还需要css修正

我已经尝试过使用和不使用此代码的变体 not:(:nth-child(1));

.slider-holder {
  display:none!important
}

.slider-holder.slick-initialized {
  display:block!important
}

当我刷新页面时,仍然会在滑块支架中加载隐藏的 div。

我的代码:

    $('#slider-holder').slick({
      autoplay: true,
      autoplaySpeed: 4900,
      slidesToShow: 1,
      slidesToScroll: 1,
      infinite: true,
      adaptiveHeight: true,
      speed: 200,
      swipeToSlide: true,
      cssEase: 'linear',
      lazyLoad: 'progressive',
    });
    .featured-slider{
      width:50%;
      min-height:400px;
      position:relative;
      display:block;
      float:left;
      overflow:hidden!important;
    }
    .slider-holder {
      width: 100%;
      max-width: 100vw;
      display: block;
      position: relative;
      overflow:hidden!important;
    }

    .slider {
      background-color: lightgray;
      position: relative;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      max-width: 100vw;
      min-height: 400px;
      display: block;
      overflow:hidden!important;
    }
    .slider .slider-nav {
      position: absolute;
      height: 48px;
      width: 100%;
      max-width: 100%;
      top: 0;
      bottom: 0;
      margin: auto;
      pointer-events: none;
    }

    .slider-nav .prev {
      font-size: 32px;
      color: #fff;
      float: left;
      height: 48px;
      width: 48px;
      line-height: 48px;
      text-align: center;
      position: relative;
      left: 10px;
      opacity: 10;
      z-index: 2;
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0;
      pointer-events: auto;
      text-align: left;
    }

    .slider-nav .next {
      font-size: 32px;
      color: #fff;
      float: right;
      height: 48px;
      width: 48px;
      line-height: 48px;
      position: relative;
      right: 10px;
      text-align: center;
      opacity: 10;
      z-index: 2;
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0;
      pointer-events: auto;
      text-align: right;
      background-color: #f8f8f8;
    }

    .slider-nav > i {
      position: relative;
      vertical-align: middle;
      display: inline-block;
      width: 48px;
      height: 48px;
    }

   .slider  .slider:hover .slider-nav.prev,
    .slider:hover .slider-nav.next {
      -moz-transition: all 0.3s ease-in-out 0s;
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s;
      opacity: 0.8;
    }

    .caption {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 15px 20px 15px 20px;
        pointer-events: none
    }

    .caption h3 {
        margin-bottom: 0
    }

    .caption .title {
        font-size: 15px;
        color: #fff !important;
        line-height: 21px;
        font-weight: 500;
        overflow-wrap: break-word
    }

    .caption a {
        pointer-events: auto
    }

    .slider .caption .title {
        color: #fff;
        font-size: 22px;
        font-weight: 500;
        line-height: 28px;
        margin-top: 10px;
        position: relative
    }

    .slider .caption .title a {
        color: #fff
    }

    .category-label {
        background-color: #0a0a0a;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        font-weight: 400;
        position: relative;
        height: 1.8em;
        line-height: 1.8;
        padding: 0 .7em;
        cursor: pointer;
        z-index: 100;
        pointer-events: auto;
        white-space: nowrap
    }

    .slider .category-label,
    .featured-news .news-card .category-label {
        position: absolute;
        top: 20px;
        left: 20px
    }

    .slider .post-meta {
        margin-bottom: 0;
        position: relative;
        z-index: 14
    }

    .slider .post-meta a {
        color: #b0b0b0;
        pointer-events: auto;
    }

    .slider .caption .category-link {
        pointer-events: auto
    }
    .post-meta {
        display: block;
        width: 100%;
        float: left
    }

    .post-meta span {
        list-style: none;
        float: left;
        margin-right: 8px;
        color: #999;
        font-size: 11px;
        display: block
    }

    .post-meta a {
        list-style: none;
        float: left;
        margin-right: 8px;
        color: #999;
        font-size: 11px;
        display: block;
        font-weight: 600
    }

    .post-meta span i {
        margin-right: 5px
    }

    .overlay {
        background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.46) 50%, rgba(0, 0, 0, 0.80) 100%);
        bottom: 0;
        content: "";
        height: 50%;
        opacity: .9;
        position: absolute;
        transition: all .3s ease-in 0s;
        width: 100%;
        will-change: opacity
    }

    .slick-slide{
      outline:none!important
    }

    .slider-holder {
      display:none!important
    }

    .slider-holder.slick-initialized {
      display:block!important
    }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<div class="featured-slider">
      <div class="slider-holder" id="slider-holder">
        <div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_7492ab772ab5492d96018940debac479.jpg?1628180370')">
          <a href="/life-style/children" class="category-link"><span class="category-label" style="background-color: #222222">Children</span></a>
          <div class="overlay"></div>
          <div class="caption">
          <a href="/what-is-gta-online-and-how-to-play-it">
            <h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 1</h3>
          </a>
            <p class="post-meta">    
              <a href="/profile/user">User</a>
              <span>Jan 18, 2023</span>
              <span><i class="fa-regular fa-comment"></i>0</span>
              <span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
            </p>
          </div>
        </div>
        <div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_e285ad0d98faecc0ef4cbee582b77700.jpg?1628180400')">
          <a href="/life-style/children" class="category-link"><span class="category-label" style="background-color: #222222">Children</span></a>
          <div class="overlay"></div>
          <div class="caption">
          <a href="/what-is-gta-online-and-how-to-play-it">
            <h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 2</h3>
          </a>
            <p class="post-meta">    
              <a href="/profile/user">User</a>
              <span>Jan 18, 2023</span>
              <span><i class="fa-regular fa-comment"></i>0</span>
              <span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
            </p>
          </div>
        </div>
      </div>
      <div id="slider-nav" class="slider-nav">
        <button class="prev">
          <span class="notext">Back</span>
          <i class="fa-solid fa-chevron-left"></i>
        </button>
        <button class="next">
          <i class="fa-solid fa-chevron-right"></i>
          <span class="notext">Next</span>
        </button>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

javascript html jquery css
© www.soinside.com 2019 - 2024. All rights reserved.