Question

所以我有一个导航设置，无论何时点击导航的某个部分，都会出现不同的部分。

我很遗憾在HTML 4中工作，似乎找不到合适的滑块来为此工作。

下面是两个幻灯片id想要完成的图像，Slider 1是产品滑块，滑块2是包含不同视频的垂直滑块。使用我们的CMS，所有这些都只需要是您点击时将更改精选视频的图像，您在页面上看到更大的视频。然后当你点击精选视频时，一个＆＃34; PrettyPhoto＆＃34;视频会弹出并播放。

这是我一直在使用的代码：

.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*/

这是我一直在使用的CSS：

{{1}}

Answer 1

问题是"carousel" class有多个问题。 ID就像社会安全号码或指纹：它是唯一的。您应该只有一个具有给定ID的元素。如果你发现自己使用多个ID，请尝试使用id。

问题是"carousel" class有多个问题。 ID就像社会安全号码或指纹：它是唯一的。您应该只有一个具有给定ID的元素。

如果您发现自己使用了许多ID，请尝试使用.。您可以使用class在jQuery中选择这些，与CSS中相同。

例如，将<div id="foo" class="mycarousel"></div> <div id="bar" class="mycarousel some-optional-other-class"></div>的“mycarousel”变成旋转木马：

<script>
$(".mycarousel").jcarousel("...")
</script>

{{1}}

在一个导航下有多个滑块

1 个答案: