Nivo滑块 - 在一个网页上的两个滑块

Question

我从dev7 studio的例子中复制了如何在一个网页上插入两个nivo滑块的代码，但我不确定如何调整每个滑块的各个设置，例如如何让第一个滑块只使用箭头，而第二个滑块只使用子弹。另外我将如何调整每个滑块的高度&子弹的位置方面的箭头位置。

这里是style.css中：

/*=================================*/ 
    /* Nivo Slider Demo 
    /* November 2010 
    /* By: Gilbert Pellegrom 
    /* http://dev7studios.com 
    /*=================================*/ 

    /*====================*/ 
    /*=== Reset Styles ===*/ 
    /*====================*/ 
    html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin:0; 
    padding:0; 
    border:0; 
    outline:0; 
    font-weight:inherit; 
    font-style:inherit; 
    font-size:100%; 
    font-family:inherit; 
    vertical-align:baseline; 
} 
body { 
    line-height:1; 
    color:black; 
    background:white; 
} 
table { 
    border-collapse:separate; 
    border-spacing:0; 
} 
caption, th, td { 
    text-align:left; 
    font-weight:normal; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content:""; 
} 
blockquote, q { 
    quotes:"" ""; 
} 
/* HTML5 tags */ 
header, section, footer, 
aside, nav, article, figure { 
    display: block; 
} 

/*===================*/ 
/*=== Main Styles ===*/ 
/*===================*/ 
body { 
    font:14px/1.6 Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif; 
    color:#333; 
    background:#eee; 
} 

a, a:visited { 
    color:blue; 
    text-decoration:none; 
} 
a:hover, a:active { 
    color:#000; 
    text-decoration:none; 
} 

#dev7link { 
    position:absolute; 
    top:0; 
    left:50px; 
    background:url(images/dev7logo.png) no-repeat; 
    width:60px; 
    height:67px; 
    border:0; 
    display:block; 
    text-indent:-9999px; 
} 

.default #slider { 
    margin:100px auto 0 auto; 
    width:960px; /* Make sure your images are the same size */ 
    height:310px; /* Make sure your images are the same size */ 
} 
.default #slider2 { 
    margin:100px auto 0 auto; 
    width:280px; /* Make sure your images are the same size */ 
    height:65px; /* Make sure your images are the same size */ 
} 
slider-wrapper, 
lider-wrapper { 
    margin-top:150px; 
} 

/*====================*/ 
/*=== Other Styles ===*/ 
/*====================*/ 
.clear { 
    clear:both; 
} 

这里是default.css：

/* 
Skin Name: Nivo Slider Default Theme 
Skin URI: http://nivo.dev7studios.com 
Skin Type: flexible 
Description: The default skin for the Nivo Slider. 
Version: 1.0 
Author: Gilbert Pellegrom 
Author URI: http://dev7studios.com 
*/ 

.default .nivoSlider { 
    position:relative; 
    background:#fff url(loading.gif) no-repeat 50% 50%; 
    margin-bottom:50px; 
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; 
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; 
    box-shadow: 0px 1px 5px 0px #4a4a4a; 
} 
.default .nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
.default .nivoSlider a { 
    border:0; 
    display:block; 
} 

.default .nivo-controlNav { 
    position:absolute; 
    left:70px; 
    bottom:25px; 
    margin-left:-40px; /* Tweak this to center bullets */ 
    z-index:300; 

} 



.default .nivo-controlNav a { 
    display:block; 
    width:22px; 
    height:22px; 
    background:url(bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin-right:1px; 
    float:left; 

} 








.default .nivo-controlNav a.active { 
    background-position:0 -22px; 
} 

.default .nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
.default a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
.default a.nivo-prevNav { 
    left:15px; 
} 

.default .nivo-caption { 
    font-family: Helvetica, Arial, sans-serif; 
} 
.default .nivo-caption a { 
    color:#fff; 
    border-bottom:1px dotted #fff; 
} 
.default .nivo-caption a:hover { 
    color:#fff; 
} 

Answer 1

要使用一个以上的滑块在您的网页，你会首先要改变#ID元素.CLASSES，无论是在HTML和CSS，因为我们现在创建多个滑块...

如果你正在寻找改变每一个哟ur滑块的外观，这将涉及到你的HTML内联样式以及如何输出皮肤（默认，光线，黑暗等）。只需将其更改为您的demo.html文件中所需的皮肤即可。它应该是这个样子：

DIV CLASS =“滑块包装主题默认”

现在替换“主题默认”与例如主题光。

要修改子弹在默认皮肤滑，你想一起玩：

.DEFAULT .nivo-controlNav`和.DEFAULT .nivo-controlNav一个{

要修改默认的皮肤滑块的箭头，你想一起玩：

.DEFAULT .nivo-directionNav一个{

Answer 2

每个滑块的ID应该不同，然后可以为每个滑块单独写入初始化和设置。

<div id="slider" class="nivoSlider"> 
    <img src="slide1.jpg" alt="" /> 
    <img src="slide2.jpg" alt="" /> 
    <img src="slide3.jpg" alt="" /> 
    <img src="slide4.jpg" alt="" /> 
</div> 
<script type="text/javascript"> 
    $('#slider').nivoSlider({ 
     effect: 'slideInLeft',   // Specify sets like: 'fold,fade,sliceDown' 
     slices: 1,      // For slice animations 
     boxCols: 8,      // For box animations 
     boxRows: 4,      // For box animations 
     animSpeed: 500,     // 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',    // Prev directionNav text 
     nextText: 'Next',    // 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 
    }); 
</script> 

每个jQuery函数中的ID部分应该跟用于标识HTML中每个滑块的两个不同的ID不同。

$('#slider').nivoSlider({ 

这意味着您将拥有该代码的两个副本，每个滑块一个。

每个滑块的不同CSS样式可以通过CSS文件中引用的这些ID获得。 请注意滑块容器的.nivoSlider类在两种情况下都很常见，因为它连接到滑块工作所需的常规样式。