我创建了一个图像滑块。 我希望我的图片可以点击

Question

When ever I add an event on the image, it seems to be blocked by something, so my function is not running.

This is my slider:

<ion-slide-box slide-interval="4000" auto-play="false" does-continue="true" show-pager="true">
    <ion-slide>
        <div class="stack-con">
            <div class="layer1">
                <p class="text-center animation-fadeIn">
                    <img style="width: 28%;"src="images/terminus_63_img2.jpg" ng-click="warranty.byy();"/>
                    <img style="width: 28%;" src="images/terminus_63_img2.jpg" on-tap="warranty.byy('images/terminus_63_img2.jpg');">
                    <img style="width: 28%;" src="images/terminus_63_img2.jpg" on-tap="warranty.byy('images/terminus_63_img2.jpg');">
                </p>
            </div>
            <div class="layer2">
                <div class="text-center animation-slideDown hidden-x text-shadow" style="padding-top: 15px; font-size: 15px; color: white;"></div>
            </div>
        </div>
    </ion-slide>
</ion-slide-box>

Any suggestions? I need the images to run the function every time I click em. Thanks in advance.

Answer 1

have you tried wrapping your img with something? Like an <a>

Answer 2

This is your Code Running example DEMO Click here

you missed to close first two images tags too

<ion-slide-box slide-interval="4000" auto-play="false" does-continue="true" show-pager="true">
    <ion-slide>
        <div class="stack-con">
            <div class="layer1">
                <p class="text-center animation-fadeIn">
                    <a><img style="width: 28%;"src="images/terminus_63_img2.jpg" ng-click="warranty.byy();"/></a>
                        <a><img style="width: 28%;" src="images/terminus_63_img2.jpg" on-tap="warranty.byy('images/terminus_63_img2.jpg');"/></a>
                        <a><img style="width: 28%;" src="images/terminus_63_img2.jpg" on-tap="warranty.byy('images/terminus_63_img2.jpg');"/></a>
                </p>
            </div>
            <div class="layer2">
                <div class="text-center animation-slideDown hidden-x text-shadow" style="padding-top: 15px; font-size: 15px; color: white;"></div>
            </div>
        </div>
    </ion-slide>
</ion-slide-box>