Navigation überspringen Sitemap anzeigen
<header id="header">
	<div class="row claimContainer">
		<p class="col claim">Header Swiper
			<span>Simple full width/height header Slideshow</span>
		</p>
	</div>
	<div class="swiper-container headerSwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="elephant"></div>
			</div>
			<div class="swiper-slide">
				<div class="fox"></div>
			</div>
			<div class="swiper-slide">
				<div class="butterfly"></div>
			</div>
			<div class="swiper-slide">
				<div class="deer"></div>
			</div>
			<div class="swiper-slide">
				<div class="dove"></div>
			</div>
			<div class="swiper-slide">
				<div class="dog"></div>
			</div>
		</div>
	</div>
</header>
// Basic full width Slideshow with Images as backround-image
.headerSwiper {
	.swiper-wrapper {
		.swiper-slide {
			> div {
				position: relative;
				display: block;
				height: calc(100vh - 70px); // Px is your Nav height

				@include breakpoint(medium) {
					height: calc(100vh - 105px); // Px is your Nav height
				}

				@include breakpoint(huge) {
					height: calc(100vh - 162px); // Px is your Nav height
				}

				&.elephant {
					background: url(/workingguideExamples/images/slideshow/elephant.jpg) no-repeat center/cover;	
				}
				&.fox {
					background: url(/workingguideExamples/images/slideshow/fox.jpg) no-repeat center/cover;	
				}
				&.butterfly {
					background: url(/workingguideExamples/images/slideshow/butterfly.jpg) no-repeat center/cover;	
				}
				&.deer {
					background: url(/workingguideExamples/images/slideshow/deer.jpg) no-repeat center/cover;	
				}
				&.dove {
					background: url(/workingguideExamples/images/slideshow/dove.jpg) no-repeat center/cover;	
				}
				&.dog {
					background: url(/workingguideExamples/images/slideshow/dog.jpg) no-repeat center/cover;
				}

			}
		}
	}
}
function headerSwiper() {
    var headerSwiper = new Swiper('.swiper-container.headerSwiper', {
        speed: 500,
        grabCursor: true,
        loop: true,
        keyboard: true,
        enabled: true,
        autoplay: {
            delay: 4000,
        }
    });       
}
headerSwiper();

Mobile Teaser Slideshow Destroy on Desktop (Text only)

Elefanten

Elefanten sind die größten noch lebenden Landtiere. Signifikante Merkmale sind neben dem Rüssel vor allem bei erwachsenen Tieren die beiden Stoßzähne des Oberkiefers und der horizontale Zahnwechsel.

Mehr Info

Füchse

Ein Fuchs ist ein Vertreter der Familie der Hunde (Canidae). Im deutschen Sprachgebrauch ist damit meistens der Rotfuchs gemeint.

Mehr Info

Schmetterlinge

Die deutsche Bezeichnung „Schmetterling“, 1501 erstmals belegt, kommt vom slawischstämmigen ostmitteldeutschen Wort Schmetten (das heißt Schmand, Rahm), von dem einige Arten oft angezogen werden.

More Information

Rehe

Das Reh besiedelte ursprünglich Waldrandzonen und -lichtungen. Es hat sich aber erfolgreich eine Reihe sehr unterschiedlicher Habitate erschlossen und kommt mittlerweile auch in offener, fast deckungsloser Agrarsteppe vor.

Mehr Info

Tauben

Tauben ernähren sich überwiegend von pflanzlicher Nahrung, die von den meisten Arten unzerteilt verschluckt wird.

Mehr Info

Hunde

Der Haushund (Canis lupus familiaris) ist ein Haustier und wird als Heim- und Nutztier gehalten. Seine wilde Stammform ist der Wolf, dem er als Unterart zugeordnet wird.

Mehr Info
<div class="row">
	<div class="swiper-container teaserSwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div>
					<p class="h2">Elefanten</p>
					<p>Elefanten sind die größten noch lebenden Landtiere. Signifikante Merkmale sind neben dem Rüssel vor allem bei erwachsenen Tieren die beiden Stoßzähne des Oberkiefers und der horizontale Zahnwechsel.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Füchse</p>
					<p>Ein Fuchs ist ein Vertreter der Familie der Hunde (Canidae). Im deutschen Sprachgebrauch ist damit meistens der Rotfuchs gemeint.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Schmetterlinge</p>
					<p>Die deutsche Bezeichnung „Schmetterling“, 1501 erstmals belegt, kommt vom slawischstämmigen ostmitteldeutschen Wort Schmetten (das heißt Schmand, Rahm), von dem einige Arten oft angezogen werden.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn white">More Information</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Rehe</p>
					<p>Das Reh besiedelte ursprünglich Waldrandzonen und -lichtungen. Es hat sich aber erfolgreich eine Reihe sehr unterschiedlicher Habitate erschlossen und kommt mittlerweile auch in offener, fast deckungsloser Agrarsteppe vor.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Tauben</p>
					<p>Tauben ernähren sich überwiegend von pflanzlicher Nahrung, die von den meisten Arten unzerteilt verschluckt wird.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
			<div class="swiper-slide">
				<div>
					<p class="h2">Hunde</p>
					<p>Der Haushund (Canis lupus familiaris) ist ein Haustier und wird als Heim- und Nutztier gehalten. Seine wilde Stammform ist der Wolf, dem er als Unterart zugeordnet wird.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn">Mehr Info</a>
				</div>
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
</div>
// If you want to use these two mixins set them in a seperated mixins.scss

@mixin row {
	margin-left: auto;
	margin-right: auto;
	max-width: rem($rowMaxWidth);
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
}

@mixin col4 {
	width: 100%;
	max-width: calc(33.33333% - #{rem($baseGap*2)});
	flex-basis: calc(33.33333% - #{rem($baseGap*2)});
	margin: rem($baseGap);
	display: inline-block;
	transition: 300ms all;
	box-sizing: border-box;
}

// ------------------------------------------------------------

// Mobile Teaser Slider / Desktop Simple Text Teaser (No Slider)
.teaser1 {
	background: $dark;
	overflow: hidden;
	padding-top: rem(60px);

	@include breakpoint(large) {
		padding-top: rem(100px);
	}

	.row {
		.teaserSwiper {	
			@include breakpoint(large) {
				width: 100%;
			}

			.swiper-wrapper {
				@include breakpoint(large) {
					@include row; // requires mixin
				}
			
				.swiper-slide {
					height: auto; // auto = all same height || 100% = Element height
					background: $light;

					@include breakpoint(large) {
						@include col4; // requires mixin
					}

					> div {	
						position: relative;
						display: block;
						padding: rem(60px) rem($baseGap);
					}

					&:hover {
						@include breakpoint(large) {
							background: $secondary;
						}
					}
				}
			}

			.swiper-pagination {
				@include breakpoint(large) {
					display: none;
				}
			}
		}
	}
}
function teaserSwiper() {

    var destroySwiper = false;

    var teaserSwiper = new Swiper('.swiper-container.teaserSwiper', {
        speed: 500,
        grabCursor: true,
        loop: true,
        centeredSlides: true,
        slidesPerView: 1.5,
        spaceBetween: 20,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
        breakpoints:
        {
            // if window width is <= 479px
            479: {
                slidesPerView: 1.2,
            },
            // if window width is <= 639px
            639: {
                slidesPerView: 1.5,
            },
            // if window width is <= 991px
            991: {
                slidesPerView: 2.1,
            },
        }
    });
    // Destroy or Init Swiper
    swiper_init = function(init)
    {
        if (breakpoint('large') && teaserSwiper.params.init && !init)
        {
            teaserSwiper.destroy(false, true);
            teaserSwiper.params.init = false;
        }
        else if (!breakpoint('large') && !teaserSwiper.params.init && !init)
        {
            teaserSwiper.params.init = true
            teaserSwiper.init();
        }
        else if (!breakpoint('large') && init)
        {
            teaserSwiper.init();
        }
    };
    swiper_init(destroySwiper, true);

    window.addEventListener('resize', function()
    {
        swiper_init(false);
    });
}

teaserSwiper();

Mobile Teaser Slideshow Destroy on Desktop (Image+Text)

Elefanten

Elefanten sind die größten noch lebenden Landtiere. Signifikante Merkmale sind neben dem Rüssel vor allem bei erwachsenen Tieren die beiden Stoßzähne des Oberkiefers und der horizontale Zahnwechsel.

See More

Füchse

Ein Fuchs ist ein Vertreter der Familie der Hunde (Canidae). Im deutschen Sprachgebrauch ist damit meistens der Rotfuchs gemeint.

See More

Schmetterlinge

Die deutsche Bezeichnung „Schmetterling“, 1501 erstmals belegt, kommt vom slawischstämmigen ostmitteldeutschen Wort Schmetten (das heißt Schmand, Rahm), von dem einige Arten oft angezogen werden.

See More

Rehe

Das Reh besiedelte ursprünglich Waldrandzonen und -lichtungen. Es hat sich aber erfolgreich eine Reihe sehr unterschiedlicher Habitate erschlossen und kommt mittlerweile auch in offener, fast deckungsloser Agrarsteppe vor.

See More

Tauben

Tauben ernähren sich überwiegend von pflanzlicher Nahrung, die von den meisten Arten unzerteilt verschluckt wird.

See More
<div class="row">
	<div class="swiper-container teaserImageSwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide large-6 elephant">
				<div class="teaserInner">
					<p class="h1"><strong>Elefanten</strong></p>
					<p>Elefanten sind die größten noch lebenden Landtiere. Signifikante Merkmale sind neben dem Rüssel vor allem bei erwachsenen Tieren die beiden Stoßzähne des Oberkiefers und der horizontale Zahnwechsel.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn"><span>See More</span></a>
				</div>
			</div>
			<div class="swiper-slide large-6 fox">
				<div class="teaserInner">
					<p class="h1"><strong>Füchse</strong></p>
					<p>Ein Fuchs ist ein Vertreter der Familie der Hunde (Canidae). Im deutschen Sprachgebrauch ist damit meistens der Rotfuchs gemeint.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn"><span>See More</span></a>
				</div>
			</div>
			<div class="swiper-slide large-4 butterfly">
				<div class="teaserInner">
					<p class="h1"><strong>Schmetterlinge</strong></p>
					<p>Die deutsche Bezeichnung „Schmetterling“, 1501 erstmals belegt, kommt vom slawischstämmigen ostmitteldeutschen Wort Schmetten (das heißt Schmand, Rahm), von dem einige Arten oft angezogen werden.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn"><span>See More</span></a>
				</div>
			</div>
			<div class="swiper-slide large-4 deer">
				<div class="teaserInner">
					<p class="h1"><strong>Rehe</strong></p>
					<p>Das Reh besiedelte ursprünglich Waldrandzonen und -lichtungen. Es hat sich aber erfolgreich eine Reihe sehr unterschiedlicher Habitate erschlossen und kommt mittlerweile auch in offener, fast deckungsloser Agrarsteppe vor.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn"><span>See More</span></a>
				</div>
			</div>
			<div class="swiper-slide large-4 dove">
				<div class="teaserInner">
					<p class="h1"><strong>Tauben</strong></p>
					<p>Tauben ernähren sich überwiegend von pflanzlicher Nahrung, die von den meisten Arten unzerteilt verschluckt wird.</p>
					<a href="<?php echo SITE_ROOT?>/" title="" class="btn"><span>See More</span></a>
				</div>
			</div>
		</div>
	</div>
</div>
// If you want to use these three mixins set them in a seperated mixins.scss

@mixin row {
	margin-left: auto;
	margin-right: auto;
	max-width: rem($rowMaxWidth);
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
}

@mixin col4 {
	width: 100%;
	max-width: calc(33.33333% - #{rem($baseGap*2)});
	flex-basis: calc(33.33333% - #{rem($baseGap*2)});
	margin: rem($baseGap);
	display: inline-block;
	transition: 300ms all;
	box-sizing: border-box;
}

@mixin col6 {
	width: 100%;
	max-width: calc(50% - #{rem($baseGap*2)});
	flex-basis: calc(50% - #{rem($baseGap*2)});
	margin: rem($baseGap);
	display: inline-block;
	transition: 300ms all;
	box-sizing: border-box;
}

// ------------------------------------------------------------

// Mobile Teaser Slider / Desktop Image+Text Teaser (No Slider)
.teaser2 {
	.teaserImageSwiper {
		width: 100%;
		.swiper-wrapper {
			@include breakpoint(large) {
				@include row; // requires mixin
				height: auto;
			}

			.swiper-slide {
				position: relative;
				height: auto; // auto = alle gleich hoch, 100% = Element Höhe

				.teaserInner {
					position: relative;
					display: inline-block;
					text-align: center;
					z-index: 2;

					@include breakpoint(large) {
						width: 100%;
					}

					p {
						text-align: center;
						color: $light;
					}
				}

				&.large-4  {
					@include breakpoint(large) {
						@include col4; // requires mixin
					}

					.teaserInner {
						padding: 6rem 2rem;

						@include breakpoint(full) {
							padding: 10rem 4rem;
						}
					}
				}

				&.large-6 {
					@include breakpoint(large) {
						@include col6; // requires mixin
					}

					.teaserInner {
						padding: 6rem 2rem;
						@include breakpoint(giant) {
							padding: 9rem 4rem;
						}

						@include breakpoint(full) {
							padding: 9rem 9rem;
						}
					}
				}

				// Background Image als after, bietet mehr Möglichkeiten für den Hover
				&:after {
					content: '';
					position: absolute;
					display: block;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 100%;
					height: 100%;
					z-index: 1;
					transition: 300ms all;
				}

				&.elephant {
					&:after {
						background: url(/workingguideExamples/images/slideshow/elephant-dark.jpg) no-repeat center/cover;
					}
				}

				&.fox {
					&:after {
						background: url(/workingguideExamples/images/slideshow/fox-dark.jpg) no-repeat center/cover;
					}
				}

				&.butterfly {
					&:after {
						background: url(/workingguideExamples/images/slideshow/butterfly-dark.jpg) no-repeat center/cover;
					}
				}

				&.deer {
					&:after {
						background: url(/workingguideExamples/images/slideshow/deer-dark.jpg) no-repeat center/cover;
					}
				}

				&.dove {
					&:after {
						background: url(/workingguideExamples/images/slideshow/dove-dark.jpg) no-repeat center/cover;
					}
				}

				&:hover {
					&:after {
						transform: translate(-50%, -50%) scale(.95);
					}
				}
			}
		}
	}
}
function teaserImageSwiper() {

    var destroySwiper = false;

    var teaserImageSwiper = new Swiper('.swiper-container.teaserImageSwiper', {
        speed: 500,
        grabCursor: true,
        loop: true,
        centeredSlides: true,
        slidesPerView: 1.5,
        spaceBetween: 20,
        breakpoints:
        {
            // if window width is <= 479px
            479: {
                slidesPerView: 1.2,
            },
            // if window width is <= 639px
            639: {
                slidesPerView: 1.5,
            },
            // if window width is <= 991px
            991: {
                slidesPerView: 2.1,
            },
        }
    });
    swiper_init = function(init)
    {
        if (breakpoint('large') && teaserImageSwiper.params.init && !init)
        {
            teaserImageSwiper.destroy(false, true);
            teaserImageSwiper.params.init = false;
        }
        else if (!breakpoint('large') && !teaserImageSwiper.params.init && !init)
        {
            teaserImageSwiper.params.init = true
            teaserImageSwiper.init();
        }
        else if (!breakpoint('large') && init)
        {
            teaserImageSwiper.init();
        }
    };
    swiper_init(destroySwiper, true);

    window.addEventListener('resize', function()
    {
        swiper_init(false);
    });
}

teaserImageSwiper();

Mobile Teaser Slideshow Destroy on Desktop (Image+Text Variant 2)

<div class="row">
	<div class="swiper-container teaserImageSwiper2">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<a href="<?php echo SITE_ROOT?>/" title="Elefant" class="elephant">
					<p>
						<span class="h1">Elefanten</span>
						Elefanten sind die größten noch lebenden Landtiere. Signifikante Merkmale sind neben dem Rüssel vor allem bei erwachsenen Tieren die beiden Stoßzähne des Oberkiefers und der horizontale Zahnwechsel.
					</p>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="<?php echo SITE_ROOT?>/" title="Fuchs" class="fox">
					<p>
						<span class="h1">Füchse</span>
						Ein Fuchs ist ein Vertreter der Familie der Hunde (Canidae). Im deutschen Sprachgebrauch ist damit meistens der Rotfuchs gemeint.
					</p>
				</a>
			</div>
			<div class="swiper-slide">
				<a href="<?php echo SITE_ROOT?>/" title="Schmetterling" class="butterfly">
					<p>
						<span class="h1">Schmetterlinge</span>
						Die deutsche Bezeichnung „Schmetterling“, 1501 erstmals belegt, kommt vom slawischstämmigen ostmitteldeutschen Wort Schmetten (das heißt Schmand, Rahm), von dem einige Arten oft angezogen werden.
					</p>
				</a>
			</div>
		</div>
	</div>
</div>
// If you want to use this mixin set it in a seperated mixins.scss

@mixin col4 {
	width: 100%;
	max-width: calc(33.33333% - #{rem($baseGap*2)});
	flex-basis: calc(33.33333% - #{rem($baseGap*2)});
	margin: rem($baseGap);
	display: inline-block;
	transition: 300ms all;
	box-sizing: border-box;
}

// ------------------------------------------------------------

.teaser3 {
	background: $dark;
	padding: rem(60px) 0;
	
	@include breakpoint(large) {
		padding: rem(100px) 0;
	}

	.teaserImageSwiper2 {
		width: 100%;
		
		.swiper-wrapper {
			.swiper-slide {
				height: auto;

				@include breakpoint(large) {
					@include col4;
				}	

				a {
					position: relative;
					display: block;
					height: 100%;
					background: $light;

					&:before {
						content: '';
						position: relative;
						display: block;
						width: 100%;
						height: auto;
						padding: rem(120px) 0;

						@include breakpoint(large) {
							padding: rem(200px) 0;
						}
					}

					&.elephant {
						&:before {
							background: url(/workingguideExamples/images/slideshow/elephant.jpg) no-repeat center/cover;
						}
					}

					&.fox {
						&:before {
							background: url(/workingguideExamples/images/slideshow/fox.jpg) no-repeat center/cover;
						}
					}

					&.butterfly {
						&:before {
							background: url(/workingguideExamples/images/slideshow/butterfly.jpg) no-repeat center/cover;
						}
					}

					p {
						padding: 2rem;
					}
				}
			}
		}
	}
}
function teaserImageSwiper() {

    var destroySwiper = false;

    var teaserImageSwiper = new Swiper('.swiper-container.teaserImageSwiper2', {
        speed: 500,
        grabCursor: true,
        loop: true,
        centeredSlides: true,
        slidesPerView: 1.5,
        spaceBetween: 20,
        breakpoints:
        {
            // if window width is <= 479px
            479: {
                slidesPerView: 1.2,
            },
            // if window width is <= 639px
            639: {
                slidesPerView: 1.5,
            },
            // if window width is <= 991px
            991: {
                slidesPerView: 2.1,
            },
        }
    });
    swiper_init = function(init)
    {
        if (breakpoint('large') && teaserImageSwiper.params.init && !init)
        {
            teaserImageSwiper.destroy(false, true);
            teaserImageSwiper.params.init = false;
        }
        else if (!breakpoint('large') && !teaserImageSwiper.params.init && !init)
        {
            teaserImageSwiper.params.init = true
            teaserImageSwiper.init();
        }
        else if (!breakpoint('large') && init)
        {
            teaserImageSwiper.init();
        }
    };
    swiper_init(destroySwiper, true);

    window.addEventListener('resize', function()
    {
        swiper_init(false);
    });
}

teaserImageSwiper();

Halfpage Slider (Includes Lazyload)

  • Elefanten
  • Füchse
  • Schmetterlinge
<div class="row middle breakRight">
	<div class="col large-6">
		<p class="h1">Halfpage Slider <span>(new Framework needed)</span></p>
		<ul>
			<li>Elefanten</li>
			<li>Füchse</li>
			<li>Schmetterlinge</li>
		</ul>
	</div>
	<div class="col large-6 cut-auto swiper-container halfpageSwiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="elephant swiper-lazy" data-background="/workingguideExamples/images/slideshow/elephant.jpg">
					<div class="swiper-lazy-preloader"></div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="fox swiper-lazy" data-background="/workingguideExamples/images/slideshow/fox.jpg">
					<div class="swiper-lazy-preloader"></div>
				</div>
				
			</div>
			<div class="swiper-slide">
				<div class="butterfly swiper-lazy" data-background="/workingguideExamples/images/slideshow/butterfly.jpg">
					<div class="swiper-lazy-preloader"></div>
				</div>
			</div>
		</div>
		<div class="halfpagePagination"></div>
	</div>
</div>
.teaser4 {
	padding: rem(60px) 0;
	
	@include breakpoint(large) {
		padding: rem(100px) 0;
	}
	
	.row {
		.halfpageSwiper {
			width: 100%;

			@include breakpoint(large) {
				padding-left: rem($baseGap); // Prevent Box Shadow to get cut
			}

			.swiper-wrapper {
				padding: rem(60px) 0; // Just needed for scaling active slide

				.swiper-slide {
					>div {
						position: relative;
						display: block;
						padding: rem(200px) 0;
						transition: 300ms all;
						box-shadow: -6px 6px 13px -4px rgba(0,0,0,0.6);
						
						// Just needed with lazyloading
						background-repeat: no-repeat;
						background-position: center;
						background-size: cover; 
					}

					&.swiper-slide-active {
						> div {
							transform: scale(1.1);
							margin: 0 20px;
						}
					}
				}
			}

			.halfpagePagination {
				text-align: center;
			}
		}
	}
}
function halfpageSwiper() {

    var halfpageSwiper = new Swiper('.swiper-container.halfpageSwiper', {
        speed: 500,
        grabCursor: true,
        loop: true,
        centeredSlides: false,
        slidesPerView: 3,
        spaceBetween: 40,
        keyboard: true,
        enabled: true,
        preloadImages: false,
        lazy: true,
        watchSlidesVisibility: true,
         pagination: {
            el: '.halfpagePagination',
            type: 'bullets',
        },
        breakpoints:
        {
            1600: {
                slidesPerView: 2,
                setWrapperSize: false,
            },
            1199: {
                slidesPerView: 1.5,
                centeredSlides: false,
                spaceBetween: 25,
            },
            991: {
                slidesPerView: 1.5,
                centeredSlides: true,
                spaceBetween: 40,
            },
            799: {
                slidesPerView: 1.5,
                centeredSlides: true,
                spaceBetween: 20,
            },
            639: {
                slidesPerView: 1.2,
                centeredSlides: true,
                spaceBetween: 10,
            }
        }
    });
}

halfpageSwiper();
XXXXXXXXXX - Logo
Zum Seitenanfang