alexrainman / nativescript-carousel-view

CarouselView plugin for NativeScript
MIT License
16 stars 5 forks source link

Unable to swipe slides #14

Closed terreb closed 7 years ago

terreb commented 7 years ago

With the version 2.0.7 I get a new issue:) I unable to swipe slides (changing slides with buttons work though).

My config: nativescript 2.4.0 tns-core-modules 2.4.0 tns-ios 2.4.0 nativescript-carousel-view 2.0.7 simulator iPhone 6 iOS 10.1

To see the issue please pull the repo, run on emulator and try to swipe: https://github.com/terreb/nativescript-carousel-view-test

Also, I still unable to set slide height. There you will notice I set slide height in app.css (class .layout). All styles are applied perfectly except height:(

Please let me know if you need any further info on that.

terreb commented 7 years ago

Hmm, taps inside the slide stopped working either (try to click on "Remove me"). Am I doing something wrong in my code?

alexrainman commented 7 years ago

I believe the problem is the demo project itself. I just downloaded and i cannot run it :) But i can run without issues the original project where i created the plugin and everything works as expected.

alexrainman commented 7 years ago

Please, download the new demo project and run it.

terreb commented 7 years ago

I confirm when running demo from your project swiping works as expected. Hmm, weird I can not understand what's wrong with my code... I just made a few changes to your code and all of them seem valid.

One last question before closing this issue please: when you change slider-view.xml in your demo to:

<StackLayout loaded="onLoaded" horizontalAlignment="center" padding="12" height="100" backgroundColor="aqua" tap="stackTap">
    <Label text="{{ $parents['CarouselView'].position, $parents['CarouselView'].position }}" />
    <Label text="{{ first }}" tap="labelTap" class="message"/> 
    <Label text="{{ last }}"/>
    <Button text="Remove me" tap="buttonTap"/> 
</StackLayout>

(basically adding height="100" and backgroundColor="aqua" to StackLayout)

Don't you get something like (please see below)?

screen shot 2016-11-24 at 5 17 32 pm

How do I make the slide to be 100px?

alexrainman commented 7 years ago

Wait, all the js files were ignored.

terreb commented 7 years ago

Ok, I'm trying with the demo I downloaded a few hours ago. I see you made a new commit.

alexrainman commented 7 years ago

Now demo is ready.

terreb commented 7 years ago

Ok, if you try to change main-page.xml to:

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:controls="nativescript-carousel-view"
  navigatingTo="navigatingTo">

  <ActionBar title="Demo"/>

  <GridLayout columns="*" rows="auto * 50">
      <controls:CarouselView row="0" col="0" id="carouselView" position="0" orientation="0" interPageSpacing="5" templateSelector="{{ templateSelector }}" itemsSource="{{ itemsSource }}"/>
      <GridLayout row="2" col="0" columns="50, *, 50" rows="*" style.backgroundColor="lightgray">
          <Label tap="onPrev" text="Prev" row="0" col="0" style.textAlignment="center" style.verticalAlignment="center"/>
          <Label text="Add page" id="addPage" row="0" col="1" style.textAlignment="center" style.verticalAlignment="center"/>
          <Label tap="onNext" text="Next" row="0" col="2" style.textAlignment="center" style.verticalAlignment="center"/>
      </GridLayout>
  </GridLayout>

</Page>

Now the slide is not swiping nor reacting to taps. All code is valid, no?:)

alexrainman commented 7 years ago

Nope, all code is not valid. This part is wrong rows="auto * 50", that's why you cannot swipe or tap.

alexrainman commented 7 years ago

Also, the height of slides will be equal to the height of the CarouselView itself.

alexrainman commented 7 years ago

If you want slides 100px height then make the carousel 100px height

<Page
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:controls="nativescript-carousel-view"
  navigatingTo="navigatingTo">

  <ActionBar title="Demo"/>

  <GridLayout columns="*" rows="100 * 50">
      <controls:CarouselView row="0" col="0" id="carouselView" position="0" orientation="0" interPageSpacing="5" templateSelector="{{ templateSelector }}" itemsSource="{{ itemsSource }}"/>
      <Label row="1" col="0" text="Add page"/>
      <GridLayout row="2" col="0" columns="50, *, 50" rows="*" style.backgroundColor="lightgray">
          <Label tap="onPrev" text="Prev" row="0" col="0" style.textAlignment="center" style.verticalAlignment="center"/>
          <Label text="Add page" id="addPage" row="0" col="1" style.textAlignment="center" style.verticalAlignment="center"/>
          <Label tap="onNext" text="Next" row="0" col="2" style.textAlignment="center" style.verticalAlignment="center"/>
      </GridLayout>
  </GridLayout>

</Page>
terreb commented 7 years ago

Works perfectly with the recent demo (both height and swiping), thank you! Please close the issue.