mirror of
https://git.selfprivacy.org/SelfPrivacy/selfprivacy.org.git
synced 2025-02-05 07:50:37 +00:00
fix: carousel-indicators
This commit is contained in:
nevfy
parent
e9836ae31c
commit
96680d67e4
|
|
@ -5,31 +5,12 @@ linkTitle = "SelfPrivacy"
|
|||
+++
|
||||
|
||||
{{< blocks/section color="dark" type="section" >}}
|
||||
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
|
||||
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="container rounded">
|
||||
<div id="screenshotsCarouselControls" class="carousel" data-bs-ride="false">
|
||||
{{< responsive-carousel en >}}
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active" aria-current="true"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></button>
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></button>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< responsive-carousel >}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
|
||||
<div class="container my-4">
|
||||
<h1>
|
||||
|
|
@ -40,7 +21,7 @@ linkTitle = "SelfPrivacy"
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /blocks/section >}}
|
||||
|
||||
<section class="px-5">
|
||||
|
|
|
|||
|
|
@ -4,52 +4,11 @@ linkTitle = "SelfPrivacy"
|
|||
|
||||
+++
|
||||
|
||||
{{< blocks/section color="dark" type="section">}}
|
||||
{{< blocks/section color="dark" type="section" >}}
|
||||
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="container rounded">
|
||||
<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="carousel">
|
||||
<div class="carousel-inner rounded">
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/ru/1.png" alt="Первый слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/ru/2.png" alt="Второй слайд">
|
||||
</div>
|
||||
<div class="carousel-item active">
|
||||
<img class="d-block w-100" src="/images/screenshots/ru/3.png" alt="Третий слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/ru/4.png" alt="Четвёртый слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/ru/5.png" alt="Пятый слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/ru/6.png" alt="Шестой слайд">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/ru/7.png" alt="Седьмой слайд">
|
||||
</div>
|
||||
</div>
|
||||
<ol class="carousel-indicators">
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="0" class="active"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="1"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="2"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="3"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="4"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="5"></li>
|
||||
<li data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="6"></li>
|
||||
</ol>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Назад</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Далее</span>
|
||||
</button>
|
||||
</div>
|
||||
{{< responsive-carousel >}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
|
||||
|
|
@ -64,7 +23,7 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /blocks/section>}}
|
||||
{{< /blocks/section>}}
|
||||
|
||||
<section class="px-5">
|
||||
<div class="w-100">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{ $lang := ( .Get 0 ) }}
|
||||
{{ $lang := .Page.Lang }}
|
||||
{{ $srcFiles := (resources.Match (printf "images/screenshots/%s/*" $lang)) }}
|
||||
|
||||
{{ $tinyw := default "500" }}
|
||||
|
|
@ -6,30 +6,46 @@
|
|||
{{ $mediumw := default "1200" }}
|
||||
{{ $largew := default "2400" }}
|
||||
|
||||
{{ range $i, $src := $srcFiles }}
|
||||
|
||||
{{ $tiny := $src.Resize (printf "%sx" $tinyw) }}
|
||||
{{ $small := $src.Resize (printf "%sx" $smallw) }}
|
||||
{{ $medium:= $src.Resize (printf "%sx" $mediumw) }}
|
||||
{{ $large := $src.Resize (printf "%sx" $largew) }}
|
||||
|
||||
<div class="carousel-item {{ if eq $i 0 }} active {{ end }}">
|
||||
<img
|
||||
class = "w-100"
|
||||
srcset='
|
||||
{{ with $tiny.RelPermalink }}{{.}} {{(printf "%sw" $tinyw)}} {{ end }},
|
||||
{{ with $small.RelPermalink }}{{.}} {{(printf "%sw" $smallw)}} {{ end }},
|
||||
{{ with $medium.RelPermalink }}{{.}} {{(printf "%sw" $mediumw)}} {{ end }},
|
||||
{{ with $large.RelPermalink }}{{.}} {{(printf "%sw" $largew)}} {{ end }}
|
||||
'
|
||||
sizes='
|
||||
(max-width: {{(printf "%spx" $tinyw)}}) {{(printf "%spx" $tinyw)}},
|
||||
(max-width: {{(printf "%spx" $smallw)}}) {{(printf "%spx" $smallw)}},
|
||||
(max-width: {{(printf "%spx" $mediumw)}}) {{(printf "%spx" $mediumw)}},
|
||||
(max-width: {{(printf "%spx" $largew)}}) {{(printf "%spx" $largew)}},
|
||||
100%
|
||||
'
|
||||
>
|
||||
<div id="screenshotsCarouselControls" class="carousel slide" data-bs-ride="false">
|
||||
<div class="carousel-indicators">
|
||||
{{ range $i, $src := $srcFiles }}
|
||||
<button type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide-to="{{ $i }}" {{ if eq $i 0 }} class="active" aria-current="true" {{ end }}></button>
|
||||
{{ end }}
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#screenshotsCarouselControls" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
<div class="carousel-inner rounded">
|
||||
{{ range $i, $src := $srcFiles }}
|
||||
|
||||
{{ end }}
|
||||
{{ $tiny := $src.Resize (printf "%sx" $tinyw) }}
|
||||
{{ $small := $src.Resize (printf "%sx" $smallw) }}
|
||||
{{ $medium:= $src.Resize (printf "%sx" $mediumw) }}
|
||||
{{ $large := $src.Resize (printf "%sx" $largew) }}
|
||||
|
||||
<div class="carousel-item {{ if eq $i 0 }} active {{ end }}">
|
||||
<img
|
||||
class = "d-block w-100"
|
||||
srcset='
|
||||
{{ with $tiny.RelPermalink }} {{.}} {{(printf "%sw" $tinyw)}} {{ end }},
|
||||
{{ with $small.RelPermalink }} {{.}} {{(printf "%sw" $smallw)}} {{ end }},
|
||||
{{ with $medium.RelPermalink }} {{.}} {{(printf "%sw" $mediumw)}} {{ end }},
|
||||
{{ with $large.RelPermalink }} {{.}} {{(printf "%sw" $largew)}} {{ end }}
|
||||
'
|
||||
sizes='
|
||||
(max-width: {{(printf "%spx" $tinyw)}}) {{(printf "%spx" $tinyw)}},
|
||||
(max-width: {{(printf "%spx" $smallw)}}) {{(printf "%spx" $smallw)}},
|
||||
(max-width: {{(printf "%spx" $mediumw)}}) {{(printf "%spx" $mediumw)}},
|
||||
(max-width: {{(printf "%spx" $largew)}}) {{(printf "%spx" $largew)}},
|
||||
100%
|
||||
'
|
||||
>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue