Не работает реализация ion-слайдов в ion-menu

Я пытаюсь реализовать «скользящие изображения» в боковом меню Ionic-3.

Вот мой код:

<ion-menu [content]="content">
  <ion-content>
        <ion-slides>
            <ion-slide>
                <img class="slide-image" src="img1.png">
            </ion-slide>
            <ion-slide>
                <img class="slide-image" src="img2.png">
            </ion-slide>
            <ion-slide>
                <img class="slide-image" src="img3.png">
            </ion-slide>
        </ion-slides>

        <ion-list>
          <p>some menu items</p>
        </ion-list>
  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content></ion-nav>

Элементы отображаются правильно, но проблема в том, что <ion-slide> ведет себя как горизонтальная прокрутка в боковом меню.

Я попытался отключить жест смахивания в боковом меню, но поведение <ion-slide> сохраняется.

Даже я пытался использовать slideNext и slidePrev методы Slides, но они не работают.

Есть ли способ реализовать скользящие изображения в боковом меню с помощью Ionic-3 или сторонней библиотеки?


javascript ionic3 jquery slideshow ionic2
person Rohit Gupta    schedule 02.06.2017    source источник
comment
Я не понимаю, в чем проблема? Как вы хотите, чтобы слайд вел себя?   -  person Jose Rojas    schedule 02.06.2017
comment
@JoseRojas Я хочу вести себя как слайд. Я имею в виду, что когда я немного прокручиваю влево, он должен автоматически переходить к следующему слайду, но он просто прокручивает это немного, как горизонтальную прокрутку. Когда я помещаю тот же код <ion-slides> в тело некоторой страницы, он ведет себя отлично.   -  person Rohit Gupta    schedule 05.06.2017

Ответы (2)


arrow_upward
0
arrow_downward

Проверяя ионные слайды в меню, они работают нормально в боковом меню. Взгляните на эту ссылку. эти слайды представляют собой только слайды с разноцветным фоном.

реализация находится в составе:

 @App({
  template: `
    <ion-menu [content]="content">

      <ion-toolbar>
        <ion-title>Pages</ion-title>
      </ion-toolbar>

      <ion-content>
        <ion-slides pager>

          <ion-slide style="background-color: green">
            <h2>Slide 1</h2>
          </ion-slide>

          <ion-slide style="background-color: blue">
            <h2>Slide 2</h2>
          </ion-slide>

          <ion-slide style="background-color: red">
            <h2>Slide 3</h2>
          </ion-slide>

        </ion-slides>
      </ion-content>

    </ion-menu>

    <ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

  `
})
person Jose Rojas    schedule 07.06.2017

arrow_upward
0
arrow_downward

Выполнение этой работы требует небольшой начальной загрузки, чтобы обеспечить правильную инициализацию базовой библиотеки Swiper. Ионное меню начинается с display:none, поэтому Swiper не может правильно прочитать размер, используя clientWidth на контейнере слайдов.

См. Мой ответ здесь для кода, который показывает, как решить эту проблему: Можно ли использовать слайды на ионной боковой панели

person Brownoxford    schedule 29.06.2019