Slowing down index.html image slider

thequanger
Offline
Last seen: 10 months 3 weeks ago
Thu, 09/29/2016 - 00:29
#1
Slowing down index.html image slider

Hi, where can I go to slow the transition between each image on the landing page?

linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 month 5 days ago
Thu, 09/29/2016 - 10:23

Hi Thequanger,

You want to say go to slow the transition image slider on the link page:

http://envato.megadrupal.com/html/ambrosia/index-onepage.html

In index.html page, i don't see image slider box.

Can you give a more specific description?

Thank's!

thequanger
Offline
Last seen: 10 months 3 weeks ago
Fri, 09/30/2016 - 00:03

I'm sorry, I meant the top 3 image sliders.

thequanger
Offline
Last seen: 10 months 3 weeks ago
Fri, 09/30/2016 - 00:07

I would like to slow the transition from slide 1 and 2 and 3.

linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 month 5 days ago
Fri, 09/30/2016 - 01:03

Hi Thequanger,

You open script.js file in js folder and find text: bxslider

Below the bxslider, you see line speed: 1200 and you change number up.

1200ms = 1.2s

Source code in script.js your file:

/*==============================
Home slider
==============================*/
if ($('.home-slider').length) {
var slider = $('.home-slider').bxSlider({
mode: 'fade',
auto: true,
speed: 1200,
slideMargin: 0,
pager: true,
controls: false,
prevText: '<i class="fa fa-angle-double-left"></i>',
nextText: '<i class="fa fa-angle-double-right"></i>',
onSliderLoad: function(currentIndex) {
$('.home-slider').children().eq(currentIndex).addClass('active-slide');
},
onSlideBefore: function($slideElement, newIndex){
$('.home-slider').children().removeClass('active-slide');
$slideElement.addClass('active-slide');
}
});


// custom slider img
var background = $('.home-slider').data('background');
$('.home-slider li img')
.before(function () {
var srcImg = $(this).attr('src');
return '<div class="item-img ' + background + '" style="background-image: url(' + srcImg + ')">';
});
$('.home-slider')
.find('.image-wrap')
.append('<div class="awe-overlay overlay-default"></div>');
}

thequanger
Offline
Last seen: 10 months 3 weeks ago
Fri, 09/30/2016 - 05:49

Thank you.  Resolved.

Log in or register to post comments