Как сделать, чтобы слайдер обрезался только с левой стороны?

Question

Как сделать, чтобы слайдер обрезался только с левой стороны?

Рейтинг: 0Ответов: 1Опубликовано: 27.06.2023

Как сделать, чтобы слайдер обрезался только с левой стороны?
То есть, чтобы с правой стороны он был виден. Сейчас обрезается с двух сторон, схематически на скрине.

var swiper = new Swiper(".mySwiper", {});

html, body {
  position: relative;
  height: 100%;
  padding-top: 40px;
}

.container {
  max-width: 500px;
  margin: 0 auto;
  outline: 1px solid red;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

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

  <head>
    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  </head>

  <body>
    <!-- Swiper -->
    <div class="container">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
        </div>
      </div>
    </div>
  </body>

  </html>
</body>

</html>

css swiper.js

Источник: Stack Overflow на русском

Answer 1

▲ 2

Уберите обрезку контента слайдера (!important нужен, чтобы "перебить" собственные свойства):
```
.swiper { overflow: visible !important; }
```
Добавьте обрезку с помощью clip-path, установив заведомо большую ширину, чем слайдер:
```
.container { clip-path: polygon(0 0, 100vw 0, 100vw 100%, 0 100%); }
```
Избавьтесь от горизонтальной полосы прокрутки у body, вызванной увеличившейся шириной слайдера:
```
body { overflow-x: hidden; }
```

var swiper = new Swiper('.mySwiper', {});

body {
  position: relative;
  margin: 0;
  padding: 40px 0 0;
  height: 100%;
  overflow-x: hidden;
  font-size: 14px;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #000;
  background: #eee;
}

.container {
  margin: 0 auto;
  max-width: 500px;
  clip-path: polygon(0 0, 100vw 0, 100vw 100%, 0 100%);
}

.swiper {
  height: 100%;
  width: 100%;
  overflow: visible !important;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  text-align: center;
  background: #fff;
}

.swiper-slide img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

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

  <head>
    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  </head>

  <body>
    <!-- Swiper -->
    <div class="container">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
        </div>
      </div>
    </div>
  </body>

  </html>
</body>

</html>

Как сделать, чтобы слайдер обрезался только с левой стороны?

Ответы