CODEWITHSUNDEEP
jquery
William Wong
William Wong

Reputation: 31

Difficulty with jQuery Image Slider

I'm having trouble creating a jQuery image slider that can also contain other elements (ie: <div>, <a>, <span>) I've skimmed the internet for tutorials and downloaded several projects only to find that they are not easily editable. I've concluded that the best way will be to make one from scratch. Does anyone know of a good documentation source that can help walk me through the basics of creating basic jQuery image slider that is able to show all of the elements in my html?

Below is the html/js: Html:

<div id="container">
<div id="pbody">
    <div id="slides">
        <div title="Slider 1" style="background-image: url(images/TCM_slider1_WW_v1.jpg); display:block;" class="current billboard">
            <p class="big">Slider 1</p>
            <a href="#" class="black_button">
                <span>Learn more</span>
            </a>
        </div>
        <div title="Slider 2" style="background-image: url(images/TCM_slider2_WW_v1.jpg); display:block;" class="billboard">
            <p class="big">Slider 2</p>
            <a href="#" class="black_button">
                <span>Learn more</span>
            </a>
        </div>
    </div>
    <ol id="controls">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <a href="javascript:;" id="prev">Prev</a>
    <a href="javascript:;" id="next">Next</a>
</div>

Javascript:

var cycle = window.setInterval(next, 4000);
function prev() {
$('#slides .billboard .current')
    .removeClass('billboard current')
    .prev().add('#slides :last')
    .first().addClass('billboard current')
;
$('#controls .current')
    .removeClass('current')
    .prev().add('#controls :last')
    .first().addClass('current')
;
}

function next() {
$('#slides .billboard .current')
    .removeClass('billboard current')
    .next().add('#slides :first')
    .last().addClass('billboard current')
;
$('#controls .current')
    .removeClass('current')
    .next().add('#controls :first')
    .last().addClass('current')
;
}

$('#prev').on('click', prev);
$('#next').on('click', next);
$('#controls li').on('click', function() {
$self = $(this)
    .addClass('current')
    .siblings('.current').removeClass('current')
    .end()
;
$('#slides  .billboard .current')
    .removeClass('billboard current')
    .siblings(':nth-child(' + ($self.index() + 1) + ')').addClass('billboard current');
});

Upvotes: 2

Views: 593

Answers (1)

Ansel Santosa
Ansel Santosa

Reputation: 8454

I've created a barebones proof-of-concept HTML slideshow that should help get you started.

See the jsFiddle.

  • The slideshow contains prev/next buttons and page number navigation.
  • It can have any number of slides and will loop infinitely.
  • The slides can contain anything including HTMLElements.
  • There are no transitions but they can be added with jQuery or CSS3

Upvotes: 1

Related Questions