Swiperjs 在网格内时出现 100% 宽度的错误。

huangapple
go评论95阅读模式
英文:

Swiperjs 100% width bug when inside grid

问题

I am facing an issue while using SwiperJS inside a grid. When I place the Swiper wrapper inside a <div> with display: grid, the wrapper overflows by 100%. I have provided a link to my JSFiddle example. If you remove the CSS, you will see that everything is normal. However, when I add the grid, that's when the problem occurs.

Thank you.

jsfiddle

  1. &lt;link
  2.   rel=&quot;stylesheet&quot;
  3.   href=&quot;https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css&quot;
  4. /&gt;
  6. &lt;div class=&quot;item-grid&quot;&gt;
  7.   &lt;div&gt;
  8.     &lt;div class=&quot;swiper mySwiper&quot;&gt;
  9.       &lt;div class=&quot;swiper-wrapper&quot;&gt;
  10.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 1&lt;/div&gt;
  11.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 2&lt;/div&gt;
  12.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 3&lt;/div&gt;
  13.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 4&lt;/div&gt;
  14.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 5&lt;/div&gt;
  15.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 6&lt;/div&gt;
  16.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 7&lt;/div&gt;
  17.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 8&lt;/div&gt;
  18.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 9&lt;/div&gt;
  19.       &lt;/div&gt;
  20.       &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
  21.     &lt;/div&gt;
  22.   &lt;/div&gt;
  23.   &lt;div&gt;&lt;/div&gt;
  24. &lt;/div&gt;
  26. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js&quot;&gt;&lt;/script&gt;
  28. &lt;script&gt;
  29.   var swiper = new Swiper(&quot;.mySwiper&quot;, {
  30.     slidesPerView: 6,
  31.     spaceBetween: 30,
  32.     pagination: {
  33.       el: &quot;.swiper-pagination&quot;,
  34.       clickable: true,
  35.     },
  36.   });
  37. &lt;/script&gt;
  39. .item-grid {
  40.   display: grid;
  41.   grid-template-columns: 1fr 1fr;
  42.   grid-gap: 24px;
  43. }
英文:

I am facing an issue while using SwiperJS inside a grid. When I place the Swiper wrapper inside a <div> with display: grid, the wrapper overflows by 100%. I have provided a link to my JSFiddle example. If you remove the CSS, you will see that everything is normal. However, when I add the grid, that's when the problem occurs.

Thank you.

jsfiddle

  1. &lt;link
  2.   rel=&quot;stylesheet&quot;
  3.   href=&quot;https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css&quot;
  4. /&gt;
  6. &lt;div class=&quot;item-grid&quot;&gt;
  7.   &lt;div&gt;
  8.     &lt;div class=&quot;swiper mySwiper&quot;&gt;
  9.       &lt;div class=&quot;swiper-wrapper&quot;&gt;
  10.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 1&lt;/div&gt;
  11.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 2&lt;/div&gt;
  12.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 3&lt;/div&gt;
  13.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 4&lt;/div&gt;
  14.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 5&lt;/div&gt;
  15.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 6&lt;/div&gt;
  16.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 7&lt;/div&gt;
  17.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 8&lt;/div&gt;
  18.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 9&lt;/div&gt;
  19.       &lt;/div&gt;
  20.       &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
  21.     &lt;/div&gt;
  22.   &lt;/div&gt;
  23.   &lt;div&gt;&lt;/div&gt;
  24. &lt;/div&gt;
  26. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js&quot;&gt;&lt;/script&gt;
  28. &lt;script&gt;
  29.   var swiper = new Swiper(&quot;.mySwiper&quot;, {
  30.     slidesPerView: 6,
  31.     spaceBetween: 30,
  32.     pagination: {
  33.       el: &quot;.swiper-pagination&quot;,
  34.       clickable: true,
  35.     },
  36.   });
  37. &lt;/script&gt;
  39. .item-grid {
  40.   display: grid;
  41.   grid-template-columns: 1fr 1fr;
  42.   grid-gap: 24px;
  43. }

答案1

得分: 0

你可以使用flex代替grid。

  1. .item-grid {
  2.    display: flex;
  3. }
  4. .item-grid > div {
  5.    width: 50%;
  6. }

使用这个样式。

英文:

You can use flex instead of grid.

  1. .item-grid {
  2.    display: flex;
  3. }
  4. .item-grid &gt; div {
  5.    width: 50%;
  6. }

Use this style.

答案2

得分: 0

你可以将包含swiper的网格项的最小宽度设置为100%。

英文:

You can set the min-width of the grid item containing the swiper to 100%.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .item-grid {
  2.   display: grid;
  3.   grid-template-columns: 1fr 1fr;
  4.   grid-gap: 24px;
  5. }
  7. .item-grid&gt; :first-child {
  8.   min-width: 100%;
  9. }

<!-- language: lang-html -->

  1. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css&quot; /&gt;
  2. &lt;div class=&quot;item-grid&quot;&gt;
  3.   &lt;div&gt;
  4.     &lt;div class=&quot;swiper mySwiper&quot;&gt;
  5.       &lt;div class=&quot;swiper-wrapper&quot;&gt;
  6.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 1&lt;/div&gt;
  7.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 2&lt;/div&gt;
  8.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 3&lt;/div&gt;
  9.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 4&lt;/div&gt;
  10.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 5&lt;/div&gt;
  11.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 6&lt;/div&gt;
  12.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 7&lt;/div&gt;
  13.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 8&lt;/div&gt;
  14.         &lt;div class=&quot;swiper-slide&quot;&gt;Slide 9&lt;/div&gt;
  15.       &lt;/div&gt;
  16.       &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
  17.     &lt;/div&gt;
  18.   &lt;/div&gt;
  19.   &lt;div&gt;content&lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js&quot;&gt;&lt;/script&gt;
  22. &lt;script&gt;
  23.   var swiper = new Swiper(&quot;.mySwiper&quot;, {
  24.     slidesPerView: 6,
  25.     spaceBetween: 30,
  26.     pagination: {
  27.       el: &quot;.swiper-pagination&quot;,
  28.       clickable: true,
  29.     },
  30.   });
  31. &lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月5日 05:23:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76402473.html
  • css
  • html
  • swiper.js
  • width
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定