mark/msos
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Carousels: drag + position dots, and real Become-a-member photos

Browse Source 
Convert the Hub / Become-a-member carousels from a pure-CSS marquee to a
JS-driven scroller with click-and-drag, touch swipe, and progress dots
(setupHubCarousel). Turn the "ways to be part of MSOS" cards into hub-style
photo cards and add the final Become-a-member photos (WebP).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-05 15:54:06 +02:00
1 parent a7782eb28f
commit 4c27ebb105
14 files changed
+238 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

si/become-a-member/index.html
+10 -4
View File
@@ -76,8 +76,8 @@
<li class="menu-item menu-item-has-children">
<a href="#">O nas</a>
<ul class="dropdown-menu">
<li><a href="../../si/timeline-and-milestones/">Časovnica in dosežki</a></li>
<li><a href="../../si/about-us/">Naša ekipa, poslanstvo, vizija in vrednote</a></li>
<li><a href="../../si/timeline-and-milestones/">Časovnica in dosežki</a></li>
<li><a href="../../si/msos-hub/">MSOS Hub</a></li>
</ul>
</li>
@@ -135,8 +135,8 @@
<li class="menu-item menu-item-has-children">
<a href="#">O nas</a>
<ul class="dropdown-menu">
<li><a href="../../si/timeline-and-milestones/">Časovnica in dosežki</a></li>
<li><a href="../../si/about-us/">Naša ekipa, poslanstvo, vizija in vrednote</a></li>
<li><a href="../../si/timeline-and-milestones/">Časovnica in dosežki</a></li>
<li><a href="../../si/msos-hub/">MSOS Hub</a></li>
</ul>
</li>
@@ -209,7 +209,7 @@
<h2 class="mm-h2">Zakaj postati član?</h2>
<div class="mm-benefits">
<figure class="mm-benefit-photo">
<img width="1425" height="950" src="../../images/event4-image2.webp" alt="Makedonski študenti zbrani v Ljubljani" loading="lazy">
<img width="1200" height="1600" src="../../images/mm-benefit-real-events.webp" alt="Makedonski študenti zbrani v Ljubljani" loading="lazy">
<figcaption>Pravi dogodki, prava prijateljstva</figcaption>
</figure>
<article class="mm-benefit">
@@ -241,7 +241,7 @@
<h3>Počuti se kot doma</h3><p>Pripadaj skupnosti, kjer ti nikoli ni treba pojasnjevati, od kod prihajaš.</p>
</article>
<figure class="mm-benefit-photo">
<img width="1087" height="586" src="../../images/msnl-3.webp" alt="Študenti pišejo svoja imena v cirilici na makedonskem študentskem večeru" loading="lazy">
<img width="1600" height="1067" src="../../images/mm-benefit-piece-of-home.webp" alt="Študenti pišejo svoja imena v cirilici na makedonskem študentskem večeru" loading="lazy">
<figcaption>Košček doma v Sloveniji</figcaption>
</figure>
</div>
@@ -266,26 +266,32 @@
<div class="hub-track">
<div class="hub-group">
<article class="hub-use mm-use">
<img width="1200" height="1600" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-stay-connected.webp" alt="Ostani povezan">
<div class="mm-use-ico"><i class="fas fa-envelope-open-text" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Ostani povezan</h3><p>Prejemaj novice in vedi, kaj se dogaja.</p></div>
</article>
<article class="hub-use mm-use">
<img width="1600" height="1067" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-community.webp" alt="Pridruži se skupnosti">
<div class="mm-use-ico"><i class="fas fa-mug-hot" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Pridruži se skupnosti</h3><p>Obišči dogodke, spoznaj ljudi in sodeluj, ko ti ustreza.</p></div>
</article>
<article class="hub-use mm-use">
<img width="1600" height="1200" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-volunteer.webp" alt="Občasno prostovoljči">
<div class="mm-use-ico"><i class="fas fa-hands-helping" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Občasno prostovoljči</h3><p>Pomagaj pri izbranih dejavnostih brez dolgoročne zaveze.</p></div>
</article>
<article class="hub-use mm-use">
<img width="1600" height="1067" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-projects.webp" alt="Pridruži se projektom">
<div class="mm-use-ico"><i class="fas fa-diagram-project" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Pridruži se projektom</h3><p>Prispevaj k pobudam, kampanjam, vodnikom ali sodelovanjem.</p></div>
</article>
<article class="hub-use mm-use">
<img width="1600" height="1067" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-events.webp" alt="Organiziraj dogodke">
<div class="mm-use-ico"><i class="fas fa-calendar-check" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Organiziraj dogodke</h3><p>Pomagaj načrtovati, usklajevati, promovirati in izvesti dejavnosti.</p></div>
</article>
<article class="hub-use mm-use">
<img width="1600" height="900" class="hub-use-img" loading="lazy" decoding="async" src="../../images/mm-way-responsibility.webp" alt="Prevzemi odgovornost">
<div class="mm-use-ico"><i class="fas fa-star" aria-hidden="true"></i></div>
<div class="hub-use-body"><h3>Prevzemi odgovornost</h3><p>Razišči vodenje, upravljanje, zastopanje ali vloge v lokalni ekipi.</p></div>
</article>