jQuery/CSS Gallery/Slideshowサムネイルのスクロールを表示領域に限定する方法

Question

大丈夫、ギャラリーのスライドショー機能を使って、選択したサムネイルの画像ソースをメイン画像コンテナに表示します。

私はその部分を機能させることができると思います。今私の問題は、サムネイルのスクロール領域を定義しようとしています。サムネイルを表示し、空白を表示しません。ここで

はjQueryのです：

function thumbs_slide(){ 
      var more_thumbs = jQuery('.more-thumbs'); 
      var less_thumbs = jQuery('.less-thumbs'); 
      var thumbnails = jQuery('.thumb-outer-container .thumbnails'); 
      var more_scroll = '-100%'; 
      var less_scroll = '100%'; 
      var out_scroll = thumbnails.css('top'); 

      more_thumbs.hover(function(){ 
       thumbnails.css('top',more_scroll) 
      },function(){ 
       out_scroll = thumbnails.css('top'); 
       thumbnails.css('top',out_scroll);     
      }) 

      less_thumbs.hover(function(){ 
       thumbnails.css('top',less_scroll); 
      },function(){ 
       out_scroll = thumbnails.css('top'); 
       thumbnails.css('top',out_scroll); 
      }) 
     } 

     thumbs_slide(); 

CSS：

.single-product .load .images .thumb-outer-container { 
float: right; 
width: 20%; 
max-width: 200px; 
overflow: hidden; 
position: relative; 
border: 1px solid #d1d1d1; 


.thumb-outer-container .thumbnails { 
-moz-transition: all 5s ease-in-out; 
-ms-transition: all 5s ease-in-out; 
-o-transition: all 5s ease-in-out; 
-webkit-transition: all 5s ease-in-out; 
transition: all 5s ease-in-out; 
} 

.thumb-outer-container .more-thumbs, 
.thumb-outer-container .less-thumbs { 
opacity: .85; 
position: absolute; 
z-index: 99; 
right: 0; 
left: 0; 
height: 50%; 

text-align: center; 
cursor: pointer; 

-moz-transition: all .05s ease-in-out; 
-ms-transition: all .05s ease-in-out; 
-o-transition: all .05s ease-in-out; 
-webkit-transition: all .05s ease-in-out; 
transition: all .05s ease-in-out; 
} 

.more-thumbs { 
top: 0; 
} 

.more-thumbs::after { 
    content: '\f077'; 
    font-family: FontAwesome; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 
    border-bottom: 1px solid currentColor; 
    background-color: rgba(249,249,249,.95); 
    color: rgba(0,174,239,1); 
} 

.less-thumbs { 
bottom: 0; 
} 

.less-thumbs::after { 
    content: '\f078'; 
    font-family: FontAwesome; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    border-top: 1px solid currentColor; 
    background-color: rgba(249,249,249,.95); 
    color: rgba(0,174,239,1); 
} 

.thumb-outer-container .more-thumbs:hover, 
.thumb-outer-container .more-thumbs:focus, 
.thumb-outer-container .less-thumbs:hover, 
.thumb-outer-container .less-thumbs:focus { 
    opacity: 1 !important; 
} 

.single-product .load .images img { 
border: 0; 
} 

.single-product .load .images .thumbnails { 
padding-top: 0 !important; 
position: absolute; 
top: 0; 
right: 0; 
left: 0; 
} 

.single-product .load .images .thumbnails a { 
margin: 0 0 1px !important; 
padding: 0 !important; 
border: 0; 
float: left !important; 
display: inline-block !important; 
width: 100% !important; 
max-width: 200px !important; 
} 

.single-product .load .images .thumbnails a:hover, 
.single-product .load .images .thumbnails a:focus { 
    border-bottom: 0; 
} 

それはWPサイトだが、必要であれば、私はより多くのコードを追加することができますが、私はそれが私のjQueryのに必要なものであると考えています。

サンプルリンク：http://www.dev.mediaworksweb.com/beamimaging-wp/product/phosphor-screens/ - > [ギャラリー]タブ

おかげで、 マット

Answer 1

はこれを解決する1つの方法は、メイン画像を変更しますサムネイルスライダーで各画像にclickイベントをバインドすることですクリックしたこれは、次のように行われます：

$('.thumbnails a img').click(function() { 
    $(".woocommerce-main-image").attr("src", this.attr("src")); 
}); 

これが役に立ちます。

Answer 2

私の答えは、jQueryの変数になってしまった。

less_scrollを '100％'から '0'に変更しました。

var more_scroll = '-100%'; 
    var less_scroll = '0';