拇指滚动器不起作用，使用slidersock jquery插件

Question

这是我当前的代码，几乎遵循specs：

<div id='my_carousel_ct' class='carousel-container'>  
      <div id="my_carousel_1" class="carousel slide">
            <!-- Carousel items -->
            <div id="my_carousel_2" class="carousel-inner rs-slider">
            <?php
                $Atargs = array(
                    'post_type'   => 'attachment',
                    'numberposts' => -1,
                    'post_status' => 'any',
                    'post_parent' => $post->ID/*,
                    'exclude'     => get_post_thumbnail_id()*/
                );
                $attachments = get_posts( $Atargs );
                if ( $attachments ) {
                    $first = true;
                    foreach ( $attachments as $attachment ) {
                        //echo '<li><img src="'.$attachment->guid.'"></li>';
                        $class = $first ? "active" : "";
                        echo '<div class="item '. $class .'">
                                    <div class="ts_border">
                                      <img src="'.$attachment->guid.'" alt="'.$attachment->alt.'" />
                                    </div>
                                </div>';
                        $first = false;
                    }
                }
            ?>
            </div>      
            <!-- Carousel nav -->
            <a class="carousel-custom" href="#my_carousel_1" data-slide="prev">&lsaquo;</a>
            <a class="carousel-custom" href="#my_carousel_1" data-slide="next">&rsaquo;</a>

            <div id="ts_scrol_1" class="ts_sld_scroller">
                  <ul>
                    <?php 
                        foreach ( $attachments as $attachment ) {
                            $i = 0;
                            echo '<li>
                                      <a href="#" class="ts_refine_st" data-to="'.$i++.'" data-slideindex="'.$i.'">
                                        <img src="'.$attachment->guid.'" style="width:100px;height:60px;margin:0" height="60" width="100" alt="'.$attachment->guid.'" />
                                        </a>
                                    </li>';
                        }
                    ?>
                  </ul>
            </div>  
      </div>    
</div>
<link rel='stylesheet' href='<?php echo get_template_directory_uri()?>/css/slider_multiple.css' /> 
<script type='text/javascript' src='<?php echo get_template_directory_uri()?>/js/wpts_slider_multiple.js'></script>
<script>
  jQuery(document).ready(function(e) {
     jQuery('#my_carousel_ct').tsSlider({
       thumbs:'bottom'
      , width:'475'
      , showText: true 
      , autoplay:5000
      , imgWidth: 100
      , imgHeight: 100
      , imgMarginTop: 0
      , imgMarginLeft: 0
      , squared: true 
      , textSquarePosition: 4 
      , textPosition: 'top'
      , imgAlignment: 'Center'
      , textColor: '999'
      , skin: 'transparent'
      , arrows:'ts-arrow-1'
      , sliderHeight: 400 
      , effects:''
    , titleBold: 'false'
    , titleItalic: 'false'
    , textBold: 'true' 
    , textItalic: 'false' 
    , textWidth: 90
      , background_sld:'#FFF'
      , background_caption:'#000'
     });        
  });
</script>

但这就是滚动条的外观 (demo)

我在控制台中看不到任何错误

另外，如果我点击拇指，它不会跳转到相关幻灯片

知道我错过了什么

Answer 1

我看到缩略图中缺少一些东西

您的代码：

<a href="#" class="ts_refine_st" data-to="1" data-slideindex="1">   
  <img src="http://toniweb.us/inmobiliaria/wp-content/uploads/2014/01/DSC09549.jpg" style="width:100px;height:60px;margin:0" height="60" width="100" alt="http://toniweb.us/inmobiliaria/wp-content/uploads/2014/01/DSC09549.jpg">
</a>

他们的代码：

<a href="#" class="ts_refine_st" data-to="1" data-slideindex="0">
   <img src="http://www.jqueryslidershock.com/wp-content/uploads/2012/10/AssassinsCreedIII4-1024x640.jpg" height="60" width="100">
</a>

区别是 data-to="1" data-slideindex="0" - 根据幻灯片增加。 $i 似乎没有递增，在 foreach 语句之前保留 $i= 0。

还有图片

您的代码：

<div class="item active" style="height: 250px; text-align: left; width: 100%;">
    <div class="ts_border" style="background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;">
          <img src="http://toniweb.us/inmobiliaria/wp-content/uploads/2014/01/DSC09502.jpg" alt="" style="width: 100%; height: 100%; margin-top: 0px; margin-left: 0px;">
        </div>

他们的代码：

<li class="rs-slide-0" style="opacity: 0; height: 340px; text-align: left; width: 100%;">
    <div class="ts_border" id="">   
       <img src="http://www.jqueryslidershock.com/wp-content/uploads/2012/10/AssassinsCreedIII4-1024x640.jpg" width="100%" height="340" class="rs-slide-image" style="opacity: 1; width: 100%; max-width: 100%; max-height: 100%; height: 100%; margin: 0px; display: inline-block; position: relative;">
       <div class="carousel-caption" style="top: 0px; left: 0px; bottom: auto;">
                        <h4>Fetch The Slider With Multiple Data Sources</h4>
                                    <p class="ts_txt" style="color: rgb(255, 255, 255);">
            Slidershock is very flexible, that means that you can show YouTube videos, Flickr Images, Instagram images, images taken from a RSS feed.&nbsp;You can also fetch the slider with the content of a Twitter account.            </p>
     </div>
   </div>
</li>

-- 容器的类名是唯一的，并且像 rs_slide_0、_1、_2 一样递增，这就是我认为缩略图指向的地方，因为您的是“项目”。

-- 2014 年 12 月 2 日更新

1. 在配置中添加, effects:'sliceH' 将解决缩略图和图像链接问题。如果您愿意，可以尝试使用其他效果，我尝试了sliceH 而不是提供空白值

2. 缩略图定位 将ts_scr_bottom 类添加到标签中，它将正确显示所有缩略图，并根据缩略图数量提供给<ul>

   <div id="ts_scrol_1" class="ts_sld_scroller ts_scr_bottom"> <ul style="width:900px;">

   编写一些 css 以将其定位到您想要的位置，查看演示。

3. 对于自动滚动缩略图 - 下载插件并将其包含在 wpts_slider_multiple.js 之后 http://www.jqueryslidershock.com/wp-content/plugins/tsslider/js/jquery_autoscroll.js

希望这会有所帮助！