I’ve got a carousel of images and I’m trying to create a drop down list with the titles of each slide so you can quickly select the one you need and go right to it by using data-slide-to. However, the drop down menu is not allowing me to select the options. I’m not sure if this is a problem with my the dropdown, or the data-slide-to attribute. Can anyone help me out?
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" href="/css/LayoutStyleSheet.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facilities - My ASP.NET Application</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
</head>
<body id="layoutBody">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="spacerDiv">
<a class="navbar-left"><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="Browser does not support image."/></a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul id="navigationbar" class="nav navbar-nav">
<li id="homebutton" class="dropdown"><a href="/">Home</a></li>
<li class="menubuttons dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/OurCompany">Our History</a></li>
<li><a href="/OurCompany/Facilities">Facilities</a></li>
</ul>
</li>
<li class="menubuttons dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li><a href="/FormsHandlers/HRForms">HR Forms</a></li>
<li><a href="/FormsHandlers/CorporateForms">Corporate Forms</a></li>
<li><a href="/FormsHandlers/EmployeeBenefitsForms">Employee Benefits</a></li>
<li><a href="/FormsHandlers/AccidentForms">Accident Forms</a></li>
<li><a href="/FormsHandlers/PayrollForms">Payroll Forms</a></li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li><a href="/FormsHandlers/FAQ">FAQ</a></li>
</ul>
</li>
<li class=" menubuttons dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">ISS Support</a></li>
<li><a href="#">Purchase Requests</a></li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
<form id="searchbar" method="get">
<input type="text" id="search" placeholder="Search..." maxlength="50" autocomplete="off" onmousedown="active();" onblur="inactive();">
<input type="submit" id="searchbutton" value="Go!"/>
</form>
</div><!-- /.navbar-collapse -->
</nav>
<link type="text/css" href="/css/AboutUsStyleSheet.css" rel="stylesheet" />
<div class="dropdown formsbody">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Select Facility
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" data-slide-to="0"></a>Slide 1</li>
<li><a href="#" datafld-slide-to="1"></a>Slide 2</li>
</ul>
</div>
<div id="main">
<h1>Facilities</h1>
</div>
<div id="carousel">
<div id="myCarousel" class="carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
<li data-target="#myCarousel" data-slide-to="9"></li>
<li data-target="#myCarousel" data-slide-to="10"></li>
<li data-target="#myCarousel" data-slide-to="11"></li>
<li data-target="#myCarousel" data-slide-to="12"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="facilitiesImage" src="/Images/SC2CorporateCropped.JPG" alt="SC2 Corp">
<div class="facilityInfo">
<p class="paragraph1">
SC2 Supply Chain Services opened the corporate office in 1996. Located in Peoria IL the facility houses the corporate offices as well as 160,000 sq ft warehouse.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 801 S. Jefferson Ave Peoria, IL 61605 ||
Phone: 309-677-5980 ||
<a href="http://maps.google.com/maps?q=801+SW+Jefferson+Ave,+Peoria,+IL+61605">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/UntitledDesign.png" alt="SC2 Maintenance Facility">
<div class="facilityInfo">
<p class="paragraph1">
The Maintenance Facility ran by Larry Hutchison is a Vital part of SC2.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 4000 SW. Adams St Peoria, IL 61605 ||
Phone: 309-637-5051 ||
<a href="http://maps.google.com/maps?q=4000+SW+Adams+St,+Peoria,+IL+61605">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/600CampSt.jpg" alt="SC2 Camp Facility">
<div class="facilityInfo">
<p class="paragraph1">
SC2 expanded to East Peoria in 2000 and establishedmtheir dealer returns for Catepillar in a 320,000 sq ft warehouse. The building is ran by Chris Hulett and Tabatha Way.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 600 Camp St. East Peoria, IL 61611 || Phone: 309-694-6000 ||
<a href="http://maps.google.com/maps?q=600+Camp+St,East+Peoria,+IL+61611">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/EastPaint.jpg" alt="SC2 Paint Facility EP">
<div class="facilityInfo">
<p class="paragraph1">
SC2 expanded to East Peoria in 2000 and established their paint facility. The building is ran by Joshua Clark
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 200 Carver Ln. East Peoria, IL 61611 || Phone: 309-699-3984 ||
<a href="http://maps.google.com/maps?q=200+Carver+Ln,East+Peoria,+IL+61611">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/CatTTT.jpg" alt="SC2 East Peoria TT">
<div class="facilityInfo">
<p class="paragraph1">
SC2 East Peoria TTT was established in 2017 as an on-site service located inside of a CAT facility. CAT utilizes SC2's expertise in Logistics Planning among several other services.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: Tractor Dr. East Peoria, IL 61611 || Phone: ||
<a href="http://maps.google.com/maps?q=Tractor+Dr,East+Peoria,+IL+61611">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/Bartonville2.JPG" alt="SC2 Airport Warehouse Bartonville">
<div class="facilityInfo">
<p class="paragraph1">
Established 2010 the Bartonville facility(Airport) sits inside of a 400,000 sq ft building. Airport houses commercial packaging ran by Misty Hallor.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 6409 W Smithville Rd. Bartonville, IL 61607 || Phone: 309-633-9120 ||
<a href="http://maps.google.com/maps?q=6409+W+Smithville+Rd,Bartonville,+IL+61604">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/Mossville.jpg" alt="SC2 Mossville">
<div class="facilityInfo">
<p class="paragraph1">
Established 2007 the Mossville facility is a 500,000 sq ft building. Contract Packaging and Cross-Dock Services are ran in the facility headed by Randy Rarick.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 2314 Wilkins Dr. Mossville, IL 61523 || Phone: 309-633-9120 ||
<a href="http://maps.google.com/maps?q=2314+Wilkins+Dr,Mossville,+IL+61523">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/MossvilleDD.jpg" alt="SC2 Mossville DD">
<div class="facilityInfo">
<p class="paragraph1">
Housed inside of a CAT facility Mossville DD was established in 2014. Providing Storing, Receiving, Pick and Ship services on site for CAT.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 14009 Old Galena Rd. Mossville, IL 61522 || Phone: 309-633-9120 ||
<a href="http://maps.google.com/maps?q=14009+Old+Galena+Rd,Mossville,+IL+61522">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/Bloomington1.JPG" alt="NuAir Normal">
<div class="facilityInfo">
<p class="paragraph1">
Established in 1991 the 105,000 sq ft facility in Normal IL is utilized for fabrication work and filtration. The facility is ran by Jami Harding.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 2219 W.College Ave. Normal, IL 61761 || Phone: 309-888-4331 ||
<a href="http://maps.google.com/maps?q=2219+W+College+Ave,Normal,+IL+61761">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/Delavan.jpg" alt="SC2 Delavan Facility">
<div class="facilityInfo">
<p class="paragraph1">
Established in 1997 the Delavan facility 1.3 Million sq ft is used for VMI Warehousing.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 1980 Catepillar Rd. Delavan, IL 61734 || Phone: 309-888-4331 ||
<a href="http://maps.google.com/maps?q=1980+Catepillar+Rd,Delavan,+IL+61734">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/DecaturDD.jpg" alt="SC2 Decatur">
<div class="facilityInfo">
<p class="paragraph1">
Established in 2002 as an on-site service to CAT. SC2 provides Facility Maintenance, Paint Booth Cleaning, Line Striping, Lighting, and Material handling.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 2701 Pershing Rd. Decatur, IL 62525 || Phone: 309-677-5980 ||
<a href="http://maps.google.com/maps?q=2701+Pershing+Rd,+Decatur,+IL+62525">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/DecaturDD.jpg" alt="SC2 Decatur">
<div class="facilityInfo">
<p class="paragraph1">
Established in 2002 as an on-site service to CAT. SC2 provides Facility Maintenance, Paint Booth Cleaning, Line Striping, Lighting, and Material handling.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 801 E. 1st St. Suite 500 Door #31A Milan, IL 61264|| Phone: 309-677-5980 ||
<a href="http://maps.google.com/maps?q=801+E+1st+St+Milan,+IL+61264">
Click for Directions
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img class="facilitiesImage" src="/Images/Waco_PNG.png" alt="SC2 Decatur">
<div class="facilityInfo">
<p class="paragraph1">
Established in 2008 in a 100,000 sq ft warehouse. SC2 uses this facility as a warehouse and logistics center ran by Emily Shaw.
</p>
<div class="facilityInfo">
<h3 class="subheader">Contact:</h3>
<p class="paragraph2">
Address: 301 Schroeder Dr. Waco, TX 76710 || Phone: 254-756-2622 ||
<a href="http://maps.google.com/maps?q=301+Schroeder+Dr,+Waco,+TX+76710">
Click for Directions
</a>
</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<hr/>
CSS:
#dropdown-menu {
color: black;
}
#carousel {
margin-top: 2%;
}
.paragraph1 {
margin-top: 5em;
position: center;
color: white;
z-index: -2;
font-size: 1em;
visibility: visible;
}
.subheader {
position: absolute;
right: 100em;
color: white;
z-index: -3;
visibility: visible;
}
.paragraph2 {
margin-top: 20px;
position: center;
color: white;
z-index: -4;
font-size: 1em;
visibility: visible;
}
#carousel {
text-align: center;
}
.facilityInfo {
text-align: center;
font-size: large;
}
.facilitiesImage {
width: 35em;
height: 35em;
margin-left: auto;
margin-right: auto;
}
