jcarousel_带jCarousel的固定滑块

jcarousel

?ontent slider with jCarousel Today we are going to develop a nice content slider with jCarousel. It is possible that you have already seen similar sliders before, and were looking forward to repeat it. Our slider consists of next elements: initial intro block, control buttons to navigate through the slides, slides itself, and carousel with images (thumbnails) in the bottom. Plus, we can see all the slides one after the other (in alternative layout). This slider works very well in all the most popular browsers (Chrome, Firefox, IE7-9 etc).

jCarousel的活动滑块今天，我们将使用jCarousel开发一个不错的内容滑块。 您可能之前已经看过类似的滑块，并期待重复进行。 我们的滑块由以下元素组成：初始介绍块，用于在幻灯片中导航的控制按钮，幻灯片本身以及底部带有图像(缩略图)的轮播。 另外，我们可以看到所有幻灯片一张一张接一张(在其他布局中)。 此滑块可在所有最受欢迎的浏览器(Chrome，Firefox，IE7-9等)中很好地工作。

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, let’s download the source files and start coding !

好的，让我们下载源文件并开始编码！

步骤1. HTML (Step 1. HTML)

In the beginning we have to add all the necessary scripts and styles in header section:

首先，我们必须在标头部分添加所有必需的脚本和样式：

<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="js/main.js"></script>

<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="js/main.js"></script>

There are three javascript files: jQuery library, jCarousel library and our own custom script. As I mentioned before, we are going to use intro block, here is it:

一共有三个javascript文件：jQuery库，jCarousel库和我们自己的自定义脚本。 正如我之前提到的，我们将使用介绍块：

<!-- Content slider - intro section -->
<div class="sl-intro">
    <img class="intro-img" alt="Intro" src="images/1.jpg" />
    <p>'<a rel="nofollow" target="_blank" href="http://www.flickr.com/photos/infinite-systems/galleries/72157623200762669/">I wish I had Taken That</a>' gallery by Little_Debbie</p>
    <br />
    <a href="javascript:void(0)" class="sl-start">Look all the photos</a>
</div>

<!-- Content slider - intro section -->
<div class="sl-intro">
    <img class="intro-img" alt="Intro" src="images/1.jpg" />
    <p>'<a rel="nofollow" target="_blank" href="http://www.flickr.com/photos/infinite-systems/galleries/72157623200762669/">I wish I had Taken That</a>' gallery by Little_Debbie</p>
    <br />
    <a href="javascript:void(0)" class="sl-start">Look all the photos</a>
</div>

Basically, this is simple DIV block with an image and text inside. For our slider I selected nice photo gallery by Little_Debbie (from flickr). After the intro section, there is main section:

基本上，这是简单的DIV块，其中包含图像和文本。 对于我们的滑块，我选择了Little_Debbie的漂亮照相馆(来自flickr)。 在介绍部分之后，有主要部分：

<!-- Content slider - main section -->
<div class="sl-main" style="display:none">
    <!-- Controls -->
    <div class="sl-controls">
        <a class="next"></a>
        <div id="count"></div>
        <a class="prev"></a>
        <a class="back-home"></a>
    </div>
    <!-- Content -->
    <div class="sl-content">
        <div class="sl-slide">
            <h2 class="sl-title">Just Hidden</h2>
            <p><img src="images/1.jpg" /> 'Just Hidden' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Come sit awhile...</h2>
            <p><img src="images/2.jpg" /> 'Come sit awhile... image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">escapando</h2>
            <p><img src="images/3.jpg" /> 'escapando' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Beelitz Heilstatten</h2>
            <p><img src="images/4.jpg" /> 'Beelitz Heilstatten' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">I'm just a little guy...</h2>
            <p><img src="images/5.jpg" /> 'I'm just a little guy...' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Nothing says I love you...</h2>
            <p><img src="images/6.jpg" /> 'Nothing says I love you...' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">The birds</h2>
            <p><img src="images/7.jpg" /> 'The birds' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Have a Seat</h2>
            <p><img src="images/8.jpg" /> 'Have a Seat' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Jess and the birds</h2>
            <p><img src="images/9.jpg" /> 'Jess and the birds' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Lost Angel</h2>
            <p><img src="images/10.jpg" /> 'Lost Angel' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Here I come...</h2>
            <p><img src="images/11.jpg" /> 'Here I come... image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Inle Lake Reflections</h2>
            <p><img src="images/12.jpg" /> 'Inle Lake Reflections' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Evening Excursion</h2>
            <p><img src="images/13.jpg" /> 'Evening Excursion' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">In the woods</h2>
            <p><img src="images/14.jpg" /> 'In the woods' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">In the room</h2>
            <p><img src="images/15.jpg" /> 'In the room' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">batsto</h2>
            <p><img src="images/16.jpg" /> 'batsto' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">A boy playing with his...</h2>
            <p><img src="images/17.jpg" /> 'A boy playing with his...' image description</p>
        </div>
    </div>
    <!-- jCarousel -->
    <ul id="sl-thumbs">
        <li><img src="images/1t.jpg" /></li>
        <li><img src="images/2t.jpg" /></li>
        <li><img src="images/3t.jpg" /></li>
        <li><img src="images/4t.jpg" /></li>
        <li><img src="images/5t.jpg" /></li>
        <li><img src="images/6t.jpg" /></li>
        <li><img src="images/7t.jpg" /></li>
        <li><img src="images/8t.jpg" /></li>
        <li><img src="images/9t.jpg" /></li>
        <li><img src="images/10t.jpg" /></li>
        <li><img src="images/11t.jpg" /></li>
        <li><img src="images/12t.jpg" /></li>
        <li><img src="images/13t.jpg" /></li>
        <li><img src="images/14t.jpg" /></li>
        <li><img src="images/15t.jpg" /></li>
        <li><img src="images/16t.jpg" /></li>
        <li><img src="images/17t.jpg" /></li>
    </ul>
    <!-- ViewAll button -->
    <div class="sl-view-all">View as one page</div>
</div>

<!-- Content slider - main section -->
<div class="sl-main" style="display:none">
    <!-- Controls -->
    <div class="sl-controls">
        <a class="next"></a>
        <div id="count"></div>
        <a class="prev"></a>
        <a class="back-home"></a>
    </div>
    <!-- Content -->
    <div class="sl-content">
        <div class="sl-slide">
            <h2 class="sl-title">Just Hidden</h2>
            <p><img src="images/1.jpg" /> 'Just Hidden' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Come sit awhile...</h2>
            <p><img src="images/2.jpg" /> 'Come sit awhile... image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">escapando</h2>
            <p><img src="images/3.jpg" /> 'escapando' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Beelitz Heilstatten</h2>
            <p><img src="images/4.jpg" /> 'Beelitz Heilstatten' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">I'm just a little guy...</h2>
            <p><img src="images/5.jpg" /> 'I'm just a little guy...' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Nothing says I love you...</h2>
            <p><img src="images/6.jpg" /> 'Nothing says I love you...' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">The birds</h2>
            <p><img src="images/7.jpg" /> 'The birds' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Have a Seat</h2>
            <p><img src="images/8.jpg" /> 'Have a Seat' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Jess and the birds</h2>
            <p><img src="images/9.jpg" /> 'Jess and the birds' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Lost Angel</h2>
            <p><img src="images/10.jpg" /> 'Lost Angel' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Here I come...</h2>
            <p><img src="images/11.jpg" /> 'Here I come... image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Inle Lake Reflections</h2>
            <p><img src="images/12.jpg" /> 'Inle Lake Reflections' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">Evening Excursion</h2>
            <p><img src="images/13.jpg" /> 'Evening Excursion' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">In the woods</h2>
            <p><img src="images/14.jpg" /> 'In the woods' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">In the room</h2>
            <p><img src="images/15.jpg" /> 'In the room' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">batsto</h2>
            <p><img src="images/16.jpg" /> 'batsto' image description</p>
        </div>
        <div class="sl-slide">
            <h2 class="sl-title">A boy playing with his...</h2>
            <p><img src="images/17.jpg" /> 'A boy playing with his...' image description</p>
        </div>
    </div>
    <!-- jCarousel -->
    <ul id="sl-thumbs">
        <li><img src="images/1t.jpg" /></li>
        <li><img src="images/2t.jpg" /></li>
        <li><img src="images/3t.jpg" /></li>
        <li><img src="images/4t.jpg" /></li>
        <li><img src="images/5t.jpg" /></li>
        <li><img src="images/6t.jpg" /></li>
        <li><img src="images/7t.jpg" /></li>
        <li><img src="images/8t.jpg" /></li>
        <li><img src="images/9t.jpg" /></li>
        <li><img src="images/10t.jpg" /></li>
        <li><img src="images/11t.jpg" /></li>
        <li><img src="images/12t.jpg" /></li>
        <li><img src="images/13t.jpg" /></li>
        <li><img src="images/14t.jpg" /></li>
        <li><img src="images/15t.jpg" /></li>
        <li><img src="images/16t.jpg" /></li>
        <li><img src="images/17t.jpg" /></li>
    </ul>
    <!-- ViewAll button -->
    <div class="sl-view-all">View as one page</div>
</div>

In the beginning of this main section you can see control buttons, after, the content section with slides and the carousel (UL-LI based)

在此主要部分的开头，您可以看到控制按钮，之后是带有幻灯片和轮播的内容部分(基于UL-LI)

步骤2. CSS (Step 2. CSS)

css / main.css (css/main.css)

To adjust our intro section I used next styles:

为了调整介绍部分，我使用了以下样式：

/* Slider styles */
.sl-intro, .sl-main {
    background-color: #BBBBBB;
    border: 1px solid #000;
    margin: 20px auto;
    overflow: hidden;
    padding: 5px;
    width: 800px;
    /* CSS3 round border and shadow */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
    -moz-box-shadow: 0 1px 2px 0 rgba(119,119,119,.5);
    box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
}
.sl-intro img {
    float: left;
    margin: 0 10px 10px 0;
}
.sl-intro p {
    font-size: 24px;
}
.sl-intro a {
    font-size: 20px;
}

/* Slider styles */
.sl-intro, .sl-main {
    background-color: #BBBBBB;
    border: 1px solid #000;
    margin: 20px auto;
    overflow: hidden;
    padding: 5px;
    width: 800px;
    /* CSS3 round border and shadow */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
    -moz-box-shadow: 0 1px 2px 0 rgba(119,119,119,.5);
    box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
}
.sl-intro img {
    float: left;
    margin: 0 10px 10px 0;
}
.sl-intro p {
    font-size: 24px;
}
.sl-intro a {
    font-size: 20px;
}

It is the basic rounded box with image at the left and text at the right. Now, styles for navigation control buttons:

它是基本的圆形框，左侧有图像，右侧有文本。 现在，导航控制按钮的样式：

/* Controls */
.sl-controls {
    margin: 5px;
    overflow: hidden;
}
.sl-controls .next {
    background:transparent url(sprite.png) no-repeat -100px 0;
    cursor: pointer;
    display:block;
    float:right;
    height:35px;
    width:36px;
}
.sl-controls .next:hover {
    background-position:-100px -100px
}
.sl-controls .prev {
    background:transparent url(sprite.png) no-repeat -50px 0;
    cursor: pointer;
    display:block;
    float:right;
    height:35px;
    margin:0 0 .5em .5em;
    width:36px;
}
.sl-controls .prev:hover {
    background-position:-50px -100px;
}
.sl-controls .back-home {
    background:transparent url(sprite.png) no-repeat 0 0;
    cursor: pointer;
    display:block;
    float:right;
    height:35px;
    margin:0 0 .5em 1em;
    width:36px;
}
.sl-controls .back-home:hover {
    background-position:0 -100px;
}
.sl-controls #count {
    float: right;
    margin-top: 12px;
    padding-left: 5px;
    padding-right: 5px;
}

/* Controls */
.sl-controls {
    margin: 5px;
    overflow: hidden;
}
.sl-controls .next {
    background:transparent url(sprite.png) no-repeat -100px 0;
    cursor: pointer;
    display:block;
    float:right;
    height:35px;
    width:36px;
}
.sl-controls .next:hover {
    background-position:-100px -100px
}
.sl-controls .prev {
    background:transparent url(sprite.png) no-repeat -50px 0;
    cursor: pointer;
    display:block;
    float:right;
    height:35px;
    margin:0 0 .5em .5em;
    width:36px;
}
.sl-controls .prev:hover {
    background-position:-50px -100px;
}
.sl-controls .back-home {
    background:transparent url(sprite.png) no-repeat 0 0;
    cursor: pointer;
    display:block;
    float:right;
    height:35px;
    margin:0 0 .5em 1em;
    width:36px;
}
.sl-controls .back-home:hover {
    background-position:0 -100px;
}
.sl-controls #count {
    float: right;
    margin-top: 12px;
    padding-left: 5px;
    padding-right: 5px;
}

I hope that everything is clean with them, next styles are for slides and carousel object:

我希望一切都干净利落，下一种样式适用于幻灯片和轮播对象：

/* Slides */
.sl-slide {
    display: none;
    overflow: hidden;
    padding: 0 20px;
}
.sl-slide.visible {
    display: block;
}
.sl-slide img {
    cursor: pointer;
    float: right;
    margin:0 0 10px 10px;
}
/* jcarousel styles */
#sl-thumbs li {
    cursor: pointer;
    height: 79px;
    width: 79px;
}
#sl-thumbs li.selected {
    background-color: #FFFFFF;
    cursor: default;
}
#sl-thumbs li img {
    height: 75px;
    padding: 2px;
    width: 75px;
}
.jcarousel-container {
    margin: 10px 0;
    padding: 0 40px;
}
.jcarousel-clip {
    background-color: #497e96;
    border-left: 20px solid #497e96;
    border-right: 20px solid #497e96;
    overflow: hidden;
    padding: 10px 0;
    /* CSS3 round border and shadow */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
    -moz-box-shadow: 0 1px 2px 0 rgba(119,119,119,.5);
    box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
}
.jcarousel-prev-horizontal, .jcarousel-next-horizontal {
    border: 1px solid white;
    cursor: pointer;
    height: 49px;
    position: absolute;
    top: 25px;
    width: 18px;
    z-index: 1;
    /* CSS3 round border and shadow */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
    -moz-box-shadow: 0 1px 2px 0 rgba(119,119,119,.5);
    box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
}
.jcarousel-prev-horizontal {
    left: 30px;
    background:url(sprite.png) no-repeat -165px 3px, -moz-linear-gradient(top,white 0,#EDEDED 100%);
    background:url(sprite.png) no-repeat -165px 3px, -webkit-linear-gradient(top,white 0,#EDEDED 100%);
    background:url(sprite.png) no-repeat -165px 3px #EDEDED;
}
.jcarousel-next-horizontal {
    right: 30px;
    background: url(sprite.png) no-repeat -215px 3px,-moz-linear-gradient(top,white 0,#EDEDED 100%);
    background: url(sprite.png) no-repeat -215px 3px,-webkit-linear-gradient(top,white 0,#EDEDED 100%);
    background: url(sprite.png) no-repeat -215px 3px #EDEDED;
}
.jcarousel-prev-horizontal:hover,
.jcarousel-prev-horizontal:focus {
    background:url(sprite.png) no-repeat -165px -97px,-moz-linear-gradient(top,#EDEDED 0,white 100%);
    background:url(sprite.png) no-repeat -165px -97px,-webkit-linear-gradient(top,#EDEDED 0,white 100%);
    background:url(sprite.png) no-repeat -165px -97px #EDEDED;
}
.jcarousel-prev-horizontal:active {
    background:url(sprite.png) no-repeat -165px 3px,-moz-linear-gradient(top,white 0,#EDEDED 100%);
    background:url(sprite.png) no-repeat -165px 3px,-webkit-linear-gradient(top,white 0,#EDEDED 100%);
    background:url(sprite.png) no-repeat -165px 3px #EDEDED;
}
.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:focus,
.jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background:url(sprite.png) no-repeat -165px -197px,-moz-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
    background:url(sprite.png) no-repeat -165px -197px,-webkit-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
    background:url(sprite.png) no-repeat -165px -197px #EDEDED;
}
.jcarousel-next-horizontal:hover,
.jcarousel-next-horizontal:focus {
    background:url(sprite.png) no-repeat -215px -97px,-moz-linear-gradient(top,#EDEDED 0,white 100%);
    background:url(sprite.png) no-repeat -215px -97px,-webkit-linear-gradient(top,#EDEDED 0,white 100%);
    background:url(sprite.png) no-repeat -215px -97px #EDEDED;
}
.jcarousel-next-horizontal:active {
    background: url(sprite.png) no-repeat -215px 3px,-moz-linear-gradient(top,white 0,#EDEDED 100%);
    background: url(sprite.png) no-repeat -215px 3px,-webkit-linear-gradient(top,white 0,#EDEDED 100%);
    background: url(sprite.png) no-repeat -215px 3px #EDEDED;
}
.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover,
.jcarousel-next-disabled-horizontal:focus,
.jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background:url(sprite.png) no-repeat -215px -197px, -moz-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
    background:url(sprite.png) no-repeat -215px -197px, -webkit-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
    background:url(sprite.png) no-repeat -215px -197px #EDEDED;
}
/* ViewAll button */
.sl-view-all { cursor: pointer;text-align: right; }

/* Slides */
.sl-slide {
    display: none;
    overflow: hidden;
    padding: 0 20px;
}
.sl-slide.visible {
    display: block;
}
.sl-slide img {
    cursor: pointer;
    float: right;
    margin:0 0 10px 10px;
}
/* jcarousel styles */
#sl-thumbs li {
    cursor: pointer;
    height: 79px;
    width: 79px;
}
#sl-thumbs li.selected {
    background-color: #FFFFFF;
    cursor: default;
}
#sl-thumbs li img {
    height: 75px;
    padding: 2px;
    width: 75px;
}
.jcarousel-container {
    margin: 10px 0;
    padding: 0 40px;
}
.jcarousel-clip {
    background-color: #497e96;
    border-left: 20px solid #497e96;
    border-right: 20px solid #497e96;
    overflow: hidden;
    padding: 10px 0;
    /* CSS3 round border and shadow */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
    -moz-box-shadow: 0 1px 2px 0 rgba(119,119,119,.5);
    box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
}
.jcarousel-prev-horizontal, .jcarousel-next-horizontal {
    border: 1px solid white;
    cursor: pointer;
    height: 49px;
    position: absolute;
    top: 25px;
    width: 18px;
    z-index: 1;
    /* CSS3 round border and shadow */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
    -moz-box-shadow: 0 1px 2px 0 rgba(119,119,119,.5);
    box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
}
.jcarousel-prev-horizontal {
    left: 30px;
    background:url(sprite.png) no-repeat -165px 3px, -moz-linear-gradient(top,white 0,#EDEDED 100%);
    background:url(sprite.png) no-repeat -165px 3px, -webkit-linear-gradient(top,white 0,#EDEDED 100%);
    background:url(sprite.png) no-repeat -165px 3px #EDEDED;
}
.jcarousel-next-horizontal {
    right: 30px;
    background: url(sprite.png) no-repeat -215px 3px,-moz-linear-gradient(top,white 0,#EDEDED 100%);
    background: url(sprite.png) no-repeat -215px 3px,-webkit-linear-gradient(top,white 0,#EDEDED 100%);
    background: url(sprite.png) no-repeat -215px 3px #EDEDED;
}
.jcarousel-prev-horizontal:hover,
.jcarousel-prev-horizontal:focus {
    background:url(sprite.png) no-repeat -165px -97px,-moz-linear-gradient(top,#EDEDED 0,white 100%);
    background:url(sprite.png) no-repeat -165px -97px,-webkit-linear-gradient(top,#EDEDED 0,white 100%);
    background:url(sprite.png) no-repeat -165px -97px #EDEDED;
}
.jcarousel-prev-horizontal:active {
    background:url(sprite.png) no-repeat -165px 3px,-moz-linear-gradient(top,white 0,#EDEDED 100%);
    background:url(sprite.png) no-repeat -165px 3px,-webkit-linear-gradient(top,white 0,#EDEDED 100%);
    background:url(sprite.png) no-repeat -165px 3px #EDEDED;
}
.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:focus,
.jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background:url(sprite.png) no-repeat -165px -197px,-moz-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
    background:url(sprite.png) no-repeat -165px -197px,-webkit-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
    background:url(sprite.png) no-repeat -165px -197px #EDEDED;
}
.jcarousel-next-horizontal:hover,
.jcarousel-next-horizontal:focus {
    background:url(sprite.png) no-repeat -215px -97px,-moz-linear-gradient(top,#EDEDED 0,white 100%);
    background:url(sprite.png) no-repeat -215px -97px,-webkit-linear-gradient(top,#EDEDED 0,white 100%);
    background:url(sprite.png) no-repeat -215px -97px #EDEDED;
}
.jcarousel-next-horizontal:active {
    background: url(sprite.png) no-repeat -215px 3px,-moz-linear-gradient(top,white 0,#EDEDED 100%);
    background: url(sprite.png) no-repeat -215px 3px,-webkit-linear-gradient(top,white 0,#EDEDED 100%);
    background: url(sprite.png) no-repeat -215px 3px #EDEDED;
}
.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover,
.jcarousel-next-disabled-horizontal:focus,
.jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background:url(sprite.png) no-repeat -215px -197px, -moz-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
    background:url(sprite.png) no-repeat -215px -197px, -webkit-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
    background:url(sprite.png) no-repeat -215px -197px #EDEDED;
}
/* ViewAll button */
.sl-view-all { cursor: pointer;text-align: right; }

步骤3. JS (Step 3. JS)

Finally, our javascript:

最后，我们的javascript：

js / main.js (js/main.js)

// Set active slide function
function setActiveSlide(i) {
    // Update current position counter
    $('#count').html( (i + 1) + '/' + $('.sl-slide').length );
    // Remove 'selected' class attribute from all jcarousel-items
    $('ul li').removeClass('selected');
    // Set 'selected' class attribute to a selected jcarousel-item
    var li = $('ul li').eq(i);
    li.addClass('selected');
    // Hide all slides (remove 'visible' class attribute)
    $('.sl-slide').removeClass('visible');
    // Show selected slide (set 'visible' class attribute)
    $('.sl-slide').eq(i).addClass('visible');
    // Update browser's URL with a title of selected slide (optional):
    window.location.hash = $('.visible .sl-title').text().replace(/ /g, '-');
}
// dummy text generator
function randomString(len) {
    charSet = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z';
    var randomString = '';
    for (var i = 0; i < len; i++) {
        var randomPoz = Math.floor(Math.random() * charSet.length);
        randomString += charSet.substring(randomPoz,randomPoz+1);
    }
    return randomString;
}
// Once DOM (document) is finished loading
$(document).ready(function(){
    // View all mode
    var bViewAllMode = false;
    $('.sl-slide p').each(function () {
        $(this).append( '<br />' + randomString(500) );
    });
    // Initialize jCarousel
    $('#sl-thumbs').jcarousel();
    // set first active slide
    setActiveSlide(0);
    // jcarousel-item onclick handler
    $('#sl-thumbs li').click(function() {
        setActiveSlide($(this).index());
    });
    // Slide's image onclick handler
    $('.sl-slide img').click(function(){
        if (! bViewAllMode) {
            // Find current index and next position
            var iCur = $('ul li.selected').index();
            var iMax = $('ul li').length - 1;
            var iNext = (iCur + 1 >  iMax) ? 0 : (iCur + 1);
            // Update position and set to next slide
            setActiveSlide(iNext);
        }
        return false;
    });
    // Next button onclick handler
    $('.next').click(function(){
        // Find current index and next position
        var iCur = $('ul li.selected').index();
        var iMax = $('ul li').length - 1;
        var iNext = (iCur + 1) >  iMax ? 0 : (iCur + 1);
        // Update position and set to next slide
        setActiveSlide(iNext);
        return false;
    });
    // Prev button onclick handler
    $('.prev').click(function(){
        // Find current index and previous position
        var iCur = $('ul li.selected').index();
        var iMax = $('ul li').length - 1;
        var iPrev = (iCur - 1 >  iMax) ? 0 : (iCur - 1);
        iPrev = (iPrev == -1) ? iMax : iPrev;
        // Update position and set to previous slide
        setActiveSlide(iPrev);
        // Update browser's URL with a title of selected slide (optional):
        window.location.hash = $('.visible .sl-title').text().replace(/ /g, '-');
        return false;
    });
    // 'ViewAll' button onclick handler
    $('.sl-view-all').click(function() {
        // Set ViewAllMode to 'true' value
        bViewAllMode = true;
        // Hide controls, ViewAll button and jcarousel container
        $('.sl-controls, .sl-view-all, .jcarousel-container').hide();
        // Show Intro and all slides
        $('.sl-intro').show();
        $('.sl-slide').addClass('visible');
    });
    // 'Start' button onclick handler
    $('.sl-start').click(function () {
        // Set ViewAllMode to 'false' value
        bViewAllMode = false;
        // Hide Intro
        $('.sl-intro').hide();
        // Show controls, main slider section, ViewAll button and jcarousel container
        $('.sl-controls, .sl-main, .sl-view-all, .jcarousel-container').show();
        // set first active slide
        setActiveSlide(0);
        return false;
    });
    // 'BackHome' button onclick handler
    $('.back-home').click(function () {
        // Hide main slider section
        $('.sl-main').hide();
        // Show Intro
        $('.sl-intro').show();
        return false;
    });
});

// Set active slide function
function setActiveSlide(i) {
    // Update current position counter
    $('#count').html( (i + 1) + '/' + $('.sl-slide').length );
    // Remove 'selected' class attribute from all jcarousel-items
    $('ul li').removeClass('selected');
    // Set 'selected' class attribute to a selected jcarousel-item
    var li = $('ul li').eq(i);
    li.addClass('selected');
    // Hide all slides (remove 'visible' class attribute)
    $('.sl-slide').removeClass('visible');
    // Show selected slide (set 'visible' class attribute)
    $('.sl-slide').eq(i).addClass('visible');
    // Update browser's URL with a title of selected slide (optional):
    window.location.hash = $('.visible .sl-title').text().replace(/ /g, '-');
}
// dummy text generator
function randomString(len) {
    charSet = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z';
    var randomString = '';
    for (var i = 0; i < len; i++) {
        var randomPoz = Math.floor(Math.random() * charSet.length);
        randomString += charSet.substring(randomPoz,randomPoz+1);
    }
    return randomString;
}
// Once DOM (document) is finished loading
$(document).ready(function(){
    // View all mode
    var bViewAllMode = false;
    $('.sl-slide p').each(function () {
        $(this).append( '<br />' + randomString(500) );
    });
    // Initialize jCarousel
    $('#sl-thumbs').jcarousel();
    // set first active slide
    setActiveSlide(0);
    // jcarousel-item onclick handler
    $('#sl-thumbs li').click(function() {
        setActiveSlide($(this).index());
    });
    // Slide's image onclick handler
    $('.sl-slide img').click(function(){
        if (! bViewAllMode) {
            // Find current index and next position
            var iCur = $('ul li.selected').index();
            var iMax = $('ul li').length - 1;
            var iNext = (iCur + 1 >  iMax) ? 0 : (iCur + 1);
            // Update position and set to next slide
            setActiveSlide(iNext);
        }
        return false;
    });
    // Next button onclick handler
    $('.next').click(function(){
        // Find current index and next position
        var iCur = $('ul li.selected').index();
        var iMax = $('ul li').length - 1;
        var iNext = (iCur + 1) >  iMax ? 0 : (iCur + 1);
        // Update position and set to next slide
        setActiveSlide(iNext);
        return false;
    });
    // Prev button onclick handler
    $('.prev').click(function(){
        // Find current index and previous position
        var iCur = $('ul li.selected').index();
        var iMax = $('ul li').length - 1;
        var iPrev = (iCur - 1 >  iMax) ? 0 : (iCur - 1);
        iPrev = (iPrev == -1) ? iMax : iPrev;
        // Update position and set to previous slide
        setActiveSlide(iPrev);
        // Update browser's URL with a title of selected slide (optional):
        window.location.hash = $('.visible .sl-title').text().replace(/ /g, '-');
        return false;
    });
    // 'ViewAll' button onclick handler
    $('.sl-view-all').click(function() {
        // Set ViewAllMode to 'true' value
        bViewAllMode = true;
        // Hide controls, ViewAll button and jcarousel container
        $('.sl-controls, .sl-view-all, .jcarousel-container').hide();
        // Show Intro and all slides
        $('.sl-intro').show();
        $('.sl-slide').addClass('visible');
    });
    // 'Start' button onclick handler
    $('.sl-start').click(function () {
        // Set ViewAllMode to 'false' value
        bViewAllMode = false;
        // Hide Intro
        $('.sl-intro').hide();
        // Show controls, main slider section, ViewAll button and jcarousel container
        $('.sl-controls, .sl-main, .sl-view-all, .jcarousel-container').show();
        // set first active slide
        setActiveSlide(0);
        return false;
    });
    // 'BackHome' button onclick handler
    $('.back-home').click(function () {
        // Hide main slider section
        $('.sl-main').hide();
        // Show Intro
        $('.sl-intro').show();
        return false;
    });
});

In the beginning I defined ‘setActiveSlide’ function to set active slide. Then, in order to fill our slides with dummy text I created ‘randomString’ function. We can see that random (dummy) text on our slides. After, when DOM is ready – we initialize jcarousel object, and add all the necessary event handlers (all of them – onclick events).

首先，我定义了“ setActiveSlide”功能来设置活动幻灯片。 然后，为了用虚假文字填充幻灯片，我创建了“ randomString”函数。 我们可以在幻灯片上看到随机的(虚拟)文本。 之后，当DOM准备就绪时，我们将初始化jcarousel对象，并添加所有必需的事件处理程序(所有这些处理程序均是onclick事件)。

现场演示

结论 (Conclusion)

That is all for today. We have just developed really good slider for custom content (which can be images, text, media objects etc). I’m sure that this material will be very useful for you. Good luck and welcome back

今天就这些。 我们刚刚为自定义内容(可以是图像，文本，媒体对象等)开发了非常好的滑块。 我相信这份资料对您将非常有用。 祝你好运，欢迎回来

翻译自: https://www.script-tutorials.com/content-slider-with-jcarousel/

jcarousel