簡単にスライドショーが作れる「bxslider」ですが、オプションを指定することで色々と設定を変えることができます。
が、最初にハマったのは、そのオプションの書き方・・・
【どこに書くの？】
公式ページの解説にある、インストールの仕方に書いてあるスクリプトと、オプションの説明に書いてあるスクリプトがなんか違うんで、分かりにくいですね。
結論から言うと、下記、■■■の部分に書きます。
<script>
$(document).ready(function(){
$('.slider').bxSlider(■■■);
});
</script>
そして、オプションは { } で囲って書きます。(オプションはカンマ区切り)
<script>
$(document).ready(function(){
$('.slider').bxSlider({option:value,option:value});
});
</script>
見やすいように改行して書くことができます。
<script>
$(document).ready(function(){
$('.slider').bxSlider({
mode:'fade',
auto:true,
pager:false,
controls:false,
speed:500,
pause:4000
});
});
</script>
どのようなオプションがあるかは、公式サイトに一覧表があります。（最下部に転載しておきます。） 注意点は、オプションの書き方で、「 ' 」が必要な場合とそうでない場合がある事。（多分、数値と true / false は不要、それ以外は必要？）値が必要なオプションを空にしてもエラーになるようです。 例：私が設定したのは下記 mode:'fade', auto:true, pager:false, controls:false, speed:500, pause:4000 上から順に
- mode
スライドの変遷方法（左右、上下、フェード）
'horizontal', 'vertical', 'fade'
初期値：'horizontal'
- auto
スライドが自動的にスタートするか
true / false
初期値：false
- pager
ページ送り（スライド下部の●●●）を表示するか
true / false
初期値：true
- controls
画像両端のページ送りの矢印を表示するかどうか
true / false
初期値：true
- speed
スライドが変遷する時の変化のスピード
数値
初期値：500
- pause
スライドが切り替わってから停止している時間
数値
初期値：4000
という感じです
複数の異なる設定のスライドを使いたい場合は、下記の赤字部分のクラス名を変えて設定を書いて行けばOKですね。
<script>
$(document).ready(function(){
$('.slider1').bxSlider({option:value,option:value});
});
</script>
<script>
$(document).ready(function(){
$('.slider2').bxSlider({option:value,option:value});
});
</script>
上記の二例では、slider1というクラス名のスライド領域と、slider2というクラス名のスライド領域は異なる設定にすることが可能となります。
slider1
slider2
※スライドショーのサイズを変更したい
最初、このスライドショー領域のスタイルで幅を指定してやればサイズが変わるんじゃないかと思ったのですが、幅は基本、親領域の幅MAXに設定されているようです。bx-wrapper当たりのスタイルを修正・強要すればいけるのかも知れませんが、それより簡単なのは、親領域の幅を狭めてしまうこと。 つまり、スライドショー領域をさらにDIVで囲って、そちらで幅を限定してやれば良いわけですね。
ページャーを消した時に下側に残る空白を消したい。
<style>.bx-wrapper{margin-bottom:0;}</style>
スライドショーの枠線を消したい
<style>.bx-wrapper{border:none;box-shadow:none;}</style>
オプション一覧
General
| Name | Default | Description |
|---|---|---|
|
mode
'horizontal', 'vertical', 'fade'
|
'horizontal' | Type of transition between slides |
|
speed
integer
|
500 | Slide transition duration (in ms) |
|
slideMargin
integer
|
0 | Margin between each slide |
|
startSlide
integer
|
0 | Starting slide index (zero-based) |
|
randomStart
boolean
|
false | Start slider on a random slide |
|
slideSelector
jQuery selector
|
'' | Element to use as slides (ex. 'div.slide'). Note: by default, bxSlider will use all immediate children of the slider element |
|
infiniteLoop
boolean
|
true | If true, clicking "Next" while on the last slide will transition to the first slide and vice-versa |
|
hideControlOnEnd
boolean
|
false | If true, "Prev" and "Next" controls will receive a class disabled when slide is the first or the last Note: Only used when infiniteLoop: false |
|
easing
if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)
|
null | The type of "easing" to use during transitions. If using CSS transitions, include a value for the transition-timing-function property. If not using CSS transitions, you may include plugins/jquery.easing.1.3.js for many options. See http://gsgd.co.uk/sandbox/jquery/easing/ for more info. |
|
captions
boolean
|
false | Include image captions. Captions are derived from the image's title attribute |
|
ticker
boolean
|
false | Use slider in ticker mode (similar to a news ticker) |
|
tickerHover
boolean
|
false | Ticker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions! |
|
adaptiveHeight
boolean
|
false | Dynamically adjust slider height based on each slide's height |
|
adaptiveHeightSpeed
integer
|
500 | Slide height transition duration (in ms). Note: only used if adaptiveHeight: true |
|
video
boolean
|
false | If any slides contain video, set this to true. Also, include plugins/jquery.fitvids.js See http://fitvidsjs.com/ for more info |
|
responsive
boolean
|
true | Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders. |
|
useCSS
boolean
|
true | If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used. |
|
preloadImages
'all', 'visible'
|
'visible' | If 'all', preloads all images before starting the slider. If 'visible', preloads only images in the initially visible slides before starting the slider (tip: use 'visible' if all slides are identical dimensions) |
|
touchEnabled
boolean
|
true | If true, slider will allow touch swipe transitions |
|
swipeThreshold
integer
|
50 | Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if touchEnabled: true |
|
oneToOneTouch
boolean
|
true | If true, non-fade slides follow the finger as it swipes |
|
preventDefaultSwipeX
boolean
|
true | If true, touch screen will not move along the x-axis as the finger swipes |
|
preventDefaultSwipeY
boolean
|
false | If true, touch screen will not move along the y-axis as the finger swipes |
|
wrapperClass
string
|
'bx-wrapper' | Class to wrap the slider in. Change to prevent from using default bxSlider styles. |
Pager
| Name | Default | Description |
|---|---|---|
|
pager
boolean
|
true | If true, a pager will be added |
|
pagerType
'full', 'short'
|
'full' | If 'full', a pager link will be generated for each slide. If 'short', a x / y pager will be used (ex. 1 / 5) |
|
pagerShortSeparator
string
|
' / ' | If pagerType: 'short', pager will use this value as the separating character |
|
pagerSelector
jQuery selector
|
'' | Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport |
|
pagerCustom
jQuery selector
|
null | Parent element to be used as the pager. Parent element must contain a element for each slide. See example here. Not for use with dynamic carousels. |
|
buildPager
function(slideIndex)
|
null | If supplied, function is called on every slide element, and the returned value is used as the pager item markup. See examples for detailed implementation |
Controls
| Name | Default | Description |
|---|---|---|
|
controls
boolean
|
true | If true, "Next" / "Prev" controls will be added |
|
nextText
string
|
'Next' | Text to be used for the "Next" control |
|
prevText
string
|
'Prev' | Text to be used for the "Prev" control |
|
nextSelector
jQuery selector
|
null | Element used to populate the "Next" control |
|
prevSelector
jQuery selector
|
null | Element used to populate the "Prev" control |
|
autoControls
boolean
|
false | If true, "Start" / "Stop" controls will be added |
|
startText
string
|
'Start' | Text to be used for the "Start" control |
|
stopText
string
|
'Stop' | Text to be used for the "Stop" control |
|
autoControlsCombine
boolean
|
false | When slideshow is playing only "Stop" control is displayed and vice-versa |
|
autoControlsSelector
jQuery selector
|
null | Element used to populate the auto controls |
|
keyboardEnabled
boolean
|
false | Enable keyboard navigation for visible sliders |
Auto
| Name | Default | Description |
|---|---|---|
|
auto
boolean
|
false | Slides will automatically transition |
|
stopAutoOnClick
boolean
|
false | Auto will stop on interaction with controls |
|
pause
integer
|
4000 | The amount of time (in ms) between each auto transition |
|
autoStart
boolean
|
true | Auto show starts playing on load. If false, slideshow will start when the "Start" control is clicked |
|
autoDirection
'next', 'prev'
|
'next' | The direction of auto show slide transitions |
|
autoHover
boolean
|
false | Auto show will pause when mouse hovers over slider |
|
autoDelay
integer
|
0 | Time (in ms) auto show should wait before starting |
Carousel
| Name | Default | Description |
|---|---|---|
|
minSlides
integer
|
1 | The minimum number of slides to be shown. Slides will be sized down if carousel becomes smaller than the original size. |
|
maxSlides
integer
|
1 | The maximum number of slides to be shown. Slides will be sized up if carousel becomes larger than the original size. |
|
moveSlides
integer
|
0 | The number of slides to move on transition. This value must be >= minSlides, and <= maxSlides. If zero (default), the number of fully-visible slides will be used. |
|
slideWidth
integer
|
0 | The width of each slide. This setting is required for all horizontal carousels! |
|
shrinkItems
boolean
|
false | The Carousel will only show whole items and shrink the images to fit the viewport based on maxSlides / minSlides. |
Keyboard
| Name | Default | Description |
|---|---|---|
|
keyboardEnabled
boolean
|
false | Allows for keyboard control of visible slider. Keypress ignored if slider not visible. |
Accessibility
| Name | Default | Description |
|---|---|---|
|
ariaLive
boolean
|
true | Adds Aria Live attribute to slider. |
|
ariaHidden
boolean
|
true | Adds Aria Hidden attribute to any nonvisible slides. |
Callbacks
| Name | Arguments | Description |
|---|---|---|
|
onSliderLoad
|
currentIndex:
element index of the current slide
|
Executes immediately after the slider is fully loaded |
|
onSliderResize
|
currentIndex:
element index of the current slide
|
Executes immediately after the slider is resized |
|
onSlideBefore
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately before each slide transition. |
|
onSlideAfter
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately after each slide transition. Function argument is the current slide element (when transition completes). |
|
onSlideNext
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately before each "Next" slide transition. Function argument is the target (next) slide element. |
|
onSlidePrev
|
$slideElement:
jQuery element of the destination element
oldIndex:
element index of the previous slide (before the transition)
newIndex:
element index of the destination slide (after the transition)
|
Executes immediately before each "Prev" slide transition. Function argument is the target (prev) slide element. |
Public Methods
| Name | Description |
|---|---|
|
goToSlide
|
Performs a slide transition to the supplied slide index (zero-based) |
|
goToNextSlide
|
Performs a "Next" slide transition |
|
goToPrevSlide
|
Performs a "Prev" slide transition |
|
startAuto
|
Starts the auto show. Provide an argument false to prevent the auto controls from being updated. |
|
stopAuto
|
Stops the auto show. Provide an argument false to prevent the auto controls from being updated. |
|
getCurrentSlide
|
Returns the current active slide |
|
getSlideCount
|
Returns the total number of slides in the slider |
|
redrawSlider
|
Redraw the slider. Useful when needing to redraw a hidden slider after it is unhidden. |
|
reloadSlider
|
Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object. |
|
destroySlider
|
Destroy the slider. This reverts all slider elements back to their original state (before calling the slider). |
コメント