Jquery 将css样式应用于bx滑块元素_Jquery_Bxslider

Jquery 将css样式应用于bx滑块元素

jquery

Jquery 将css样式应用于bx滑块元素,jquery,bxslider,Jquery,Bxslider,我已经应用到我的网站jquery效果bx滑块，但现在我将应用到我的css的上一个箭头和下一个箭头。我应用到它的图像，但我甚至会应用css的适当性。这是一段jquery.bxslide.js代码： var defaults = { mode: 'horizontal', // 'horizontal', 'vertical', 'fade' infiniteLoop: true,

我已经应用到我的网站jquery效果bx滑块，但现在我将应用到我的css的上一个箭头和下一个箭头。我应用到它的图像，但我甚至会应用css的适当性。这是一段jquery.bxslide.js代码：

var defaults = {
        mode: 'horizontal',                                 // 'horizontal', 'vertical', 'fade'
        infiniteLoop: true,                                 // true, false - display first slide after last
        hideControlOnEnd: false,                        // true, false - if true, will hide 'next' control on last slide and 'prev' control on first
        controls: true,                                         // true, false - previous and next controls
        speed: 700,                                                 // integer - in ms, duration of time slide transitions will occupy
        easing: 'swing',                    // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
        pager: false,                                               // true / false - display a pager
        pagerSelector: null,                                // jQuery selector - element to contain the pager. ex: '#pager'
        pagerType: 'full',                                  // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4
        pagerLocation: 'bottom',                        // 'bottom', 'top' - location of pager
        pagerShortSeparator: '/',                       // string - ex: 'of' pager would display 1 of 4
        pagerActiveClass: 'pager-active',       // string - classname attached to the active pager link
        nextText: '',                                       // string - text displayed for 'next' control
        nextImage: 'images/right_arrow.png',                                            // string - filepath of image used for 'next' control. ex: 'images/next.jpg'
        nextSelector: null,                                 // jQuery selector - element to contain the next control. ex: '#next'
        prevText: '',                                       // string - text displayed for 'previous' control
        prevImage: 'images/left_arrow.png',                                         // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg'
        prevSelector: null,                                 // jQuery selector - element to contain the previous control. ex: '#next'
        captions: false,                                        // true, false - display image captions (reads the image 'title' tag)
        captionsSelector: null,                         // jQuery selector - element to contain the captions. ex: '#captions'
        auto: false,                                                // true, false - make slideshow change automatically
        autoDirection: 'next',                          // 'next', 'prev' - direction in which auto show will traverse
        autoControls: false,                                // true, false - show 'start' and 'stop' controls for auto show
        autoControlsSelector: null,                 // jQuery selector - element to contain the auto controls. ex: '#auto-controls'
        autoStart: true,                                        // true, false - if false show will wait for 'start' control to activate
        autoHover: false,                                       // true, false - if true show will pause on mouseover
        autoDelay: 0,                       // integer - in ms, the amount of time before starting the auto show
        pause: 3000,                                                // integer - in ms, the duration between each slide transition
        startText: 'start',                                 // string - text displayed for 'start' control
        startImage: '',                                         // string - filepath of image used for 'start' control. ex: 'images/start.jpg'
        stopText: 'stop',                                       // string - text displayed for 'stop' control
        stopImage: '',                                          // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg'
        ticker: false,

正如您所看到的，您必须将next/prev selector设置为control，但当我设置选择器时，我的控件消失了。为什么？

您需要在滑动条所在的页面上输入要在jQuery中输入的元素

因此，如果您的滑块位于index.html上，请打开该页面并找到以下代码

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
  $('#slider1').bxSlider({
  });
});


$（函数（）{
$（'#slider1'）.bxSlider({
});
});

把你想要的元素放在这里面。因此，要为下一个和上一个添加箭头图像，您可能需要

            <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
            <script src="jquery.bxSlider.min.js" type="text/javascript"></script>
            <script type="text/javascript">

$(function(){
  $('#slider1').bxSlider({
    nextImage: 'url of image goes here',
    prevImage: 'url of image goes here',
    prevText: '',   
    nextText: '',
  });
});


$（函数（）{
$（'#slider1'）.bxSlider({
下一页：'图像的url位于此处'，
prevImage:'图像的url位于此处'，
上一个文本：“”，
下一个文本：“”，
});
});

我还添加了“prevText”和nextText，并将它们留空，否则图像和文本都会显示给我

希望有帮助

Three two