jQuery basic carousel with text links

Question

I want to create simple carousel with links as shown in the picture:

It will move left to right and vice versa.

The problem is I am not getting exact solution using only jQuery for this, I have tries many things but is didn't help.

So please provide some example for the same.

    <div class="dashboard-crousel" id="spanCarousel">
         <span>My Order</span>
         <span class="selected">Recommendations</span>
         <span>My Profile</span>
         <div id="controls">
            <a href="javascript:void(0);" class="dashboard-crouselLeftArrow"></a>
            <a href="javascript:void(0);" class="dashboard-crouselRightArrow"></a>
         </div>
     </div>

<script>
var slider = {
    length: parseInt($("#spanCarousel").children("span").length),
    current: 1,
    width: $("#spanCarousel").width(),
    next: function(){
        if(this.current < this.length){
            this.current = this.current + 1;
            this.animation();
        } else {
            this.current = 1;
            this.animation();
        }
    },
    animation: function(){ 
        var target = (0 - this.width) * (this.current - 1);
        this.run("#spanCarousel", target);

    },
    prev: function(){

        if(this.current > 1){
            this.current = this.current - 1;
            this.animation();
        } else {
            this.current = this.length;
            this.animation();
        }
    },
    run: function(part, target){
        $(part + " .pan").stop().animate(
            {"margin-left": target},
            1000
        );
    },
    initialize: function(){
        $("#controls .dashboard-crouselLeftArrow").click(function(){slider.next();});
        $("#controls .dashboard-crouselRightArrow").click(function(){slider.prev();});
    }
}

slider.initialize();  
</script>

Answer 1

refer http://bxslider.com/

insert the script links

Step 1: Link required files

First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Step 2: Create HTML markup Create a element, with a

for each slide. Slides can contain images, video, or any other HTML content!

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Step 3: Call the bxSlider

Call .bxslider() on . Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Using Simple Css and Jquery we can achieve this:

Html:

<div class="wrapper">
    <div id="slider">
        <span class="text-1">Text 1</span>
        <span class="text-2">Text 2</span>
        <span class="text-3">Text 3</span>
        <span class="text-4">Text 4</span>
    </div>
</div>
<div id="nav">
    <a href="#left" class="left">previous</a>
    <a href="#right" class="right">next</a>
</div>

Css:

#wrapper {
    position:relative;
}
#slider {
    height:200px;
}
#slider span {
    width:200px;
    height:200px;
    top:0;
    display:none;
    border:1px solid #000;
    position:absolute;
}
#nav {
    background:beige;
    width:200;
    text-align:center;
}

JQuery

$(function () {
    var count = $("#slider > span").length;
    var slider = 1
    var speed=5000
    var fadeSpeed = 300
    var loop 
    start()
    $("#slider span:first").fadeIn(fadeSpeed);
    $('.right').click(right)
    $('.left').click(left)
    $('#slider').hover(stop,start)

    function start(){
        loop = setInterval(next, speed)
    }
    function stop(){
        clearInterval(loop)
    }
    function right() {
        stop()
        next()
        start()
        return false
    }

    function left() {
        stop()
        prev()
        start()
        return false
    }

    function prev() {
        slider--
        if (slider < 1) {
            slider = count
        }

        $("#slider > span").fadeOut(fadeSpeed)
        $(".text-" + slider).fadeIn(fadeSpeed)
    }

    function next() {
        slider++
        if (slider > count) {
            slider = 1
        }

        $("#slider > span").fadeOut(fadeSpeed)
        $(".text-" + slider).fadeIn(fadeSpeed)
    }
});

refer : http://jsfiddle.net/jakecigar/7WL6P/5/ i have edit as per your requirement

Upvotes: 2