0

I'm new in jquery and i'm trying to make a slider with jquery here is my script for now:

      $(function()
  {
    var bgCounter = 0,
    text = [
    'some html code here',
    'some html code here',
    'some html code here',
    ],
    link = [
    'LINK',
    'LINK',
    'LINK'
    ],
    backgrounds = [
    "img.jpg",
    "img.jpg",
    "img.jpg"
    ];
    function changeBackground()
    {
      bgCounter = (bgCounter+1) % backgrounds.length;
      $('#Main-screen').css('background', 'url('+backgrounds[bgCounter]+')');
      $('#Main-screen').css('background-size','cover');
      $('#example').html(text[bgCounter]);
      $('a.link').attr("href", "#"+link[bgCounter]);
      setTimeout(changeBackground,4000);
    }
    changeBackground();
  })();

And this is the html/css part :

  #Main-screen {
      position: relative;
      width:100%;
      height: 100%;

<div id="Main-screen" style="display:inline-block;">
<a class="link" href="#"><span id="example"></span></a>

I don't know if with this script i can add an effect (like fade) when my image is switching and add a next/prev link on this. So if anyone have an idea to do this. I realy don't know if ths is possible with my script. So if this isn't possible can anyone show me with an exemple it would be realy great.

Sorry my english is not very good.

lll
  • 305
  • 1
  • 3
  • 8

2 Answers2

1

try to add the effect to the background-img cahnge like that:

  $('#Main-screen').fadeIn().css('background', 'url('+backgrounds[bgCounter]+')');
benjah
  • 613
  • 7
  • 29
  • Thank you for your help but this is not working. I try with slow effect and/or any duration but this do nothing. – lll Sep 29 '14 at 10:49
0

You can easy bind in this jQuery slider:
http://rocha.la/jQuery-slimScroll

for auto scrolling:
set the scrollbar hidden and change the position of the slimScrollBar with javascript

if you want to add any animation to the pictures, i recommend this:
http://www.minimamente.com/example/magic_animations/

Lilly
  • 101
  • 1
  • 1
  • 6
  • I understand how to add an effect i just don't know how to add this effect on my code i have try some idea like : $('#Main-screen').fadeIn("slow", function() { $('#Mainscreen').css('background','url('+backgrounds[bgCounter]+')'); $('#Main-screen').css('background-size','cover'); }); But this is not working i don't know if i can use fadeIn() on event like change my background (on my div).I'm reading this slimScroll. – lll Sep 29 '14 at 11:06
  • if you want to start the fadeIn-Method on background changed, look at this:
    http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded     – Lilly Sep 29 '14 at 12:44
  • Hey, No i just wanna change my background (on div) with an effect on it (like a fede from img1 to img2 then fade from 2 to 3 etc..) and add a previous/next button with a stop but i don't know how to do that i search a lot but there is only full script jquery on what i have found. – lll Sep 30 '14 at 09:42
  • $('#Main-screen').fadeIn("slow",function(){ /*background changing */}); $('#Main-screen').stop(); – Lilly Oct 01 '14 at 06:56