Flickity carousel with 2 rows and 4 columns designed with ASP Classic and SQL Server

Article Entry Date: December 13,2025 @ 07:01:17 / Last Updated On: December 13,2025 @ 07:08:39

A JavaScript carousel that will allow two rows with four columns.

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 from Stack Overflow« that I was able to implement 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.

<%
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
sqlGetLast = "Select MyLastName, 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].

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

Flickity carousel with 2 rows and 4 columns designed with ASP Classic and SQL Server

About Company

Top Viewed Articles