Блог

Главная - Вопросы по программированию - Начальный вид SwiperJS

Начальный вид SwiperJS

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я использую SwiperJS (https://swiperjs.com/demos/#3D_cube_effect ). Позиция заставляет начать прямое лицо. Я бы хотел, чтобы этот куб находился в этом положении: Спасибоя хотел бы видеть две стены при прокрутке, а не одну.

HTML

   <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(images/1.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(images/1.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(images/1.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(images/1.jpg); background-size: contain; background-repeat: no-repeat;"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

CSS

 .swiper-container {
  width: 300px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 30%;
  margin-left: -150px;
  margin-top: -150px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

JS

 var swiper = new Swiper('.swiper-container', {
  effect: 'cube',
  grabCursor: true,
  cubeEffect: {
    shadow: true,
    slideShadows: true,
    shadowOffset: 20,
    shadowScale: 0.94,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  // autoplay:{
  //   delay:3000
  // },
});

Комментарии:

1. Проверил ваш код прямо сейчас, и он работает. Как подключить плагин js и плагин css?

2. Ползунок работает нормально, но я хочу сказать, что при прокрутке вы можете видеть две стены одновременно

3. Я дал решение. Был ли такой результат необходим?

4. то есть он прокручивался в 3D-эффекте, чтобы вы могли видеть часть второго следа

Ответ №1:

Правило css rotateY отвечает за состояние позиции поворота. Чтобы переопределить, добавьте этот код jquery с помощью API SwiperJS:

 $('.swiper-wrapper').addClass('state');

swiper.on('touchMove', function() { 
  $('.swiper-wrapper').removeClass('state');
});

И добавьте это в свой css:

 .swiper-wrapper.state {
  transform: rotateY(-45deg)!important;
}
 
 var swiper = new Swiper('.swiper-container', {
  effect: 'cube',
  grabCursor: true,
  cubeEffect: {
    shadow: true,
    slideShadows: true,
    shadowOffset: 20,
    shadowScale: 0.94,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  // autoplay:{
  //   delay:3000
  // },
});

$('.swiper-wrapper').addClass('state');

swiper.on('touchMove', function() { 
  $('.swiper-wrapper').removeClass('state');
}); 
 .swiper-container {
  width: 300px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 30%;
  margin-left: -150px;
  margin-top: -150px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-wrapper.state {
  transform: rotateY(-45deg)!important;
} 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.6/swiper-bundle.min.css" integrity="sha512-nDK7V7W9Sac8PVJy hbDCe b8XWbwrvigsWO943CfXexh2zIquVfEfVP9Cy5cbP B5v/9lgxOAlp2yES7n/FIA==" crossorigin="anonymous" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.6/swiper-bundle.js" integrity="sha512-AO8EjcB txNbSKoPw/P1203KP3YPQ5YTNR ndaZadfDEAXrLrg/dzLSFurI/XV9OkPy7AE9m f0Shzfc kVKvQ==" crossorigin="anonymous"></script>

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(https://www.imgonline.com.ua/examples/bee-on-daisy.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(https://www.imgonline.com.ua/examples/bee-on-daisy.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(https://www.imgonline.com.ua/examples/bee-on-daisy.jpg); background-size: contain; background-repeat: no-repeat;"></div>
      <div class="swiper-slide" style="background-image:url(https://www.imgonline.com.ua/examples/bee-on-daisy.jpg); background-size: contain; background-repeat: no-repeat;"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

Комментарии:

1. все хорошо, но дело не в этом. Я бы хотел, чтобы ползунок выглядел так, как на втором рисунке «так и должно быть», то есть он прокручивался в 3D-эффекте, чтобы вы могли видеть часть второго следа

2. @Simon, ты хочешь, чтобы две стены были видны нормально? Те. прокрутил, и куб занял позицию с отображением двух стен. Итак?

3. да, я хочу, чтобы прокручивалась каждая стена, но сначала видны две стены

4. @Simon, я не знаком с этим слайдером, но я понял, как решить вашу проблему. Дай мне немного времени

5. Сделал это еще лучше, чем было раньше. Проверить

Метки: