Lease Slider

No notes defined.

<section class="sds-section -sectionSunken -overflowHidden">
    <div class="sds-section__innerWrapper">
        <div class="sds-section__inner">
            <div class="container">
                <div class="sds-stackLg">
                    <div class="sds-leaseSlider sds-slider -overflowVisible -navigationVisible -overflowVisible -inverted">

                        <!-- adjust row class for spacing between slides here -->
                        <div class="row row-xs no-bottom-gutter align-items-start">

                            <div class="sds-slider__inner swiper" data-swiper>

                                <!-- Additional required wrapper -->
                                <!-- adjust row class for spacing between slides here -->
                                <ul class="swiper-wrapper row row-xs flex-nowrap align-items-stretch-immediate no-bottom-gutter list-unstyled">
                                    <!-- Slides -->

                                    <li class="sds-leaseSlider__slide swiper-slide col-10 col-md-8 col-xxl-9">
                                        <div>
                                            <img class="img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=1200&zoomType=fullscreen" alt="">
                                        </div>
                                    </li>

                                    <li class="sds-leaseSlider__slide swiper-slide col-10 col-md-8 col-xxl-9">
                                        <div>
                                            <img class="img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=21&width=1200&zoomType=fullscreen" alt="">
                                        </div>
                                    </li>

                                    <li class="sds-leaseSlider__slide swiper-slide col-10 col-md-8 col-xxl-9">
                                        <div>
                                            <img class="img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=19&width=1200&zoomType=fullscreen" alt="">
                                        </div>
                                    </li>

                                    <li class="sds-leaseSlider__slide swiper-slide col-10 col-md-8 col-xxl-9">
                                        <div>
                                            <img class="img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=17&width=1200&zoomType=fullscreen" alt="">
                                        </div>
                                    </li>

                                </ul>

                                <div class="sds-leaseSlider__navigation">
                                    <div class="row row-xs">
                                        <div class="col-12 position-static">
                                            <p class="sds-formDisclaimer sds-leaseSlider__disclaimer">
                                                Photos non contractuelles
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <!-- adjust row class for spacing between slides here -->
                                <nav class="sds-leaseSlider__navigation sds-slider__navigation row row-xs flex-nowrap align-items-center">
                                    <div class="col-auto d-none d-md-flex">
                                        <div class="sds-slider__pagination swiper-pagination"></div>
                                    </div>
                                    <div class="sds-leaseSlider__colorOptionsWrapper col">
                                        <div class="sds-leaseSlider__colorNav" data-sds-gradient-overflow-h>
                                            <div class="sds-leaseSlider__colorNavWrapper" data-sds-gradient-overflow-h-wrapper>
                                                <div class="sds-leaseSlider__colorNavInner" data-sds-gradient-overflow-h-inner>

                                                    <button type="button" class="sds-badgeSelector sds-leaseSlider__colorSelector -colorOption -labelHiddenMobile" aria-pressed="false">

                                                        <span class="sds-colorOption" style="background-color: #000000"></span>

                                                        <span class="sds-badgeSelector__text">Noir</span>

                                                    </button>

                                                    <button type="button" class="sds-badgeSelector sds-leaseSlider__colorSelector -colorOption -labelHiddenMobile" aria-pressed="false">

                                                        <span class="sds-colorOption" style="background-color: #E9DB5C"></span>

                                                        <span class="sds-badgeSelector__text">Jaune</span>

                                                    </button>

                                                    <button type="button" class="sds-badgeSelector sds-leaseSlider__colorSelector -colorOption -labelHiddenMobile" aria-pressed="true">

                                                        <span class="sds-colorOption" style="background-color: #4D6E90"></span>

                                                        <span class="sds-badgeSelector__text">Bleu</span>

                                                    </button>

                                                    <button type="button" class="sds-badgeSelector sds-leaseSlider__colorSelector -colorOption -labelHiddenMobile" aria-pressed="false">

                                                        <span class="sds-colorOption" style="background-color: #22AA77"></span>

                                                        <span class="sds-badgeSelector__text">Vert</span>

                                                    </button>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col col-md-auto">
                                        <div class="row row-xs flex-md-row-reverse flex-nowrap">
                                            <div class="col col-md-auto">
                                                <button type="button" class="sds-btn -btnPrimary -block sds-leaseSlider__action">

                                                    <span class="sds-btn__text">Configurer</span>

                                                </button>
                                            </div>
                                            <div class="col-auto">
                                                <div class="sds-btnGroup">
                                                    <button type="button" class="sds-btn -iconBtn -btnSecondary swiper-button-prev">

                                                        <span class="sds-icon sds-icon-arrowprevious"></span>

                                                    </button>
                                                    <button type="button" class="sds-btn -iconBtn -btnSecondary swiper-button-next">

                                                        <span class="sds-icon sds-icon-arrownext"></span>

                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </nav>

                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="{{ namespace }}section -sectionSunken -overflowHidden">
	<div class="{{ namespace }}section__innerWrapper">
		<div class="{{ namespace }}section__inner">
			<div class="container">
				<div class="{{ namespace }}stackLg{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
					{% render "@spk-slider--lease",{
						classes: ["-overflowVisible", "-inverted"]
					},true %}
				</div>
			</div>
		</div>
	</div>
</section>