jQuery content slider with bullets

Question

I'm trying to build a basic jQuery automatic content slider with bullets that you can click on to go to a corresponding slide. I've got as far as building the slider but am not sure how to go about implementing the bullets.

HTML

<section>
        <div id="slideShow">

            <div class="slide">
                <div class="specialTitle">
                    <h6 class="red">DRIVE TOWN</h6>
                    <h6 class="green">E&ndash;&#36;DEAL SPECIAL ONLY</h6>
                </div>
                <div class="homeSpecial">
                    <h3>DRIVETOWN OFFER COMPREHENSIVE IN HOUSE FINANCE SERVICES</h3>
                    <a href="#" class="red">View full details</a>
                </div>
            </div>

            <div class="slide">
                <div class="specialTitle">
                    <h6 class="red">DRIVE TOWN</h6>
                    <h6 class="green">IN HOUSE FINANCE</h6>
                </div>
                <div class="homeSpecial">
                    <h3>YOUR FIRST WOF FREE WITH ANY VEHICLE PURCHASED AT DRIVE TOWN IN SEPTEMBER</h3>
                    <a href="#" class="red">View full details</a>
                </div>
            </div>

            <div class="slide">
                <div class="specialTitle">
                    <h6 class="red">DRIVE TOWN</h6>
                    <h6 class="green">FREE LOAN CAR</h6>
                </div>
                <div class="homeSpecial">
                    <h3>STAY ON THE ROAD WITH DRIVETOWNS FREE LOAN CAR</h3>
                    <a href="#" class="red">View full details</a>
                </div>
            </div>

        </div>
    </section>

CSS

#slideShow{
height:180px;
width:630px;
position:relative;
margin:200px 0 0;
background-color:red;
}

#slideShow .slide{
position:absolute;
display:none;
background-color:pink;
}

#slideShow .active{
display:block;
}

#slideShow .specialTitle{
float:left;
width:195px;
height:40px;
margin:0;
padding:10px 0 0 25px;
background-color:rgba(0,0,0,0.8);
}

JQUERY

jQuery(document).ready(function () {
$("#slideShow .slide:first").addClass("active");
setInterval("slideShow()", 6000);
});
function slideShow() {
var $active = $("#slideShow .active");
var $next = ($("#slideShow .active").next().length > 0) ? $("#slideShow .active").next() : $("#slideShow div:first");
$next.fadeIn(1500,function(){
$next.addClass("active");
$active.fadeOut(1500).removeClass("active");
});
}

score 1 · Answer 1 · answered Sep 08 '12 at 05:56

1

Please insert this one to your css code.

.orbit-bullets {
 left: 200px;
 top: -16px;
 }

//Jquery

  jQuery('#featured').orbit({
 advanceSpeed: 6000,
  bullets: true,
 directionalNav: false
});

Try this

answered Sep 08 '12 at 05:56

Duk

905
5
15
34

Hey thanks for the comment Udhaya but I think this will only work if I use the orbit plugin but I'm trying to build my own. – JVK Sep 08 '12 at 10:48

jQuery content slider with bullets

1 Answers1