How can get around this issue in my image gallery?

问题:

This is how I have my HTML for the images in my gallery:

<p class="crop">
<img src="image1.jpg" alt="image1.jpg" /></p>
<p class="crop">
<img src="image2.jpg" alt="image2.jpg" /></p>

However, using p classes like this makes them separate images instead of a group of images and therefore my next/previous arrows don't work.

I need to make them a group of images so the arrows in the gallery can work again properly, but I want to keep the p class as I need it to crop the images. How can I get around this?

回答1:

Replace the p with 1 div so it would look like:

<div class="crop">
<img>
<img>
</div>

Add more images as needed (filling in the image data)

In the CSS you can then use:

.crop img {}

to crop the images!

Hope this helps :)

回答2:

Move the crop logic to the img tag

<img class="crop" src="image1.jpg" alt="image1.jpg" />
<img class="crop" src="image2.jpg" alt="image2.jpg" />