Jquery slider: horizontal image slider

Question

This is my first post in stackoverflow and I am beginning in JQuery programming too. I was trying to make my own Jquery image slider and I want the image to slider from right to left but the image kept slider from the top left corner I couldn't nkow why?

Here is the fiddle http://jsfiddle.net/rAqcP/193/

my css is:

.slider {
width:100%;
height:400px;
overflow:hidden;
background-image:url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat:no-repeat;
background-position:center;}
    .slider img {
    width:100%;
    height:400px;
    display:none;
}

My JS is:

$(document).ready(function() {

$('.slider #1').show({right:'0'}, 500);
$('.slider #1').delay(5500).hide('slide', 'linear', 500);

var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;

setInterval(function () {
    $('.slider #' + counterIndex).show({right:'0'}, 500);
    $('.slider #' + counterIndex).delay(5500).hide('slide', 'linear', 500);

    if (counterIndex == sliderTotalImg) {
        //reset counter
        counterIndex = 1;
    }
    else {
        counterIndex = counterIndex + 1;
    }
},6500);});

and lastly my markup

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class = "slider">
 <img id="1" src="http://test.softvex.com/Slider/Img/photography/001.jpg"/>
 <img id="2" src="http://test.softvex.com/Slider/Img/photography/003.jpg"/>
</div>

Thanks for helping

For some reason, my geetings did not show up, sorry. Then... Hello everybody :) — ben ben, Jan 16 '15 at 12:33
Try to use the answer in this question: [link](http://stackoverflow.com/questions/521291/jquery-slide-left-and-show) — Taacoo, Jan 16 '15 at 12:37

score 0 · Accepted Answer · answered Jan 16 '15 at 13:03

0

if i understand you right then just make show slide just like the hide

$(document).ready(function() {

//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide', 'linear', 500);
$('.slider #1').delay(5500).hide('slide', 'linear', 500);

var sliderTotalImg = $('.slider img').size();
var counterIndex = 2;

setInterval(function () {
    //$('.slider #' + counterIndex).show({right:'0'}, 500);
    $('.slider #' + counterIndex).show('slide', 'linear', 500);
    $('.slider #' + counterIndex).delay(5500).hide('slide', 'linear', 500);

    if (counterIndex == sliderTotalImg) {
        //reset counter
        counterIndex = 1;
    }
    else {
        counterIndex = counterIndex + 1;
    }
},6500);});

try here http://jsfiddle.net/rAqcP/198/

if this is not what you leave comment and say you exactly what you want

answered Jan 16 '15 at 13:03

Robert

2,342
2
24
41

Robert gave me the solution. I think the problem was also related to the version of jquery ui that I was using, may be it doesn't support one of the function that I used or I didn't use correctly the parameters. – ben ben Jan 16 '15 at 21:45
Now, I will work on removing the blank between the images. I want the images to be displayed one after another without any blank or space between them. It will be my next challenge. And after, i will use buttons on top of the images to scroll from left to right and right to left. – ben ben Jan 16 '15 at 21:48
what is the problem now ? – Robert Jan 17 '15 at 15:56
all i did is replace this line `$('.slider #1').show({right:'0'}, 500);` to `$('.slider #1').show('slide', 'linear', 500);` – Robert Jan 17 '15 at 15:57
and i didn't understand why you didn't use `'slider'` with `show` as you did with `hide` – Robert Jan 17 '15 at 15:58

Jquery slider: horizontal image slider

1 Answers1