하나의 탐색 아래에 여러 개의 슬라이더가 있습니다.

그래서 탐색의 특정 부분을 클릭 할 때마다 다른 섹션이 표시됩니다.하나의 탐색 아래에 여러 개의 슬라이더가 있습니다.

불행히도 HTML 4에서 작업 중이며 제대로 작동하지 않는 슬라이더를 찾은 것 같습니다.

다음은 달성하려는 두 슬라이더의 이미지입니다. 슬라이더 1은 제품 슬라이더이고 슬라이더 2는 다른 비디오를 포함하는 수직 슬라이더입니다. 우리의 CMS를 사용하면 이러한 모든 이미지가 있어야만 클릭 할 때 페이지에서 크게 보이는 추천 동영상이 변경됩니다. 추천 비디오를 클릭하면 "PrettyPhoto"비디오가 팝업되어 재생됩니다. 여기

내가 사용하고있는 코드입니다 :

  <!-- + HEADER --> 
      <div class="top-message-container"> 
       <div class="inner-container"> 
        <div class="topHeroImage"> 
         <img src="images/core_head_logo.png" alt="Evans '56 Calftone"> 
         <div class="header_intro_text">Get started by choosing your instrument below</b>. 
         </div> 
        </div> 

       </div> 
      </div> 
      <!-- - END HEADER -->    



      <!-- + NAVIGATION ... --> 
      <div class="navigation-container"> 
       <div class="inner-container"> 
        <a href="#1"><img src="images/guitar_bass-icon.png"></a> <a href="#2"><img src="images/percussion-icon.png"></a> <a href="#3"><img src="images/orchestral-icon.png"></a> <a href="#4"><img src="images/woodwinds-icon.png"></a>   
       </div> 


       <div class="main-video-container"> 
        <div class="fret_vids" id="1"> 
         <div class="videoPlayer" id="video1" style="display: none;"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video2" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video3" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video4" style="display:"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a> 
          </div> 
         </div> 
        </div> 


        <div class="perc_vids" id="2"> 
         <div class="videoPlayer" id="video1" style="display: none;"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video2" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video3" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video4" style="display:"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a> 
          </div> 
         </div> 
        </div> 


        <div class="orch_vids" id="3"> 
         <div class="videoPlayer" id="video1" style="display: none;"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video2" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video3" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video4" style="display:"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a> 
          </div> 
         </div> 
        </div> 


        <div class="wood_vids" id="4"> 
         <div class="videoPlayer" id="video1" style="display: none;"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/R3O7if2Koks?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_intro.jpg" alt="Intro Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video2" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/xWbZuje4LAc?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_1.jpg" alt="Round 1 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video3" style="display: none"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3 selected"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/5O2zaA02c_Y?list=PLnWoocIzrCpDJBVXJqJnB5iJE66Owoxbg" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_2.jpg" alt="Round 2 Video"></a> 
          </div> 
         </div> 
         <div class="videoPlayer" id="video4" style="display:"> 
          <div class="video-playlist"> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video1');" class="video_btn_1"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video2');" class="video_btn_2"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video3');" class="video_btn_3"></a><br /> 
           <a href="javascript:void(0)" onMouseUp="chooseTab('video4');" class="video_btn_4 selected"></a><br /> 
          </div> 
          <div class="video-image"> 
           <a href="http://youtu.be/HKYInO4T4T4" rel="prettyPhoto"><img src="http://www.daddario.com/resources/newsletters/heavyweight/heavyweight_video_round_3.jpg" alt="Round 3 Video"></a> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="prod-slider-container"> 
        <div class="slider_header_text" id="1"><b>LIKE WHAT YOU SAW?</b> Purchase the products seen in the videos.</div>       
       </div> 
      </div> 
      <!-- - END NAVIGATION ... -->

그리고 여기 내가 사용 된 CSS입니다 :

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

출처

2016-10-13 Emily Kendall Shortell

현재 위치를 찾기 위해 코드를 많이 가지고있다. 관련 코드로자를 수 있습니까? 아니면이 코드를 사용하여 CodePen 또는 JSFiddle을 만들어서 실제로 볼 수 있습니까? – RobertAKARobin

또한 작동하지 않는 부분에 대해 더 구체적으로 설명 할 수 있습니까? – RobertAKARobin

아무 문제없이, 함께 넣어 것입니다. –

문제는 여러 가지고있다 id이 "carousel" 인 것. ID는 사회 보장 번호 또는 지문과 같습니다 : 고유합니다. 주어진 ID를 가진 요소가 하나만 있어야합니다. 많은 ID를 사용하여 자신을 찾으면 class을 사용해보세요.

문제는 "carousel"의 id 여러 가지가 있습니다. 신분증은 사회 보장 번호 또는 지문과 같습니다 : 고유합니다. 주어진 ID로 하나의 요소 만 가져야합니다.

많은 ID를 사용하는 경우 class을 사용해보십시오. CSS에서와 마찬가지로 .으로 jQuery에서 선택합니다.

예를 들어, 회전 목마에 "mycarousel"의 class에 모든 것을 만들려면 :

<div id="foo" class="mycarousel"></div> 
<div id="bar" class="mycarousel some-optional-other-class"></div>

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

출처

2016-10-19 15:37:33 RobertAKARobin

sooo 많은 감사합니다! 나는 그것을 고쳤고 모든 것이 작동하고 있습니다! 이제는 모든 것을 아름답게 꾸미기 만하면됩니다. 당신은 거대한 도움과 생명의 은인이었습니다! –

하나의 탐색 아래에 여러 개의 슬라이더가 있습니다.

답변

관련 문제