Multiple Featured Content Slider issue

[cjoltman]

Thanks ahead of time for anyone who can assist me with this issue. I am only moderate in HTML and CSS and have no knowledge of Javascript outside implementing pre-built elements.

On to my issue:

I’m creating a new website for myself and would like to display all my projects with a slider. I have used the Featured Content Slider on my current (and extremely outdated) website, but have only implemented one slider per page. With the layout I am going for now, I want to use multiple sliders per page. When I copied the code to create another "project" the slider did not contain the images. Also, the links for multiple images are connected to the slider above. I’m pretty lost at what to do (especially without knowing how to code Javascript) and am looking for help or advice.

Here are the links:
Work page with one slider – http://oltmandesign.com/web/od2/work.html
Work page with two sliders – http://oltmandesign.com/web/od2/work2.html

And the code (for the page with 2 sliders)

HTML

Code:

• HOME
• ABOUT
• SERVICES
• OUR WORK
• CONTACT US

Identity & Branding

• Identity/Branding
• Print
• Web
• iPhone

Marinelli Motorsports

A logo created for a web application to be used by financial companies. The
client requested a hexagon shaped logo with abstract mountain.

• 1
• 2
• 3
• 4

Visit Website

Marinelli Motorsports

A logo created for a web application to be used by financial companies. The
client requested a hexagon shaped logo with abstract mountain.

• 1
• 2
• 3
• 4

Visit Website

• LinkedIn
• Twitter
• Facebook

CSS

Code:

@charset “UTF-8″;
/* RESET */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

a {
text-decoration: none;
color:#F07F2A;
}

a:hover {
text-decoration:underline;
}

p {
font-family:Verdana, Arial, Helvetica, sans-serif;
}

/* MAIN STYLES */

html {
background: #F8F8F8;
}

#container {
width: 890px;
margin: 1em auto;
}

#container2 {
width: 890px;
margin: 1em auto;
padding-top:6px;
}

#header {
overflow: hidden;
height: 100%; /* Needed for IE 6 */
}

#header img {
float: left;
position:relative;
top: 1px;
left:15px;
}

#header ul#nav {
float: right;
position: relative;
top: 78px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-variant:small-caps;
letter-spacing: 1px;
}

#nav li {
display: inline;
padding: 0 0 0 20px;
}

#nav li a {
color:#666666;
text-decoration:none;
}

#nav li a:hover {
color:#333333;
}

#nav li a:active {
color:#666666;
}

/* WORK STYLES */

#work_container {
width:846px;
padding:0 24px 40px 20px;
margin-top:-10px;
}

#work_header {
padding-bottom:35px;
}

#identity_title {
width:239px;
height:18px;
float:left;
margin-left:-4px;
text-indent:-9999px;
background:url(../images/work_title.png) 0px 0px;
}

ul#work_links{
float:right;
margin:2px -2px 0 0;
}

#work_links li {
display:inline;
list-style:none;
}

#work_links li a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#9D9D9D;
padding-left:15px;
}

#work_links li a:hover {
text-decoration:none;
color:#666666;
}

#work_box {
width:846px;
height:306px;
margin-bottom:15px;
background-color:#E6E6E6;
border:1px solid #CCCCCC;
}

#work_border {
width:596px;
height:290px;
margin:7px 0px 0px 8px;
float:left;
background:url(../images/work_border.jpg) no-repeat 0px 0px;
}

#work_info {
width:215px;
height:250px;
float:left;
margin:35px 0 0 7px;
background:url(../images/work_info.png) no-repeat 0px 0px;
}

#work_info p {
font-size:11px;
color:#5B5B5B;
line-height:14px;
}

#client {
width:215px;
height:50px;
float:left;
margin:21px 0 0 2px;
}

#project {
width:220px;
height:105px;
float:left;
margin:3px 0 0 2px;
}

ul#images {
float:left;
text-indent:-9999px;
list-style:none;
float:left;
width:130px;
height:29px;
margin:-1px 0 0 -1px;
}

ul#images li {
display:inline;
}

ul#images li a {
height:29px;
float:left;
}

ul#images li#one a {
width:32px;
float:left;
background:url(../images/numbers.png) no-repeat 0px 0px;
}

ul#images li#two a {
width:32px;
float:left;
background:url(../images/numbers.png) no-repeat -32px 0px;
}

ul#images li#three a {
width:32px;
float:left;
background:url(../images/numbers.png) no-repeat -64px 0px;
}

ul#images li#four a {
width:32px;
float:left;
background:url(../images/numbers.png) no-repeat -96px 0px;
}

ul#images li#one a:hover {
background-position:0px -29px;
}

ul#images li#two a:hover {
background-position:-32px -29px;
}

ul#images li#three a:hover {
background-position:-64px -29px;
}

ul#images li#four a:hover {
background-position:-96px -29px;
}

#website a {
width:139px;
height:26px;
float:left;
margin:18px 0 0 0;
text-indent:-9999px;
background:url(../images/website_button.png) no-repeat 0px 0px;
}

#website a:hover {
background-position:0px -26px;
}

/* FOOTER STYLES */

#footer {
height: 80px;
background:url(../images/shelf.png);
margin: 0 auto;
}

#foot_container {
width: 890px;
margin: auto;
padding-top:55px;
padding-bottom:70px;
}

#copyright img {
float:left;
margin: -38px 0 0 -10px;
}

#copyright h2 {
color:#FFFFFF;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-variant:small-caps;
font-size:26px;
padding-bottom: 7px;
}

#copyright p {
margin: 0 0 0 10px;
color:#333333;
font-size:12px;
font-variant:small-caps;
}

#links {
float:right;
margin-top:10px;
width:330px;
height:35px;
text-indent:-9999px;
}

#social li {
padding: 0 0 0 15px;
display: inline;
}

ul li#linkedin a {
width:118px;
height:35px;
float:left;
background:url(../images/social.png) no-repeat 0px 0px;
}

ul li#twitter a {
width:110px;
height:35px;
float:left;
background:url(../images/social.png) no-repeat -118px 0px;
}

ul li#facebook a {
width:102px;
height:35px;
float:left;
background:url(../images/social.png) no-repeat -228px 0px;
}

For the Javascript, please refer to the Featured Content Slider tutorial: http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

Is there a way around this issue? If I should be looking at other options to accomplish this, can you point me in a good direction to find the resources I need?

Truthfully, I am very interested in learning Javascript and would like to start that process in the next few months. If anyone can provide me with any good resources to start learning I would greatly appreciate it! But right now getting this website up in the most efficient way possible is the most important to me.

Again I’m EXTREMELY thankful to whoever is willing to take the time to help me solve this issue!

[Author]

Posts