A JavaScript carousel that will allow two rows with four columns in a carousel.
While working on the Landing Page for our Radio website, I remembered an old design of another music-related webpage, so with the help of the Internet Archive's Wayback Machine«, I was able to find it, and I started researching for a Carousel Script.
I found several, but only one fit my needs, Flickity«.
I then found a short, easy-to-use script on Stack Overflow« that I implemented in Classic ASP and SQL Server.
Copy the ASP/HTML code into a new Document, name it Main.asp.
Change the top 4 lines to fit your SQL Server credentials.
[Main.asp]
CFFCS | CarrzSynEdit: | ASP/VBScript 

<%
getServer = "sqlcorecs-01"
getInstance = "sql2019"
getID = "testuser"
getPW = "testuser"

Set objConn = CreateObject("ADODB.Connection")
objConn.Open("Provider=SQLOLEDB; Data Source="&getServer&"\"&getInstance&"; Initial Catalog=testing;User ID="&getID&";Password="&getPW&";")

Set sqlLast = CreateObject("ADODB.Command")
sqlLast.ActiveConnection=objConn
sqlLast.Prepared = true
' Make it distinct, to stop any duplicates of records. This happened at the Radio Station site, so I am adding it here as well.

sqlGetLast = "Select distinct Tab1ID from Table_1"
sqlLast.commandtext = sqlGetLast
set rsLast = sqlLast.execute
%>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
	
	<style type="text/css">
    /* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

carousel-cell-inner {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns */
  gap: 10px; /* Spacing between your items */
}

.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  
  border-radius: 5px;
  /*counter-increment: carousel-cell;*/
}

.carousel-cell.is-selected {
  
}

/*Panel*/
.containerWrapper {
  display: grid;
  /* Creates 4 columns, each taking up an equal fraction of the available space */
  grid-template-columns: repeat(4, 1fr);
  /* Creates 2 rows, each taking up an equal fraction of the available space */
  grid-template-rows: repeat(2, 1fr);
  /* Adds space (gutters) between the panels */
  gap: 10px; 
}

.ImageContainer {
    position: relative; /* 1. Establishes a positioning context for the children */
    display: inline-block; /* Optional: Makes the container wrap tightly around the image's dimensions */

}

.ImageContainer img {
    display: block; /* Ensures the image behaves as a block element */
    width: 100%; /* Optional: Makes the image responsive within its container */
    height: auto;
}

* {
  box-sizing: border-box;
}

/* Optional: Basic styling for the panels */
.ImagePanel {
  float: left;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  height: 151px;
  width: 154px;
  margin: 5px;
}
.img{
width: 140px;
height: 140px;
}

.carousel {
  background: white;
  border: 1px double black;
}

/* Create two equal columns that floats next to each other 
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 151px;
  width: 154px;
  margin: 5px;
}*/

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.inner, .carousel{
  width: 765px;
  height: 425px;
}

.inner {
  line-height: 0;
  padding-left: 55px;
  padding-right: 50px;
}
</style>
</head>
<body>
    <h1>Flickity - groupCells</h1>

    <!-- Flickity HTML init -->
    <div class="carousel" data-flickity='{ "groupCells": 1, "autoPlay": false }' style="">

	<%while not rsLast.eof%>
      <div class="carousel-cell row inner">
	  	  <%
Set sqlFirst = CreateObject("ADODB.Command")
sqlFirst.ActiveConnection=objConn
sqlFirst.Prepared = true
sqlGetFirst = "Select MyName from Table_2 where Tab1ID = ?"
sqlFirst.Parameters.Append sqlFirst.CreateParameter("@Tab1ID", 3, 1, , rsLast("Tab1ID"))
sqlFirst.commandtext = sqlGetFirst
set rsFirst = sqlFirst.execute
  
while not rsFirst.eof
strNames = rsFirst("MyName")
%>
  <div class="ImagePanel" style="border: 1px double black;">
    <%=strNames%>
  </div>
	  <%
rsFirst.movenext
wend
rsFirst.close
set rsFirst = nothing
%>
	  </div>
	  <%
rsLast.movenext
wend
rsLast.close
set rsLast = nothing
%> 
    </div>
</body>
</html>

Open [SQL Server Management Studio].
Right-click on the Server Name (aka: MySQLServer\InstanceName)
Choose [New Query].
Copy the code below, paste it in the New Query window, and then [Execute].
[Testing.sql]
CFFCS | CarrzSynEdit: | SQL Script 

USE [Testing]
GO
/****** Object:  Table [dbo].[Table_1]    Script Date: 12/12/2025 11:08:14 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Table_1](
	[Tab1ID][int] IDENTITY(1,1) NOT NULL,
	[MyLastName][nvarchar](50) NULL,
 CONSTRAINT [PK_Table_1] PRIMARY KEY CLUSTERED 
(
	[Tab1ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object:  Table [dbo].[Table_2]    Script Date: 12/12/2025 11:08:14 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Table_2](
	[Tab2ID][int] IDENTITY(1,1) NOT NULL,
	[Tab1ID][int] NULL,
	[MyName][nvarchar](50) NULL,
 CONSTRAINT [PK_Table_2] PRIMARY KEY CLUSTERED 
(
	[Tab2ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Table_1] ON 
GO
INSERT [dbo].[Table_1] ([Tab1ID], [MyLastName]) VALUES (1, N'Barron')

GO
INSERT [dbo].[Table_1] ([Tab1ID], [MyLastName]) VALUES (2, N'KISS')

GO
SET IDENTITY_INSERT [dbo].[Table_1] OFF
GO
SET IDENTITY_INSERT [dbo].[Table_2] ON 
GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (1, 1, N'Wayne')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (2, 1, N'Carr')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (3, 1, N'October')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (4, 1, N'Iris')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (5, 1, N'Daniel')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (6, 1, N'Trisha')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (7, 1, N'Jan')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (8, 1, N'Duke')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (9, 2, N'Paul')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (10, 2, N'Gene')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (11, 2, N'Ace')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (12, 2, N'Peter')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (13, 2, N'Eric Carr')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (14, 2, N'Vinnie')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (15, 2, N'Mark')

GO
INSERT [dbo].[Table_2] ([Tab2ID], [Tab1ID], [MyName]) VALUES (16, 2, N'Bruce')

GO
SET IDENTITY_INSERT [dbo].[Table_2] OFF
GO