Subversion-Projekte lars-tiefland.marine-sales.de

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
2 lars 1 
<!-- hersteller_slider.tpl -->
2 
<script src="JavaScript/splide.min.js"></script>
3 
<link rel="stylesheet" href="/JavaScript/splide-css/splide.min.css" />
4 
<link rel="stylesheet" href="/JavaScript/splide-css/themes/splide-default.min.css" />
5 
<style>
6 
    #hersteller-slider {
7 
        background:#fff;
8 
        width: 100%;
9 
        margin: 1% 0 1% 0;
10 
    }
11 
 
12 
    #hersteller-slider .splide__track .splide__list .splide__slide {
13 
        background-position: center center !important;
14 
        background-repeat: no-repeat !important;
15 
        background-size: 90% !important;
16 
        /*background-color: rgb(25, 25, 25) !important;
17 
        filter: grayscale(1) invert(1);*/
18 
    }
19 
 
20 
    #hersteller-slider .splide__track .splide__list .splide__slide img {
21 
        border-radius: 0px;
22 
        height: 150px;
23 
    }
24 
 
25 
    #hersteller-slider .splide__arrows .splide__arrow {
26 
        display:none !important;
27 
    }
28 
</style>
29 
<div id="hersteller-slider" class="splide">
30 
    <div class="splide__track">
31 
        <ul class="splide__list">
32 
        {foreach $herstellerListe_footer as $key => $h}
33 
            {if $h.Eigenschaft_1==1}
34 
                <a href="{$h.herstellerLink}" class="splide__slide">
35 
                    <img src="{$ini.Hersteller.logoPath}{$h.Logo1}" alt="{$h.Name}" />
36 
                </a>
37 
            {/if}
38 
        {/foreach}
39 
        </ul>
40 
    </div>
41 
</div>
42 
<script>
43 
    document.addEventListener("DOMContentLoaded", function () {
44 
        new Splide("#hersteller-slider", {
45 
            type: "loop",
46 
            perPage: 12,
47 
            perMove: 1,
48 
            cover: true,
49 
            pagination: false,
50 
            autoplay: true,
51 
            interval: 4000,
52 
            breakpoints: {
53 
                600: {
54 
                    perPage: 2,
55 
                    perMove: 1,
56 
                },
57 
                768: {
58 
                    perPage: 4,
59 
                    perMove: 1,
60 
                },
61 
                1024: {
62 
                    perPage: 8,
63 
                    perMove: 1,
64 
                },
65 
                1440: {
66 
                    perPage: 12,
67 
                    perMove: 1,
68 
                },
69 
            },
70 
            fixedHeight: 100,
71 
            gap: "1%",
72 
            padding: 0,
73 
        }).mount();
74 
    });
75 
</script>
76 
 
77 
 
78 
<!-- /hersteller_slider.tpl -->