0

私はいくつかの画像を持っています:

<div id="slider" class="nivoSlider">
<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />
</div>

基本的にサイズは 600x450 前後です。そして、それらに CSS を適用しました。

.nivoSlider img
{
   height: 450px;
   width: 600px;
   margin-left: 25px;
}

スライド ショーを作りたかったので、nivoSlider プラグインを選択しました。

$(document).ready(function () {
        $('#slider').nivoSlider({
            effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
            slices: 15, // For slice animations
            boxCols: 8, // For box animations
            boxRows: 4, // For box animations
            animSpeed: 300, // Slide transition speed
            pauseTime: 3000, // How long each slide will show
            startSlide: 0, // Set starting Slide (0 index)
            directionNav: true, // Next & Prev navigation
            controlNav: true, // 1,2,3... navigation
            controlNavThumbs: false, // Use thumbnails for Control Nav
            pauseOnHover: true, // Stop animation while hovering
            manualAdvance: false, // Force manual transitions
            prevText: '<<', // Prev directionNav text
            nextText: '>>', // Next directionNav text
            randomStart: false, // Start on a random slide
            beforeChange: function () { }, // Triggers before a slide transition
            afterChange: function () { }, // Triggers after a slide transition
            slideshowEnd: function () { }, // Triggers after all slides have been shown
            lastSlide: function () { }, // Triggers when last slide is shown
            afterLoad: function () { } // Triggers when slider has loaded
        });

私の質問は、ブラウザの幅が変わるときにサイズを動的に変更する方法ですか?

4

2 に答える 2

1

このスライダーを使用してください...完全に反応し、簡単に編集できます:)

http://flexslider.woothemes.com/

于 2013-07-16T13:41:48.370 に答える