te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Swiper JS cutting off box-shadow - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Swiper JS cutting off box-shadow - Stack Overflow

    javascript - Swiper JS cutting off box-shadow - Stack Overflow

    programmeradmin2浏览0评论

    I have created a carousel using Swiper JS, however my box-shadow seems to be cut off due to the overflow: hidden; property which applied on the .swiper class (I'm assuming the properties are applied through the Swiper Object Initialization).

    How can I fix this?

    const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Responsive breakpoints
  breakpoints: {
    600: {
      slidesPerView: 3,
      spaceBetween: 15
    }
  }
});
    .product-block {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.5;
}

.product-description {
  padding: 7px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-description h2,
h3,
h4 {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
    <link rel="stylesheet" href="@8/swiper-bundle.min.css">
<script src="@8/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="home-wrapper-categories swiper-wrapper">
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src=".2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src=".2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src=".2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

    I have created a carousel using Swiper JS, however my box-shadow seems to be cut off due to the overflow: hidden; property which applied on the .swiper class (I'm assuming the properties are applied through the Swiper Object Initialization).

    How can I fix this?

    const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Responsive breakpoints
  breakpoints: {
    600: {
      slidesPerView: 3,
      spaceBetween: 15
    }
  }
});
    .product-block {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.5;
}

.product-description {
  padding: 7px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-description h2,
h3,
h4 {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="home-wrapper-categories swiper-wrapper">
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash./photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash./photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash./photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

    • javascript
    • html
    • css
    • swiper.js
    Share Improve this question edited Aug 12, 2022 at 13:10 Parit Sawjani asked Aug 12, 2022 at 12:41 Parit SawjaniParit Sawjani 9081 gold badge13 silver badges29 bronze badges
    Add a ment  | 

    3 Answers 3

    Reset to default 12

    I figured it out. I added a some padding-bottom to my .swiper class and the box-shadow became more visible. This also works for the left, right and top padding since the overflow: hidden is also applied on those areas too.

    const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // Responsive breakpoints
  breakpoints: {
    600: {
      slidesPerView: 3,
      spaceBetween: 15
    }
  }
});
    .swiper {
  padding: 10px 10px 10px 10px !important;
}

.product-block {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-img img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.5;
}

.product-description {
  padding: 7px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

.product-description h2,
h3,
h4 {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="home-wrapper-categories swiper-wrapper">
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash./photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide">
      <header class="product-img">
        <img src="https://images.unsplash./photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash./photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
    <article class="product-block swiper-slide drop-shadow">
      <header class="product-img">
        <img src="https://images.unsplash./photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&w=1080&fit=max&q=80&fm=jpg&crop=entropy&cs=tinysrgb" alt="">
      </header>
      <footer class="product-description">
        <h2>Fudge cake</h2>
      </footer>
    </article>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

    I ran into a similar problem where a card's box shadow keeps getting cut off (hidden behind another card). I use SCSS for loop to increment the z-index for every slide to solve it as follows:

    // box shadow effect on every slide
& .swiper-slide {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7);
}

// increment z-index for each slide
@for $i from 1 to 10 {
    & .swiper-slide:nth-child(#{$i}):hover {
      z-index: $i;
    }
}

    My solution (LESS) when you have just 1 slide per view:

    .swiper{
        overflow: visible;
        .swiper-slide.swiper-slide-prev,.swiper-slide.swiper-slide-next{
            opacity: 0;
            transition: opacity 200ms linear;
        }

        .swiper-slide-active{
            padding: 1rem;
            margin: -1rem;
        }
    }

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论