Search code examples
ionic-frameworkionic-view

how to make a horizontal swipe able card

enter image description here

I am working on an app using ionic and i want to reproduce something similar to this horizontal scrolling card but i am quite lost as is not my solution. I am wondering if someone has been able to do something similar should shed some light.

Solution

  • You can use ion-slide-box .

    You can customize the border,width, etc. For example I make invisible for:

    .slider-pager {
    display:none !important;
}

    And add border, fix the margin:

    .slider-slide {
    padding-top: 80px;
    color: #000;
    background-color: #fff;
    text-align: center;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    width: 200px !important;
    border: 1px solid #000;
    margin: 62px 56px
    padding-left: 20px;
    padding-right: 20px;
}

    Have a nice coding and make your own custom style!