Venturos Rotating Slider

Today i got an e-mails asking about how to make the slider of Venturos theme start sliding automatically.

Venturos - A Business Theme by ColorLabs

Venturos – A Business Theme by ColorLabs

By default, the slider on this theme won’t slide automatically. You have to click on the navigation arrows to make it work. And for your information, the slider they are using is Carousedfel.

For me, Carousedfel is very flexible, there are a tons of forums talking about it, options are so many. You won’t be sorry to use this great slider. You can check the available options of Carousedfel at this site.

Ok, back to the main point. To make the slider rotating automatically you can edit a file named zero.js. You can open this file FTP at directory: wp-content > themes > venturos > includes > js

Open that file and find out this code:

/* Header Slider
  ----------------------------------------------------------------- */
  $('.top-slider .slides').imagesLoaded(function(){
    $(this).carouFredSel({
      prev: '#prev2',
      next: '#next2',
      auto: false,
      responsive: true,
      pagination: "#pager",
      synchronise:'.text-slider',
      items: {
        visible: 1
      }
    });
  });

  if( $('.top-slider .text-slider li').length > 1 ) {
    $('.top-slider .text-slider').carouFredSel({
      auto: false,
      responsive: true,
      items: {
        visible: 1
      }
    });
  }

Edit that code become:

/* Header Slider
  ----------------------------------------------------------------- */
  $('.top-slider .slides').imagesLoaded(function(){
    $(this).carouFredSel({
      prev: '#prev2',
      next: '#next2',
      auto: true,
	  scroll:{
                duration: 1000
            },
      responsive: true,
      pagination: "#pager",
      synchronise:'.text-slider',
      items: {
        visible: 1
      }
    });
  });

  if( $('.top-slider .text-slider li').length > 1 ) {
    $('.top-slider .text-slider').carouFredSel({
      auto: true,
      responsive: true,
	  scroll:{
                duration: 1000
            },
      items: {
        visible: 1
      }
    });
  }

After you edit that code, you will have a rotating slider. Also, i have some modification guide about the code i have here. If you check the code, i have a 1000 as duration value. This value is on milliseconds, so 1000 means 10 seconds.

10 seconds is the waiting time before the slider is move to another slide item

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s