CODEWITHSUNDEEP
javascriptjquerycss
Tuck
Tuck

Reputation: 89

simple jquery slideshow with navigation?

So I'm in the process of creating a pretty simple jQuery/CSS slideshow for a course of mine. It's about ten pages long, and right now it works fine if you want to just go from beginning to end in that order, but if you need to refresh the page for any reason, it sends you back to the first page. Since it's on the longer end, I'd like to be able to "click" to a certain page... is this possible without getting too complicated?

Here's my jQuery

function checkNav() {
    if ($('.active-slide').hasClass('first')) {
        $('.prev').hide();
        $('.next').show();
    } else if ($('.active-slide').hasClass('last')) {
        $('.next').hide();
        $('.prev').show();
    } else {
        $('.next').show();
        $('.prev').show();
    }
}
var main = function() {
    checkNav();

    $('.next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next('.slide');

        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

        //if nextslide is last slide, go back to the first
        if (nextSlide.length === 0) {
            nextSlide = $('.slide').first();
            nextDot = $('.dot').first();

        }

        currentSlide.fadeOut(500).removeClass('active-slide');
        nextSlide.fadeIn(1100).addClass('active-slide');

        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');

        checkNav();
    });

    //prev slide function
    $('.prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev('.slide');
        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();

        //if prevslide is last slide, go back to the first
        if (prevSlide.length === 0) {
            prevSlide = $('.slide').last();
            prevDot = $('.dot').last();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');

        checkNav();
    });
};

$(document).ready(main);

And here's a rough markup of what the HTML looks like

<div class="slide active-slide first">
    <div class="content">
        <p>First Slide</p>
    </div>
</div>
<div class="slide">
    <div class="content">
        <p>second slide</p>
    </div>
</div>
<div class="slide last">
    <div class="content">
        <p>third slide</p>
    </div>
</div>
<div class="slider-nav">
    <div class="prev">prev</div>
    <ul class="dots">
            <li class="dot active-dot">&bull;</li>
            <li class="dot">&bull;</li>
            <li class="dot">&bull;</li>
    </ul>
    <div class="next">next</div>
</div>

Here's the jsFiddle ... I'd like to be able to click on one of the bullets and go to that corresponding slide....

Upvotes: 1

Views: 630

Answers (4)

Tejaseethal
Tejaseethal

Reputation: 11

    <!doctype html>
<html>
<head>



    <style>
        body{
            text-align: center;
        }

        #slideshow{
            margin:0 auto;
            width:600px;
            height:450px;
            overflow: hidden;
            position: relative;
        }

        #slideshow ul{
            list-style: none;
            margin:0;
            padding:0;
            position: absolute;
        }

        #slideshow li{
            float:left;
        }

        #slideshow a:hover{
            background: rgba(0,0,0,0.8);
            border-color: #000;
        }

        #slideshow a:active{
            background: #990;
        }

        .slideshow-prev, .slideshow-next{
            position: absolute;
            top:180px;
            font-size: 30px;
            text-decoration: none;
            color:#fff;
            background: rgba(0,0,0,0.5);
            padding: 5px;
            z-index:2;
        }

        .slideshow-prev{
            left:0px;
            border-left: 3px solid #fff;
        }

        .slideshow-next{
            right:0px;
            border-right: 3px solid #fff;
        }

    </style>

</head>
<body>


    <div id="slideshow">
       <a href="#" class="slideshow-prev">&laquo;</a> 
       <ul>
            <li><img src="1.jpg" alt="photo1" /></li>
            <li><img src="2.jpg" alt="photo2" /></li>
            <li><img src="3.jpg" alt="photo3" /></li>
            <li><img src="4.jpg" alt="photo4" /></li>
       </ul>
        <a href="#" class="slideshow-next">&raquo;</a> 

    </div>

    <!-- 
        We use Google's CDN to serve the jQuery js libs. 
        To speed up the page load we put these scripts at the bottom of the page 
    -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //an image width in pixels 
        var imageWidth = 600;


        //DOM and all content is loaded 
        $(window).ready(function() {

            var currentImage = 0;

            //set image count 
            var allImages = $('#slideshow li img').length;

            //setup slideshow frame width
            $('#slideshow ul').width(allImages*imageWidth);

            //attach click event to slideshow buttons
            $('.slideshow-next').click(function(){

                //increase image counter
                currentImage++;
                //if we are at the end let set it to 0
                if(currentImage>=allImages) currentImage = 0;
                //calcualte and set position
                setFramePosition(currentImage);

            });

            $('.slideshow-prev').click(function(){

                //decrease image counter
                currentImage--;
                //if we are at the end let set it to 0
                if(currentImage<0) currentImage = allImages-1;
                //calcualte and set position
                setFramePosition(currentImage);

            });

        });

        //calculate the slideshow frame position and animate it to the new position
        function setFramePosition(pos){

            //calculate position
            var px = imageWidth*pos*-1;
            //set ul left position
            $('#slideshow ul').animate({
                left: px
            }, 300);
        }

    </script>

</body>
</html>

Upvotes: 0

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

We need a way to "index" these items, I will do it by child so add a parent div class called slider:

<div id="slider">
    ...slides here...
</div>

You need to use localStorage (used to save data between pages) to keep track of both what slide you are on and what dot you are on in the nav bar. This can save data even when we leave the page (when it refreshes), making it so we still know our last page we where on. I will use this to keep track of the current index of each slide. So when the page loads we need to check that if our localStorage item exist:

// If we have saved data add it's index to active-slide
if(localStorage.getItem("activeSlide")) {
  $("#slider div.slide")
    .eq(localStorage.getItem("activeSlide"))
    .addClass("active-slide");
  $('.dots li.dot')   
    .eq(localStorage.getItem("activeSlide"))
    .addClass("active-dot");
} else { // Otherwise make them both 0
  $("#slider div.slide")
    .eq('0')
    .addClass("active-slide");
  $('.dots li.dot')   
    .eq('0')
    .addClass("active-dot");    
}

Then when we move to the next slide next or the last slide prev we update the localStorage item to the current index of the item in active-slide:

// Make the current index of the item in active slide our updated variable
localStorage.setItem( "activeSlide", 
    $("#slider div.slide").index($(".active-slide")) );

Here is a working example

This way when the page refreshes we stay on the last slide we where looking at before.

Upvotes: 0

Isaac Ray
Isaac Ray

Reputation: 1361

Add IDs to the divs. For instance:

<div class="slide active-slide first" id="1">
    <div class="content">
        <p>First Slide</p>
    </div>
</div>
<div class="slide" id="2">
    <div class="content" >
        <p>second slide</p>
    </div>
</div>
<div class="slide last" id="3">
    <div class="content">
        <p>third slide</p>
    </div>
</div>

Then you can target specific slides using something like:

    <ul class="dots">
                <li class="dot active-dot"><a onclick="goto(1)">&bull;</a></li>
                <li class="dot"><a onclick="goto(2)">&bull;</a></li>
                <li class="dot"><a onclick="goto(3)">&bull;</a></li>
        </ul>

<script>
function goto(slide){
$(".slide").removeClass("active-slide");
$("#"+slide).addClass("active-slide");
$("#"+slide).show();
}

Upvotes: 0

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

$('ul.dots li').click(function(){
    var num = $(this).index();
    var currentSlide = $('.active-slide');
    var nextSlide = $('.slide:eq('+num+')');
    var currentDot = $('.active-dot');
    var nextDot = $(this);

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');

    checkNav();

});

Upvotes: 2

Related Questions