サムネイルが動作しないセンタースライドスワイパーiDangero.us

Question

私はiDangero.usプラグインでスワイパーを使用しています。作成したレイアウトには、6つのスライダーイメージと6つのサムネイルが含まれています。

どういうわけか、サムネイルを中央揃えにすると、プラグインがうまくなりません。私はcenteredSlidesのvarをfalseに変更することでこれを行います。ここで

はJSFiddleです：https://jsfiddle.net/fa4218de/5/

誰かが私がこれを固定助けることができますか？それとも誰もこれに答えを必要とする場合..

Swipper API Docs

Answer 1

任意の回避策があるかどうか。サムネイルを1つのスワイパにリンクし、サムネイルの子の数を基準にして回転させることで、自分の解決策を作成しました。以下はコードです。あなたは

<div class="portfolios-wrapper"> 
<?php if ($postslist->have_posts()) : ?> 
     <div class="swiper-container gallery-top"> 
      <div class="swiper-wrapper gallery_top_slides"> 

     <?php while ($postslist->have_posts()) : $postslist->the_post(); ?> 

       <?php 
       $post_id   = $post->ID; 
       $permalink   = get_post_permalink($post_id); 
       $backgroundImage = get_post_meta($post_id, 'portfolio_background_image', true); 

       ?> 

       <div class="swiper-slide top_slide_<?php echo $top_counter;?>" style="background-image: url('<?php echo $backgroundImage; ?>');"> 

        <div class="portfolio-details" style="background-color:transparent"> 
         <div class="container" style="background-color:transparent"> 
          <div class="row"> 
           <div class="col-md-6"> 
            <div class="portfololio-thumb"> 
             <?php echo the_post_thumbnail('large');?> 
             <?php echo the_title('<h2>', '</h2>', true);?> 
            </div> 
           </div> 

           <div class="col-md-6"> 

            <div class="portfololio-excerpt"> 
             <?php echo the_title('<h2>', '</h2>', true);?> 
             <p><?php echo get_the_date('M Y'); ?></p> 
             <span class="excerpt"><?php echo the_excerpt(); ?></span> 
            </div> 
           </div> 

          </div> 
         </div> 
        </div> 
       </div> 

     <?php $top_counter++; endwhile; ?> 
      </div> 
      <div class="container custom_adjust"> 
       <div class="swiper-button-next custom-btn-next">Next</div> 
       <div class="swiper-button-prev custom-btn-prev">Previous</div> 
      </div> 
     </div> 
<?php endif; ?> 
</div> 

<div class="portfolios-thumb-wrapper"> 
<?php if ($postslist->have_posts()) : ?> 
     <div class="container"> 
       <div class="row"> 

      <?php while ($postslist->have_posts()) : $postslist->the_post(); ?> 

        <?php if (has_post_thumbnail($post->ID)): ?> 
         <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail'); ?> 
        <?php endif; ?> 

        <div class="col-md-2 slide_no"> 
         <div class="thumb_slide" style="background-image: url(' <?php echo $image[0]; ?> ')"> 
         </div> 
         <div class="portfolio-title"><?php echo the_title('<h2>', '</h2>', true);?> </div> 
        </div> 

      <?php $thumb_counter++; endwhile; ?> 
       </div> 
     </div> 

<?php endif; ?> 
</div> 

を取得し、マークアップのアイデアする必要がある場合で

HTMLとJS

jQuery(document).ready(function($) { 

    var galleryTop = new Swiper('.gallery-top', { 
     paginationClickable: true, 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev', 
     spaceBetween: 30, 

    }); 

    // Make first child of div active 
    $(".portfolios-thumb-wrapper .container .row div:first-child").addClass("active"); 


    // When click on any of the thumbnails with classname 'slide_no' it 
    // gets the child number of the div and then I just use that number 
    // to rotate to that specific slide number by 'slideTo' callback 
    $('.slide_no').each(function (i) { 
     $(this).click(function (e) { 
      e.preventDefault(); 
      var thumb = i; 
      galleryTop.slideTo(thumb,1000,false); 
      $('.slide_no').removeClass('active'); 
      $(this).addClass('active'); 

     }); 
    }); 
}); 

PHP（ワードプレス）