Here is the markup for an offer item
<div class="column large-6 medium-6 mb40"> <div class="wrapper component offer-item-wrapper js-offer-block"> <div class="row"> <div class="column small-12 large-6"> <div class="wrapper ovh pr offer-thumb js-show-details pointer"> <span class="lines-container pa fullheight fullwidth wrapper"></span> <img src="img/theme/offers/thumb/1.jpg" alt="" class="image fullwidth pointer" data-path="img/theme/offers/large/item1/" data-large-images='["1.jpg", "2.jpg", "3.jpg"]'> </div> </div> <div class="column small-12 large-6"> <div class="wrapper"> <h4 class="title text fz6 fw3 lh12 ctm mb5 pointer js-show-details js-name">Offer name</h4> <p class="description text fz1 c6 lh2 mb10 fsi js-description">Offer description</p> <p class="text cm fz6 lh1 js-cost">Offer price</p> </div> </div> </div> <div class="row hide"> <div class="column large-12"> <div class="days-list"> <!-- day item --> <div class="day"> <p class="js-title">Day title</p> <p class="js-acc-description">Day description</p> </div> </div> </div> </div> </div> </div>
In data-path attribute set the path to offer large images.
In data-large-images set the images name.