Use slide-box to show some images, how to make image's full width?

ionic-v1
1 
 <ion-content class="has-header">
<div class="list">
  <div class="item">
    <ion-slide-box>
      <ion-slide ng-repeat="picture in product.pictures">
        <img ng-src="{{picture.image.url}}?500x500"/>
      </ion-slide>
    </ion-slide-box>
  </div>
use slide-box to show some images, how to make image's full width ?
2

If you the slider as the base, then put ion-content inside the slides, you can do it.

1 Like
3

thanks for your help!but i add img:width100%; and the image disappeared!why?

4 
<ion-view title="Product" left-buttons="leftButtons" right-buttons="rightButtons" hide-nav-bar="true">
  <ion-header-bar align-title="left" class="bar-positive">   
    <a class="button icon-left ion-chevron-left" ng-click="goBack()">商品列表</a>
    <h1 class="title"></h1>
    <a class="button ion-share">分享</a>
  </ion-header-bar>
  <ion-content class="has-header">
    <div class="list">
      <div class="item">
        <ion-slide-box>
          <ion-slide ng-repeat="picture in product.pictures">
            <img ng-src="{{picture.image.url}}?500x500" />
          </ion-slide>
        </ion-slide-box>
      </div>
      <div class="item">
        <p>秒杀价：{{product.price}}</p>
      </div>
      <div class="item item-divider"></div>
      <div class="item">
        <h2>{{product.name}}</h2>
        <p>Nine Inch Nails</p>
      </div>

      <div class="item item-divider"></div>
      <div class="item">
        <p>评价晒单：</p>
      </div>

      <div class="item item-divider"></div>
      <div class="item">
        <p>也许你还喜欢：</p>
      </div>

    </div>
  </ion-content>
  <ion-footer-bar>
    <a class="button button-assertive" style="width:100%;margin-right:10px;">
      加入购物车
    </a>
    <a class="button button-balanced" style="width:100%;margin-right:45px;">
      轻松购
    </a>
    <a class="button icon ion-ios7-cart-outline"></a>
  </ion-footer-bar>
</ion-view>

this is my code for product.html page

5

Seems to work fine for me.

Though in your case, you wouldn’t need the css for the slider.

6

o!yes!your work well! i use the tabs! my index.html page!

<body ng-app="starter" animation="slide-left-right-ios7" ng-controller="HomeCtrl">
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar bar-header item-input-inset nav-title-slide-ios7">
      <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input type="search" placeholder="搜索美月无忧商品">
      </label>
    </ion-nav-bar>
    <!-- 
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>

    <script id="products.html" type="text/ng-template"></script>

    <script id="product.html" type="text/ng-template"></script>

  </body>