슬라이드 쇼가 div에 추가되지 않습니다

내 고객 중 한 명을위한 특정 프로젝트의 슬라이드 쇼를 만들고 있습니다. 버튼을 클릭하면 ID가 "슬라이드 쇼"인 div에 올바른 이미지가 모두 포함 된 슬라이드 쇼가 추가됩니다. 어떤 이유로 버튼을 클릭해도 아무 일도 일어나지 않습니다. 누군가 내 코드를보고 무엇이 잘못 될 수 있는지 확인할 수 있습니까?슬라이드 쇼가 div에 추가되지 않습니다

<html> 
    <head> 
     <title> 
      Black Pro Pix | Professional Photography 
     </title> 
     <meta charset="UTF-8"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" href="blackpropixfallen.css"> 
     <!-- Satisfy Google Font --> 
     <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet"> 
     <!-- Slick Carousel --> 
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> 
     <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 




    </head> 

    <body> 
     <div id="myModal" class="modal"> 
      <div class="modal-dialog"> 
      <div class="modal-content"> 
        <div class = "reveal"> 
         <!-- Modal Content (The Image) --> 
         <img src="" id = "mimg" class = "modalimg" width = "100%" height = "auto"> 
       </div> 
      </div> 
      </div> 
     </div> 
     <div id = "slideshow"> 

     </div> 

        <div class = "hiddenfigures" style = "display:none" > 
         <div class = "slickcarousel"> 
         <img src = "Fallengallery/IMG_4553.jpg"> 
         <img src = "Fallengallery/Interconnected.jpg"> 
         <img src = "Fallengallery/LifeLongLies pt.2 (yellow).jpg"> 
         <img src = "Fallengallery/Mornin' Murderin' Marauder (abstract).jpg"> 
         <img src = "Fallengallery/Mornin' Murderin' Marauder (Red).jpg"> 
         <img src = "Fallengallery/Nightfall (vibrant).jpg"> 
         <img src = "Fallengallery/Paris 15.jpg"> 
         <img src = "Fallengallery/Paris 18.jpg"> 
         <img src = "Fallengallery/Somebody's Watching.jpg"> 
         </div> 
        </div> 
        <div class = "container-fluid"> 
         <div class = "row"> 
         <div class = "col-xs-12"> 
          <button class = "hiddenf"> 
          Hidden Figures 
          </button> 
         </div> 
         </div> 
        </div> 

      <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('.slickcarousel').slick({ 
       autoplay: true, 
       slidesToShow: 4, 
       variableWidth: true, 
       centerMode: true, 
       nextArrow: "<span class = 'glyphicon glyphicon-arrow-right'>", 
       prevArrow: "<span class = 'glyphicon glyphicon-arrow-left'>", 
       slidesToScroll: 1 

       }); 
       $("img").click(function(){ 
       var sr=$(this).attr('src'); 
       $('#mimg').attr('src',sr); 
       $("#myModal").modal(); 
       }); 
       displayHiddenf(); 

      }); 
      function displayHiddenf() { 
       $(".hiddenf").click(function() { 
        $("#slideshow").empty(); 
        $(".hiddenfigures").appendTo("#slideshow"); 
       }); 

    </script> 


    </body> 
</html>

출처

2017-09-08 Breevie

코드를 바꿀 수 있습니다. style=display:none;을 제거해보세요.

$(document).ready(function(){ 
 
    function runSlideShow() { 
 
     $('.slickcarousel').slick({ 
 
      autoplay: true, 
 
      slidesToShow: 4, 
 
      variableWidth: true, 
 
      centerMode: true, 
 
      nextArrow: "<span class = 'glyphicon glyphicon-arrow-right'>", 
 
      prevArrow: "<span class = 'glyphicon glyphicon-arrow-left'>", 
 
      slidesToScroll: 1 
 
     }); 
 
    } 
 
    $(".hiddenf").click(function(){ 
 
     $('.hiddenfigures').css('display','block'); 
 
     runSlideShow(); 
 
    }); 
 
    $("img").click(function(){ 
 
     var sr=$(this).attr('src'); 
 
     $('#mimg').attr('src',sr); 
 
     $("#myModal").modal(); 
 
    }); 
 
});

<div id="myModal" class="modal"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="reveal"> 
 
       <!-- Modal Content (The Image) --> 
 
       <img src="" id = "mimg" class = "modalimg" width = "100%" height = "auto"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div id="slideshow"> 
 
    <div class="hiddenfigures" style="display:none"> 
 
     <div class = "slickcarousel"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
      <img src="https://placeimg.com/300/150/any"> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class = "container-fluid"> 
 
    <div class = "row"> 
 
     <div class = "col-xs-12"> 
 
      <button class = "hiddenf"> 
 
       Hidden Figures 
 
      </button> 
 
     </div> 
 
    </div> 
 
</div>

출처

2017-09-08 12:28:52

정말 고마워요 !! 그게 – Breevie

환영합니다 @ 브리 비 .. .. :) –

<div> hiddenfigures에서 스타일 속성이 유지됩니다. 012s에서 ja-

출처

2017-09-08 12:12:43 user8579977

삭제 표시 : 없음;

사업부

$ ("#slideshow") .wrap를 ("")를 삭제;

출처

2017-09-08 14:55:44

슬라이드 쇼가 div에 추가되지 않습니다

답변

관련 문제