How to make a div slider?

I am trying to make a slider which scrolls over 3 div elements on to 3 new scroll elements. I am looking for a manual slider with an arrow pointing right on the right side and left on the left side. The slider should slide right when right arrow clicked and display the 3 remaining div elements. If the left arrow is clicked first, nothing should happen. if it is clicked after the right arrow has been clicked it should slide back to the three previous div elements. If the right arrow is clicked twice in a row the second click should slide back to the initial 3 div elements. Basically, I want to end up with something like the slider on the unity website. Link: http://unity3d.com/unity

Here is my HTML code so far. It displays the boxes on 3 columns and 2 rows:

<div class="categories">
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
    <div class="category">
        <div class="rect">
            <img src="stuff.gif">
        </div>
        <h3>Stuff</h3>
        <p>Stuff.</p>
    </div>
</div>

Here are the CSS styles for the boxes:

/**********************
*******CATEGORIES******
**********************/
.categories {
    width: 90%;
    margin: 3% 9%;
    clear: left;
}

.category {
    padding: 7% 5% 3% 5%;
    width: 20%;
    border: 1px solid #E0E0E0;
    float: left;
    cursor: pointer;
    text-align: center;
}

.category:hover {
    border: 1px solid #4F8E64;
}

.category h3 {
    color: #3F7250;
    margin: 6% 0;
}

.category p {
    text-align: center;
}

Make sure that the padding and margin and width stays in percentages. Feel free to modify the code and share it with me on fiddle or something.

---

You can use Caroufredsel jquery plugin for it. Here is the installation page:

http://dev7studios.com/caroufredsel-old/installation.php

And here is an example next to yours:

http://coolcarousels.frebsite.nl/c/58/

When you scroll down in the example and click [..] in the orange bar - you will see the code for the example.

This is the code for your carousel:

$('#carousel').carouFredSel({
        width: '90%',
        items: 3,
        scroll: 3,
        auto: false,
        prev: '#prev',
        next: '#next',
        infinite: false
    });

You can use also circular: false if you want the slides not to be circular.

---

Ok, so following comments if you consider bootstrap, include bootstrap js and css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

HTML

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <section>
            Some Info
        </section>
        <section>
            Some Info 2
        </section>
        <section>
            Some Info 3
        </section>
    </div>
    <div class="item">
        <section>
            Some Info
        </section>
        <section>
            Some Info 2
        </section>
        <section>
            Some Info 3
        </section>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS

section{
    display:inline-block;
    border:1px solid black;
}
.item{
    text-align:center
}

You can manipulate the sections and content as you please.

---

you can do it using jQuery need to sit for sometime and make custome slider and it will works according to you logic. Hope this will help you.

链接地址: http://www.djcxy.com/p/64458.html

上一篇: 最安全的方式来创建会话在PHP中

下一篇: 如何制作div滑块？