3

私は bxsliderを使用しています。それは私にとって非常にうまく機能しますが、1つの問題があります。bxwrapper の外側にキャプションが必要です。

スライダーの html は次のようになります div キャプションのみが私によって作成されます

            <div class="captions"></div>
            <ul class="bxslider">
              <li><img src="images/1.jpg" title="headline, text" /></li>
              <li><img src="images/1.jpg" /></li>
              <li><img src="images/1.jpg" title="text" /></li>
              <li><img src="images/1.jpg" title="text" /></li>
            </ul>

キャプションは、次のコードを使用して画像のタイトルから生成されます。

* Appends image captions to the DOM
     */
    var appendCaptions = function(){
        // cycle through each child
        slider.children.each(function(index){
            // get the image title attribute
            var title = $(this).find('img:first').attr('title');
            // append the caption
            if (title != undefined && ('' + title).length) {
                $(this).append('<div class="bxcaptions"><span>' + title + '</span></div>');
            }
        });
    }

スライダーの外側にあるキャプションをスタイルしようとしましたが、スライダーはオーバーフロー非表示を使用しているため、不可能です。

だから私はキャプションが私が望むように配置できるに書き込まれること<div class="captions"></div>を望みます。

さらに、 , の前の見出しが h1 で強調表示され、残りは正常であることが必要な場合がありますが、それは単なる追加です。

ご協力いただきありがとうございます！

4

3 に答える 3

0

私はあなたがこのようにしたいと思います。以下のスニペットは、外側のbxスライダーキャプションのより良いソリューションです

jQuery('.bxslider').bxSlider({
  nextSelector: '#slider-next',
  prevSelector: '#slider-prev',
  nextText: 'next',
  prevText: 'prev',
  pager: true,
  prependtxt: 'Examples  ',
  pagerType: 'short',
  mode: 'fade',
  auto: true,
  onSliderLoad: function(currentIndex) {
    $(".slider-txt").html($('.bxslider li').eq(currentIndex).find("img").attr("title"));
  },
  onSlideBefore: function($slideElement, oldIndex, newIndex) {
    $(".slider-txt").html($slideElement.find("img").attr("title"));
  }
});
.slider-txt{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>

<div class="image-slider">
  <ul class="bxslider">
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Letterhead" title="Letterhead" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Business Card" title="Business Card" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Compliment Slip" title="Compliment Slip" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Envelope" title="Envelope" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Folder" title="Folder" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Referral Card" title="Referral Card" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Single Sided Referral Pad" title="Single Sided Referral Pad" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Post, note or thank you card" title="Post, note or thank you card" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="WEBSITE (OPTIONAL)" title="WEBSITE (OPTIONAL)" />
    </li>
  </ul>
  <div class="outside"><span id="slider-prev"></span><span id="slider-next"></span>
  </div>
  <div class="slider-txt"></div>
</div>

于 2015-04-21T05:21:23.827 に答える
0

ここで jsbin: http://jsbin.com/ikokex/3

jquery:

var captionText = '';    
$('ul.bxslider > li > img').each(function(i,e) {
  var titleAttr = $(this).attr('title');
  if(typeof titleAttr != 'undefined') {
     var captionSplit = titleAttr.split(',');
     $('.captions').append('<div class="caption-'+i+'"></div>');
     if (captionSplit.length > 1) {
       captionText += '<h1>'+captionSplit[0]+'</h1>';
       captionText += '<span>'+captionSplit[1]+'</span>';
     } else {
       captionText += '<span>'+captionSplit[0]+'</span>';
     }
     $('.caption-'+i).html(captionText);
     captionText = '';
  }
});
于 2013-07-05T14:14:20.460 に答える