-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathactivities.html
More file actions
722 lines (618 loc) · 31.1 KB
/
activities.html
File metadata and controls
722 lines (618 loc) · 31.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Activities | Hilltop Youth Movement</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 3 -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Optional animations (same set you use on other pages) -->
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/animation.css">
<!-- Main stylesheet -->
<link rel="stylesheet" href="css/style.css">
<!-- Inline styles for carousel dots -->
<style>
.incident-pagination {
text-align: center;
margin-top: 15px;
}
.incident-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
margin: 0 4px;
display: inline-block;
background-color: #ccc;
padding: 0;
cursor: pointer;
}
.incident-dot.active {
background-color: #333;
}
.incident-dot:focus {
outline: none;
}
</style>
</head>
<body>
<!-- HEADER -->
<div id="header_wrapper">
<div class="container">
<div class="header_box">
<a href="index.html" class="logo">
<img src="img/Hilltop-Youth-Logo.png"
alt="Hilltop Youth Movement Logo">
</a>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navStyle" id="main-nav">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="overview.html">Overview</a></li>
<li><a href="origins.html">Origins</a></li>
<li><a href="ideology.html">Ideology</a></li>
<li class="active"><a href="activities.html">Activities</a></li>
<li><a href="sources.html">Sources</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- HERO SECTION (with animation) -->
<div class="top_cont_outer page-hero"
style="background-image:url('img/activities-background.png');">
<div class="hero_wrapper">
<div class="container hero_section text-center">
<div class="top_left_cont">
<h1 class="animated fadeInDown">Activities</h1>
<p class="animated fadeInUp"
style="max-width: 650px; margin: 0 auto; font-size: 18px;">
How extremist ideology translates into real-world actions.
</p>
</div>
</div>
</div>
</div>
<!-- MAIN CONTENT -->
<section class="page_section">
<div class="container">
<h2>Patterns of Violence and Direct Action</h2>
<h6>Examining the tactics that define Hilltop Youth activity in the West Bank.</h6>
<p>
The Hilltop Youth are widely recognized for their direct-action tactics and confrontational presence in the West Bank.
Although they lack a formal organizational structure, their activities consistently reflect patterns of settler-extremist behavior.
One of the group’s defining methods is the “price-tag” strategy, which involves retaliatory attacks against Palestinians or Israeli authorities following settlement demolitions or government actions they oppose.
According to the U.S. Department of the Treasury (2024), the Hilltop Youth have repeatedly attacked Palestinians and destroyed Palestinian homes and property in the West Bank, and have engaged in killings,
mass arson, and other “price tag” attacks intended to intimidate Palestinian civilians.
</p>
<p>
These incidents commonly involve burning vehicles or buildings, vandalizing property, uprooting olive trees, and leaving threatening graffiti (U.S. Department of the Treasury, 2024).
Such actions demonstrate how the group uses symbolic and material violence to assert its presence and resistance.
Taken together, these activities reveal a persistent pattern of ideologically motivated settlement expansion, vigilante retaliation, and defiance of state authority.
Their behavior reflects a blend of religious nationalism and youth-driven rebellion, making their actions distinct from mainstream settler organizations while still significant enough to draw formal sanctions and international concern.
</p>
<hr>
<!-- INCIDENT CAROUSEL -->
<section id="incident-carousel" class="incident-carousel">
<h3 class="incident-title">
Documented Incidents in the News
</h3>
<!-- Left/right arrow buttons for slides -->
<button class="incident-nav incident-prev" type="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous incidents</span>
</button>
<button class="incident-nav incident-next" type="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next incidents</span>
</button>
<!-- Cards row (JS will only show 3 at a time) -->
<div class="row incident-cards-row animated fadeInUp">
<!-- CARD 1: Duma arson / Lewis 2015 -->
<div class="col-sm-6 col-md-4 incident-card">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/hilltop-youth-activities-1-burning.jpg"
class="img-responsive"
alt="Aftermath of the 2015 Duma arson attack by suspected Hilltop Youth members">
<h4 class="incident-card-title">Duma Arson Attack, 2015</h4>
<p class="incident-card-text">
On July 31, 2015, a Palestinian family home in the West Bank
village of Duma was set on fire in an arson attack that killed
18-month-old Ali Dawabshe and fatally injured his parents. A
former Hilltop Youth member later described how extremist
settler cells carefully planned such attacks, conducted
surveillance of homes, and destroyed evidence to evade arrest
(Lewis, 2015).
</p>
<p class="incident-card-source">
Source:
<a href="http://www.timesofisrael.com/inside-the-hilltop-youth-planning-attacks-evading-capture/"
target="_blank">
Lewis, A. (2015), <em>The Times of Israel</em>
</a>
</p>
</div>
</div>
</div>
<!-- CARD 2: Mosque arson (Al Jazeera 2025) with its own image slider -->
<div class="col-sm-6 col-md-4 incident-card">
<div class="panel panel-default">
<div class="panel-body">
<!-- IMAGE SLIDER FOR THIS CARD -->
<div class="incident-image-slider">
<button class="image-nav image-prev" type="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous image</span>
</button>
<div class="incident-image-wrapper">
<img src="img/mosque-1.webp"
class="img-responsive slider-image active"
alt="Burned interior of Hajja Hamida Mosque after arson attack">
<img src="img/mosque-2.webp"
class="img-responsive slider-image"
alt="Exterior damage and graffiti after mosque arson attack">
<img src="img/mosque-3.webp"
class="img-responsive slider-image"
alt="Scorched walls and debris inside the mosque">
</div>
<button class="image-nav image-next" type="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next image</span>
</button>
</div>
<h4 class="incident-card-title">
Arson Attack on Hajja Hamida Mosque, 2025
</h4>
<p class="incident-card-text">
In November 2025, Israeli settlers allegedly set fire to the
Hajja Hamida Mosque in the village of Deir Istiya near Salfit,
burning parts of the prayer hall and damaging copies of the
Quran. Photographs from the scene showed racist anti-Palestinian
slogans sprayed on the mosque walls and charred religious
texts, prompting Palestinian officials to denounce the arson as
a “heinous crime” against a holy site in the occupied West Bank
(Al Jazeera, 2025).
</p>
<p class="incident-card-source">
Source:
<a href="https://www.aljazeera.com/news/2025/11/13/israeli-settler-attack-on-west-bank-mosque-draws-international-condemnation"
target="_blank">
Al Jazeera (2025), <em>“Israeli settler attack on West Bank mosque draws international condemnation”</em>
</a>
</p>
</div>
</div>
</div>
<!-- CARD 3: Olive harvest attacks (Al Jazeera 2025-10-31) with image slider -->
<div class="col-sm-6 col-md-4 incident-card">
<div class="panel panel-default">
<div class="panel-body">
<!-- IMAGE SLIDER FOR OLIVE HARVEST CARD -->
<div class="incident-image-slider">
<button class="image-nav image-prev" type="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous image</span>
</button>
<div class="incident-image-wrapper">
<img src="img/olive-1.webp"
class="img-responsive slider-image active"
alt="Palestinian olive groves damaged by settler attacks in the West Bank">
<img src="img/olive-2.png"
class="img-responsive slider-image"
alt="Burned and uprooted olive trees after settler violence">
</div>
<button class="image-nav image-next" type="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next image</span>
</button>
</div>
<h4 class="incident-card-title">
Attacks on Palestinian Olive Harvesters, 2025
</h4>
<p class="incident-card-text">
During the 2025 olive harvest season, UN monitors documented
over 120 settler attacks across roughly 70 West Bank towns and
villages, including vandalism of more than 4,000 olive trees.
Al Jazeera reports that settlers torched Palestinian vehicles
in Deir Dibwan, seized harvested olives in Sinjil, and worked
alongside soldiers who declared agricultural land a “closed
military zone,” blocking farmers from their groves. These
measures deepen a long-standing pattern in which olive trees —
a key symbol of Palestinian land and identity — are destroyed
to pressure communities off their land (Al Jazeera, 2025).
</p>
<p class="incident-card-source">
Source:
<a href="https://www.aljazeera.com/news/2025/10/31/israeli-army-settlers-target-palestinian-olive-harvesters-in-west"
target="_blank">
Al Jazeera (2025), <em>“Israeli army, settlers target Palestinian olive harvesters in West Bank”</em>
</a>
</p>
</div>
</div>
</div>
<!-- CARD 4: US sanctions Hilltop Youth (Magid 2024) with image slider -->
<div class="col-sm-6 col-md-4 incident-card">
<div class="panel panel-default">
<div class="panel-body">
<!-- IMAGE SLIDER FOR SANCTIONS CARD -->
<div class="incident-image-slider">
<button class="image-nav image-prev" type="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous image</span>
</button>
<div class="incident-image-wrapper">
<img src="img/4th-card-1.jpg"
class="img-responsive slider-image active"
alt="Israeli security forces and settlers at the entrance to Turmus Ayya on June 21, 2023">
<img src="img/4th-card-2.jpg"
class="img-responsive slider-image"
alt="Burned homes and vehicles after settler rampage in Turmus Ayya, June 21, 2023">
<img src="img/4th-card-3.jpg"
class="img-responsive slider-image"
alt="Armed settlers on a hill overlooking al-Mughayyir, April 13, 2024">
</div>
<button class="image-nav image-next" type="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next image</span>
</button>
</div>
<h4 class="incident-card-title">
US Sanctions “Hilltop Youth” as Violent Extremist Group
</h4>
<p class="incident-card-text">
In October 2024, the United States sanctioned “Hilltop Youth,”
treating the loosely organised settler activists as a violent
extremist group responsible for attacks on Palestinians and
clashes with Israeli security forces (Magid, 2024). The US
Treasury described Hilltop Youth as carrying out killings, mass
arson, and “price tag” rampages in towns such as al-Mughayyir
and Turmus Ayya, where homes, vehicles, and livestock were
torched and residents beaten. The move, alongside sanctions on
individual settler leaders, signals growing international
willingness to frame these networks as a serious source of
destabilisation in the West Bank.
</p>
<p class="incident-card-source">
Source:
<a href="https://www.timesofisrael.com/us-sanctions-hilltop-youth-treating-extreme-settler-activists-as-organized-group/"
target="_blank">
Magid, J. (2024), <em>The Times of Israel</em>
</a>
</p>
</div>
</div>
</div>
<!-- CARD 5: Demolition of Hilltop Youth Outposts (i24NEWS 2020) -->
<div class="col-sm-6 col-md-4 incident-card">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/fifth-card.webp"
class="img-responsive"
alt="Young Israeli settlers gather belongings after demolition at the illegal Kumi Ori outpost, January 15, 2020">
<h4 class="incident-card-title">
Demolition of Hilltop Youth Outposts, 2020
</h4>
<p class="incident-card-text">
On January 15, 2020, Israeli forces demolished two illegal Hilltop Youth
structures in the Kumi Ori outpost near Yitzhar. One of the homes belonged
to Neria Zarog, a prominent Hilltop Youth activist who had previously been
removed under an IDF administrative order. Over 450 Border Police officers
and Civil Administration inspectors participated in the operation, which
sparked clashes as settler youths threw stones at security forces. The
demolition highlighted escalating tensions between extremist hilltop activists
and the Israeli state, even as the government simultaneously approved new
nature reserves across the West Bank (i24NEWS, 2020).
</p>
<p class="incident-card-source">
Source:
<a href="https://www.i24news.tv/en/news/israel/1579081948-israel-demolishes-two-hilltop-youth-outposts-in-west-bank"
target="_blank">
i24NEWS (2020), <em>“Israel demolishes two 'hilltop youth' outposts in West Bank”</em>
</a>
</p>
</div>
</div>
</div>
<!-- CARD 6: Settler arson on warehouse and land (BBC 2025) with image slider -->
<div class="col-sm-6 col-md-4 incident-card">
<div class="panel panel-default">
<div class="panel-body">
<!-- IMAGE SLIDER FOR BBC WAREHOUSE ATTACK CARD -->
<div class="incident-image-slider">
<button class="image-nav image-prev" type="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous image</span>
</button>
<div class="incident-image-wrapper">
<img src="img/6th-card-1.webp"
class="img-responsive slider-image active"
alt="Palestinian warehouse in Beit Lid with lorries set on fire by settlers">
<img src="img/6th-card-2.webp"
class="img-responsive slider-image"
alt="Graphic illustrating record-high settler attacks in the West Bank">
<img src="img/6th-card-3.webp"
class="img-responsive slider-image"
alt="Reuters photographer Raneen Sawafta injured during settler attack near Beita">
</div>
<button class="image-nav image-next" type="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next image</span>
</button>
</div>
<h4 class="incident-card-title">
Settler Arson on Warehouse and Farmland, 2025
</h4>
<p class="incident-card-text">
In November 2025, BBC reporting documented a coordinated series of settler
attacks in the northern West Bank, including arson at a Palestinian warehouse
in Beit Lid where lorries were set on fire, as well as tents burned in the
Bedouin community of Deir Sharaf (Knell, 2025). The UN’s humanitarian office
noted that settler violence had reached its highest recorded levels since it
began tracking incidents in 2006, with hundreds of attacks in a single month.
During the same period, settlers also assaulted Palestinian olive harvesters,
Israeli activists, and journalists, including Reuters photographer Raneen
Sawafta, underscoring how Hilltop Youth–style networks target both local
communities and those who attempt to document or resist the violence.
</p>
<p class="incident-card-source">
Source:
<a href="https://www.bbc.com/news/articles/c78zygz4xg9o"
target="_blank">
Knell, Y. (2025), <em>“Israeli settlers set fire to Palestinian warehouse and land as West Bank attacks surge”</em>, BBC
</a>
</p>
</div>
</div>
</div>
<!-- CARD 7: Rehabilitation program for Hilltop Youth (Magid 2020) with image slider -->
<div class="col-sm-6 col-md-4 incident-card">
<div class="panel panel-default">
<div class="panel-body">
<!-- IMAGE SLIDER FOR REHABILITATION PROGRAM CARD -->
<div class="incident-image-slider">
<button class="image-nav image-prev" type="button">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous image</span>
</button>
<div class="incident-image-wrapper">
<img src="img/7th-card-1.jpg"
class="img-responsive slider-image active"
alt="Etgar Beit El students studying in caravan classrooms">
<img src="img/7th-card-2.jpg"
class="img-responsive slider-image"
alt="Teacher working with hilltop youth student in small group setting">
<img src="img/7th-card-3.jpg"
class="img-responsive slider-image"
alt="View of West Bank hilltops where students spend nights in outposts">
<img src="img/7th-card-4.jpeg"
class="img-responsive slider-image"
alt="View of West Bank hilltops where students spend nights in outposts">
<img src="img/7th-card-5.jpeg"
class="img-responsive slider-image"
alt="View of West Bank hilltops where students spend nights in outposts">
<img src="img/7th-card-6.jpg"
class="img-responsive slider-image"
alt="View of West Bank hilltops where students spend nights in outposts">
<img src="img/7th-card-7.jpg"
class="img-responsive slider-image"
alt="View of West Bank hilltops where students spend nights in outposts">
<img src="img/7th-card-8.jpg"
class="img-responsive slider-image"
alt="View of West Bank hilltops where students spend nights in outposts">
<img src="img/7th-card-9.jpg"
class="img-responsive slider-image"
alt="View of West Bank hilltops where students spend nights in outposts">
<img src="img/7th-card-10.jpeg"
class="img-responsive slider-image"
alt="Playing Chess">
</div>
<button class="image-nav image-next" type="button">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next image</span>
</button>
</div>
<h4 class="incident-card-title">
Rehabilitating “Hilltop Youth” as At-Risk Teens, 2020
</h4>
<p class="incident-card-text">
A 2020 <em>Times of Israel</em> report profiles Etgar Beit El, an Education
Ministry–backed program that works primarily with Hilltop Youth as “at-risk
teens” rather than hardened criminals (Magid, 2020). Serving dozens of boys
who split their time between illegal West Bank outposts and makeshift
classrooms, the program combines Bagrut exam preparation with weekly
one-on-one social work support. Staff argue that many of these youths come
from traumatic or unstable homes and are drawn to the hilltops by a mix of
ideology, alienation from their communities, and lack of alternatives.
While security services continue to treat them as a national security
threat, Etgar Beit El seeks to redirect their energy toward education,
military or national service, and reintegration into wider Israeli society.
</p>
<p class="incident-card-source">
Source:
<a href="https://www.timesofisrael.com/program-for-rehabilitating-hilltop-youth-sees-them-as-dropouts-not-criminals/"
target="_blank">
Magid, J. (2020), <em>“Program for rehabilitating ‘hilltop youth’ sees them as dropouts, not criminals”</em>, The Times of Israel
</a>
</p>
</div>
</div>
</div>
</div><!-- /.incident-cards-row -->
<!-- Pagination dots -->
<div class="incident-pagination"></div>
</section>
</div>
</section>
<!-- FOOTER -->
<div class="footer_wrapper">
<div class="container">
<div class="footer_bottom">
<span>© 2025 Hilltop Youth Movement Project</span>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- INCIDENT CAROUSEL + IMAGE SLIDER JS -->
<script>
document.addEventListener("DOMContentLoaded", function () {
// ===== Incident carousel (3 cards per "slide") =====
var cards = Array.prototype.slice.call(
document.querySelectorAll(".incident-card")
);
var visibleCount = 3;
var startIndex = 0;
var prevBtn = document.querySelector(".incident-prev");
var nextBtn = document.querySelector(".incident-next");
var paginationContainer = document.querySelector(".incident-pagination");
var totalPages = Math.ceil(cards.length / visibleCount);
function updateDots() {
if (!paginationContainer) return;
var dots = paginationContainer.querySelectorAll(".incident-dot");
var currentPage = Math.floor(startIndex / visibleCount);
for (var i = 0; i < dots.length; i++) {
if (i === currentPage) {
dots[i].classList.add("active");
} else {
dots[i].classList.remove("active");
}
}
}
function createDots() {
if (!paginationContainer) return;
paginationContainer.innerHTML = "";
if (totalPages <= 1) {
paginationContainer.style.display = "none";
return;
}
paginationContainer.style.display = "block";
for (var i = 0; i < totalPages; i++) {
var dot = document.createElement("button");
dot.type = "button";
dot.className = "incident-dot" + (i === 0 ? " active" : "");
dot.setAttribute("data-page", i.toString());
dot.addEventListener("click", function () {
var pageIndex = parseInt(this.getAttribute("data-page"), 10);
startIndex = pageIndex * visibleCount;
renderCards();
});
paginationContainer.appendChild(dot);
}
}
function renderCards(direction) {
if (!cards.length) return;
// hide all
cards.forEach(function (card) {
card.style.display = "none";
});
var endIndex = startIndex + visibleCount;
var slice = cards.slice(startIndex, endIndex);
slice.forEach(function (card) {
card.style.display = "block";
card.classList.remove("animated", "fadeInLeft", "fadeInRight", "fadeInUp");
if (direction === "next") {
card.classList.add("animated", "fadeInRight");
} else if (direction === "prev") {
card.classList.add("animated", "fadeInLeft");
} else {
card.classList.add("animated", "fadeInUp");
}
});
// if not enough cards to justify arrows, hide them
if (cards.length <= visibleCount) {
prevBtn.style.display = "none";
nextBtn.style.display = "none";
} else {
prevBtn.style.display = "block";
nextBtn.style.display = "block";
}
updateDots();
}
function moveNext() {
if (cards.length <= visibleCount) return;
startIndex += visibleCount;
if (startIndex >= cards.length) {
startIndex = 0;
}
renderCards("next");
}
function movePrev() {
if (cards.length <= visibleCount) return;
startIndex -= visibleCount;
if (startIndex < 0) {
var remainder = cards.length % visibleCount;
if (remainder === 0) {
startIndex = cards.length - visibleCount;
} else {
startIndex = cards.length - remainder;
}
}
renderCards("prev");
}
if (prevBtn && nextBtn) {
prevBtn.addEventListener("click", movePrev);
nextBtn.addEventListener("click", moveNext);
}
createDots();
renderCards();
// ===== Image slider inside each card =====
var sliders = document.querySelectorAll(".incident-image-slider");
sliders.forEach(function (slider) {
var images = slider.querySelectorAll(".slider-image");
if (!images.length) return;
var current = 0;
function showImage(index, direction) {
images.forEach(function (img, i) {
img.classList.remove("active", "animated", "fadeInLeft", "fadeInRight", "fadeInUp");
img.style.display = "none";
if (i === index) {
img.style.display = "block";
img.classList.add("active");
if (direction === "next") {
img.classList.add("animated", "fadeInRight");
} else if (direction === "prev") {
img.classList.add("animated", "fadeInLeft");
} else {
img.classList.add("animated", "fadeInUp");
}
}
});
}
var prevImageBtn = slider.querySelector(".image-prev");
var nextImageBtn = slider.querySelector(".image-next");
if (prevImageBtn) {
prevImageBtn.addEventListener("click", function () {
current = (current - 1 + images.length) % images.length;
showImage(current, "prev");
});
}
if (nextImageBtn) {
nextImageBtn.addEventListener("click", function () {
current = (current + 1) % images.length;
showImage(current, "next");
});
}
showImage(0);
});
});
</script>
</body>
</html>