<div class="volvo_slider col-sm-12 col-md-12 col-lg-9 col-xl-9" id="pGallery"> <div class="main-card-car-slider" id="carGallery" v-if="showGallery"> <ul class="nav nav-tabs nav-tabs-card-car" id="modelTab" role="tablist"> <li class="nav-item" v-if="(options.firstImage || gallery) && options.hasVideo"> <button class="nav-link" v-on:click="setStep('gallery')" id="gallery-tab" :class="gallery ? 'active show' : ''" data-toggle="tab" data-target="#gallery" role="tab" aria-controls="gallery" aria-selected="true">{{ 'car_page.slider_photo'|trans({}, 'dc_base') }}</button> </li> <li class="nav-item" v-if="gallery && options.hasVideo"> <button class="nav-link" v-on:click="setStep('video')" id="video-tab" :class="!gallery ? 'active show' : ''" data-toggle="tab" data-target="#video" role="tab" aria-controls="video" aria-selected="false">{{ 'car_page.slider_video'|trans({}, 'dc_base') }}</button> </li> </ul> <div class="tab-content" id="modelTabContent"> <div class="tab-pane fade show active" :class="step == 'gallery' ? 'active show' : ''" id="gallery" role="tabpanel" aria-labelledby="exterior-tab" v-show="gallery"> <div id="carouselExteriorControls" @click="initGalery" class="carousel slide" data-ride="false" data-interval="false"> <div class="carousel-inner" id="image-gallery-image"> <div class="carousel-item" v-if="image.image" :class="key == 0 ? 'active' : ''" :data-src="image.full" v-for="image,key in gallery"> <picture v-if="image.metadata" alt="{{ model.modelName }}"> <source :srcset="image.image_webp" type="image/webp"> <source :srcset="image.image"> <img width="868" height="570" class="d-block w-100 h-auto" :src="image.image" v-bind:alt="image.metadata.alt" v-bind:title="image.metadata.title"> </picture> <picture v-else alt="{{ model.modelName }}"> <source :srcset="image.image_webp" type="image/webp"> <source :srcset="image.image"> <img width="868" height="570" class="d-block w-100 h-auto" :src="image.image" title="{{ model.brand }} {{ model.modelName }}" alt="{{ model.brand }} {{ model.modelName }} - {{ model.dealer }}" > </picture> </div> </div> <a @click="initGalery" class="carousel-control-prev" href="#carouselExteriorControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a @click="initGalery" class="carousel-control-next" href="#carouselExteriorControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> </div> <div class="tab-pane fade" id="video" role="tabpanel" aria-labelledby="video-tab" v-show="video && step == 'video'"> <div id="carouselVideoControls" class="carousel slide" data-ride="carousel" data-interval="false"> <div class="carousel-inner" id="image-gallery-video"> <div class="carousel-item --video" :class="key == 0 ? 'active' : ''" v-for="videoItem,key in video"> <iframe width="868" height="574" :src="'https://www.youtube.com/embed/'+videoItem.id+'?rel=0'" frameborder="0" allowfullscreen></iframe> </div> </div> <a class="carousel-control-prev" href="#carouselVideoControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#carouselVideoControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> </div> </div> </div></div>