Как правильно доработать слайдер?

Question

[kakadam123]

Использую следующий слайдер - https://codepen.io/SkiperX/pen/ExQojxK
Он начинает работу с первого слайда, а мне необходимо стартовать минимум с третьего или центрального. Все, что знал - пробовал, ни к чему не пришел. Подскажите пожалуйста.
Так же у меня не получилось добавить стрелочки, для перелистывания при клике на них.
Буду благодарен помощи.

Answer 1

[Владимир Юрченков]

Почитайте просто про данный слайдер и все.

Comments

[kakadam123]

мне бы хотелось доработать уже имеющийся у меня, стилизованный слайдер :)

[Владимир Юрченков]

kakadam123, так я и имел в виду документацию. Там есть демо с вашими хотелками.

Answer 2

[Khalit]

let startElement = 2

var servicesSwiper = new Swiper ('#services', {
 slidesPerView: 1,
    speed: 750,
    spaceBetween: 32,
    virtualTranslate: true,
    slideToClickedSlide: true,
    draggable: true,
    initialSlide: startElement
});

$(".services .swiper-wrapper").css(
      "transform",
      `translateX(calc(${startElement * -360 + "px"}))`
    );

  servicesSwiper.on("slideChangeTransitionStart", function () {
    let transformValue = 0;
    //if ($(window).width() >= 1024) {
      transformValue = this.activeIndex * -360 + "px";
    // } else {
    //   transformValue =
    //     this.activeIndex * -100 + "% - 16px *" + this.activeIndex;
    // }

    $(".services .swiper-wrapper").css(
      "transform",
      `translateX(calc(${transformValue}))`
    );
  });