レール：carruselが家に帰った後に死ぬ

私のページのカルーセルに問題があります。私が127.0.0.1：3000に行くなら、それは完璧に動作します。しかし、製品のページに移動してから、nav-barから家に帰ると、ホームページはカルーセルなしで読み込まれます。ログファイルにエラーはなく、javasciptコンソールにエラーはありません。だから私はレール：carruselが家に帰った後に死ぬ

この

はカルーセルである...これで種の盲目だ：

<!-- Banner --> 
     <section class="tm-banner" name="home"> 
     <!-- Flexslider --> 
     <div class="flexslider flexslider-banner"> 
     <ul class="slides"> 
      <li> 
      <div class="tm-banner-inner"> 
       <h1 class="tm-banner-title"><span class="tm-yellow-text"> SAN MARTIN </span> <br>HERRAMIENTAS </h1> 
      </div> 
      <img src="/assets/carrusel/carrusel-01.jpg" /> 
      </li> 
      <li> 
      <div class="tm-banner-inner"> 
       <h1 class="tm-banner-title">AlQUILER <span class="tm-yellow-text">Y VENTA </span></h1> 
       <p class="tm-banner-subtitle">El mejor servicio</p> 
       <a href="#more" class="tm-banner-link">Ver Más</a> 
      </div> 
      <img src="/assets/carrusel/carrusel-02.jpg" /> 
      </li> 
      <li> 
      <div class="tm-banner-inner"> 
       <h1 class="tm-banner-title">REPUESTOS <span class="tm-yellow-text">Y ACCESORIOS</span></h1> 
       <p class="tm-banner-subtitle">De Herramientas eléctricas</p> 
       <a href="#more" class="tm-banner-link">Ver Más</a>  
      </div> 
       <img src="/assets/carrusel/carrusel-03.jpg" /> 
      </li> 
     </ul> 
    </div>  
</section>

そして、それはページの最後に、このスクリプトを使用しています。

<script> 
    $(function() { 

     // https://css-tricks.com/snippets/jquery/smooth-scrolling/ 
     $('a[href*=\\#]:not([href=\\#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
       if (target.length) { 
       $('html,body').animate({ 
        scrollTop: target.offset().top 
       }, 1000); 
       return false; 
       } 
      } 
     });   
    }); 
    $(window).load(function(){ 
     // Flexsliders 
     $('.flexslider.flexslider-banner').flexslider({ 
      controlNav: false 
     }); 
     $('.flexslider').flexslider({ 
      animation: "slide", 
      directionNav: false, 
      slideshow: false 
     }); 
    }); 
</script>

もありこれは.cssへの呼び出しです。

/* 
* jQuery FlexSlider v2.5.0 
* http://www.woothemes.com/flexslider/ 
* 
* Copyright 2012 WooThemes 
* Free to use under the GPLv2 and later license. 
* http://www.gnu.org/licenses/gpl-2.0.html 
* 
* Contributing author: Tyler Smith (@mbmufffin) 
* 
*/ 
/* ==================================================================================================================== 
* FONT-FACE 
* ====================================================================================================================*/ 
@font-face { 
    font-family: 'flexslider-icon'; 
    src: url('fonts/flexslider-icon.eot'); 
    src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
/* ==================================================================================================================== 
* RESETS 
* ====================================================================================================================*/ 
.flex-container a:hover, 
.flex-slider a:hover, 
.flex-container a:focus, 
.flex-slider a:focus { 
    outline: none; 
} 
.slides, 
.slides > li, 
.flex-control-nav, 
.flex-direction-nav { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.flex-pauseplay span { 
    text-transform: capitalize; 
} 
/* ==================================================================================================================== 
* BASE STYLES 
* ====================================================================================================================*/ 
.flexslider { 
    margin: 0; 
    padding: 0; 
} 
.flexslider .slides > li { 
    display: none; 
    -webkit-backface-visibility: hidden; 
} 
.flexslider .slides img { 
    width: 100%; 
    display: block; 
} 
.flexslider .slides:after { 
    content: "\0020"; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
html[xmlns] .flexslider .slides { 
    display: block; 
} 
* html .flexslider .slides { 
    height: 1%; 
} 
.no-js .flexslider .slides > li:first-child { 
    display: block; 
} 
/* ==================================================================================================================== 
* DEFAULT THEME 
* ====================================================================================================================*/ 
.flexslider { 
    margin: 0 0 60px; 
    background: #ffffff; 
    border: 4px solid #ffffff; 
    position: relative; 
    zoom: 1; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); 
    -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); 
    box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2); 
} 
.flexslider .slides { 
    zoom: 1; 
} 
.flexslider .slides img { 
    height: auto; 
} 
.flex-viewport { 
    max-height: 2000px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 
.loading .flex-viewport { 
    max-height: 300px; 
} 
.carousel li { 
    margin-right: 5px; 
} 
.flex-direction-nav { 
    *height: 0; 
} 
.flex-direction-nav a { 
    text-decoration: none; 
    display: block; 
    width: 40px; 
    height: 40px; 
    margin: -20px 0 0; 
    position: absolute; 
    top: 50%; 
    z-index: 10; 
    overflow: hidden; 
    opacity: 0; 
    cursor: pointer; 
    color: rgba(0, 0, 0, 0.8); 
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
} 
.flex-direction-nav a:before { 
    font-family: "flexslider-icon"; 
    font-size: 40px; 
    display: inline-block; 
    content: '\f001'; 
    color: rgba(0, 0, 0, 0.8); 
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); 
} 
.flex-direction-nav a.flex-next:before { 
    content: '\f002'; 
} 
.flex-direction-nav .flex-prev { 
    left: -50px; 
} 
.flex-direction-nav .flex-next { 
    right: -50px; 
    text-align: right; 
} 
.flexslider:hover .flex-direction-nav .flex-prev { 
    opacity: 0.7; 
    left: 10px; 
} 
.flexslider:hover .flex-direction-nav .flex-prev:hover { 
    opacity: 1; 
} 
.flexslider:hover .flex-direction-nav .flex-next { 
    opacity: 0.7; 
    right: 10px; 
} 
.flexslider:hover .flex-direction-nav .flex-next:hover { 
    opacity: 1; 
} 
.flex-direction-nav .flex-disabled { 
    opacity: 0!important; 
    filter: alpha(opacity=0); 
    cursor: default; 
} 
.flex-pauseplay a { 
    display: block; 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    bottom: 5px; 
    left: 10px; 
    opacity: 0.8; 
    z-index: 10; 
    overflow: hidden; 
    cursor: pointer; 
    color: #000; 
} 
.flex-pauseplay a:before { 
    font-family: "flexslider-icon"; 
    font-size: 20px; 
    display: inline-block; 
    content: '\f004'; 
} 
.flex-pauseplay a:hover { 
    opacity: 1; 
} 
.flex-pauseplay a.flex-play:before { 
    content: '\f003'; 
} 
.flex-control-nav { 
    width: 100%; 
    position: absolute; 
    bottom: -40px; 
    text-align: center; 
} 
.flex-control-nav li { 
    margin: 0 6px; 
    display: inline-block; 
    zoom: 1; 
    *display: inline; 
} 
.flex-control-paging li a { 
    width: 11px; 
    height: 11px; 
    display: block; 
    background: #666; 
    background: rgba(0, 0, 0, 0.5); 
    cursor: pointer; 
    text-indent: -9999px; 
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); 
    -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); 
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 
.flex-control-paging li a:hover { 
    background: #333; 
    background: rgba(0, 0, 0, 0.7); 
} 
.flex-control-paging li a.flex-active { 
    background: #000; 
    background: rgba(0, 0, 0, 0.9); 
    cursor: default; 
} 
.flex-control-thumbs { 
    margin: 5px 0 0; 
    position: static; 
    overflow: hidden; 
} 
.flex-control-thumbs li { 
    width: 25%; 
    float: left; 
    margin: 0; 
} 
.flex-control-thumbs img { 
    width: 100%; 
    height: auto; 
    display: block; 
    opacity: .7; 
    cursor: pointer; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 
.flex-control-thumbs img:hover { 
    opacity: 1; 
} 
.flex-control-thumbs .flex-active { 
    opacity: 1; 
    cursor: default; 
} 
/* ==================================================================================================================== 
* RESPONSIVE 
* ====================================================================================================================*/ 
@media screen and (max-width: 860px) { 
    .flex-direction-nav .flex-prev { 
    opacity: 1; 
    left: 10px; 
    } 
    .flex-direction-nav .flex-next { 
    opacity: 1; 
    right: 10px; 
    } 
}

出典

2017-03-01 Peyu

これはターボリンクの問題です。ターボリンクイベントのいずれかにイベントリスナーを追加する必要があります

$(document).on ('turbolinks:load', function(){ 
    $('.flexslider.flexslider-banner').flexslider({ 
     controlNav: false 
    }); 
    $('.flexslider').flexslider({ 
     animation: "slide", 
     directionNav: false, 
     slideshow: false 
    }); 
})

出典

2017-03-01 19:52:29 TheRealMrCrowley

ありがとうございました！それは今完璧に動作します！ – Peyu

レール：carruselが家に帰った後に死ぬ

答えて

関連する問題