Having multiple sliders under one navigation

Question

so I have a navigation set up where whenever you click on a certain part of the navigation a different section will appear.

I am unfortunately working in HTML 4 and cant seem to find the right sliders to work for this.

Below is an image of the two sliders id like to accomplish, Slider 1 is a product slider and slider two is a vertical slider containing different videos. With our CMS these all just have to be images that when you click will change the Featured video you see larger on the page. then when you click the featured video, a "PrettyPhoto" video will pop up and play.

Here is the code i have been using:

            
            
                
                    
                        
                        Get started by choosing your instrument below.
                        
                      

                
            
                           



            
            
                
                                
                  


                
                    
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                    


                    
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                    


                    
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                    


                    
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                        
                            
                                

                                

                                

                                

                            
                            
                                
                            
                        
                    
                

                
                    LIKE WHAT YOU SAW? Purchase the products seen in the videos.

And here is the CSS i have been using:

.page-container {
position: absolute;
width: 100%;
left: 0px;
}
.inner-container {
width: 100%;
margin: 0 auto;
text-align: center;
}







/* TOP MESSAGE */
.top-message-container {
position: relative;
width: 100%;
min-height: 360px;
//min-height: 655px;
background-color: #ff0000;
//background-image: url(images/core_header.jpg);
background-position: center bottom;
background-repeat: repeat-x;
overflow: hidden;
}

.topHeroImage {
position: relative;
//display: inline-block;
margin: 0 auto;
margin-top: 95px;
//margin-left: -350px;}


.header_intro_text
{
width: 700px;
margin: 0 auto;
padding-top: 40px;
padding-bottom: 40px;
font-family: sans-serif;
color: white;
//line-height: 24px;
font-size: 30px;
letter-spacing: 1px;
}


/* VIEW STATUS ... */
.navigation-container {
width: 100%;
min-height: 610px;
background-color: #e70000;
display: inline-block;
letter-spacing: 1px;
}

.navigation-container a
{
color: #ffffff;
padding-left: 50px;
padding-right: 50px;
}

.navigation-container  .inner-container {
color: #58595b;
min-height: 50px;
padding-top: 20px;
padding-bottom: 20px;
}


.main-video-container
{
width: 100%;
min-height: 611px;
//background-image: url(images/core_header.jpg);    
background: #ffffff;
position: relative;
overflow-x: hidden;

}






 .fret_vids
 {
text-align: center;
position: absolute;
//background-color: #000000;
//height: 610px;
display: inline-block;
width:100%;}

.fret_vids_2
{
  text-align: center;
  position: absolute;
  //background-color: #000000;
  //height: 610px;
  margin-top: 305px;
  display: inline-block;
  width:100%;
 }  


.fret_vids img
{
margin-left: -27px;
}

.fret_vids_2 img
{
margin-left: -27px;
}


.perc_vids
{
 text-align: center;
 left: 100%;
 position: absolute;
 //background-color: red;
 //height: 610px;
 display: inline-block;
 width:100%;
 }

.orch_vids
{
 text-align: center;
 left: 200%;
 position: absolute;
 //background-color: purple;
 //height: 610px;
 display: inline-block;
 width:100%;
 }

.wood_vids
{
  text-align: center;
  left: 300%;
  position: absolute;
  //color: white;
  //height: 610px;
  display: inline-block;
  width:100%;
}


/* VIDEO SECTION ... 
.detailed-reports-container
{
    display: ;
    width: 100%;
    min-height: 674px;
    background-color: #000000;
    background-position: center bottom;
    background-repeat: repeat-x;
    text-align: center;
}

.detailed-reports-container .inner-container {
    width: 970px;
}
*/

/* PRODUCT SECTION */
.prod-slider-container {
width: 100%;
min-height: 216px;
background-color: #ffffff;
background-position: center top;
background-repeat: repeat-x;
text-align: center;
}

.slider_header_text
{
font-family: sans-serif;
padding-top: 15px;
color: #58595b;
line-height: 24px;
font-size: 15px;
letter-spacing: 1px;    
}


/*video*/

.videoPlayer {
position: relative;
width: 970px;
height: 476px;    }

.video-playlist {
    position: absolute;
top: 285px;
    left: 15px;
}


.video-image {
    position: absolute;
    top: 42px;
    left: 408px;
}


/*video*/

RobertAKARobin · Accepted Answer

The issue is you have multiple things with the id of "carousel". An ID is like a Social Security Number or a fingerprint: it's unique. You should only have one element with a given ID. If you find yourself using many IDs, try a class instead.

The issue is you have multiple things with the id of "carousel". An ID is like a Social Security Number or a fingerprint: it's unique. You should only have one element with a given ID.

If you find yourself using many IDs, try a class instead. You select these in jQuery with ., same as in CSS.

For instance, to make everything with the class of "mycarousel" into a carousel:

Having multiple sliders under one navigation

Answers (1)

Related Questions