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）

enter image description here

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

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

知道我错过了什么

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一样递增，这是指向缩略图的内容，因为我相信你的位置是“item”。

- 2014年2月2日更新

在配置中添加, effects:'sliceH'将解决缩略图和图像链接问题。如果需要，请尝试其他效果，我尝试sliceH而不是提供空白值
缩略图定位将类ts_scr_bottom添加到标记中，该标记将正确显示所有缩略图，并根据缩略图的数量提供给<ul>

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

写一些css来定位它你想要的方式，查看演示。
自动滚动缩略图 - 下载插件并在wpts_slider_multiple.js http://www.jqueryslidershock.com/wp-content/plugins/tsslider/js/jquery_autoscroll.js

希望这有帮助！

使用slidersock jquery插件，Thumb滚动条不起作用

1 个答案: