Küçük Resim Slaytları Çalışmıyor Ana Sayfa Slaytlar çalışmıyor iDangero.us tarafından sağlanan anahtarlık

Question

iDangero.us eklentisi tarafından Swiper kullanıyorum. Oluşturduğum düzen 6 kaydırıcı görüntüsü ve 6 küçük resim içeriyor.

Her nasılsa, küçük resimlerin ortalanarak hizalanması durumunda eklenti berbat olur. Bunu centeredSlides var değerini false olarak değiştirerek yapıyorum. https://jsfiddle.net/fa4218de/5/

birisi bana bu sabitleme yardım edebilir: Burada

bir JSFiddle var? herhangi bir çözüm olup olmadığını Veya .. durumda herkes yılında

Swipper API Docs

Answer 1

Buna bir cevap gerekiyor. Küçük resimleri tek bir kırpıcıya bağlayarak ve küçük resim numarasına göre döndürerek kendi çözümüm oluşturdum. Kod aşağıdadır. durumunda

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'); 

     }); 
    }); 
}); 

HTML (WordPress) ile PHP almak ve biçimlendirme fikri gerek

<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>