Page 1 of 1

auto slider on the home page

PostPosted: 24 Mar 2019, 04:06
by marco78
hi
in classic and atlas the photo slider on the main page has the( auto scroll ) function , that means the carousel control is working on auto by default , while in basis theme which is more advanced theme the auto function is not available and the slider is on manual so it is not so useful to be on the main page because i have noticed that clients are not interested to click right or left to see the rest of the photos , i really wish if you can provide us with the needed code and where to change it in the script so the slider will look so powerful adv tools like in atlas or in classic .
thanks a lot

Re: auto slider on the home page

PostPosted: 25 Mar 2019, 14:23
by andipas
Hi!
In the file themes/atlas/views/site/_slider_homepage.php

change slider settings in code:
Code: Select all

            
var jssor_1_options = {
              
$AutoPlaytrue,
              
$SlideDuration1000,
              
$Idle2000,
              
$SlideEasing$Jease$.$OutQuint,
              
$ArrowNavigatorOptions: {
                
$Class$JssorArrowNavigator$
              },
              
$BulletNavigatorOptions: {
                
$Class$JssorBulletNavigator$
              }
            };
 

Re: auto slider on the home page

PostPosted: 25 Mar 2019, 23:30
by marco78
hi
i am talking about basis not about atlas

Re: auto slider on the home page

PostPosted: 26 Mar 2019, 16:32
by andipas
marco78 wrote:hi
i am talking about basis not about atlas


in the file themes\basis\assets\js\slick-slider-init-ltr.js

code
Code: Select all
function initWideSlider(container) {
    
/***************************************************************
     * Initialize sliders on the frontpage
     * See http://kenwheeler.github.io/slick/ for more options
     ==============================================================*/
    
var $wideBanner = $(container);
    if (!
$wideBanner.length) return;
    var 
$wideBannerSlider $wideBanner.find('.js-slick-slider');
    
$wideBannerSlider
        
.slick({
            
rtlfalse,
            
dotsfalse,
            
infinitetrue,
            
speed300,
            
slidesToShow1,
            
lazyLoad'progressive',
            
prevArrow$wideBanner.find('.js-banner-prev'),
            
nextArrow$wideBanner.find('.js-banner-next'),
            
responsive: [
                {
                    
breakpoint1300,
                    
settings: {
                        
centerModefalse,
                        
variableWidthfalse,
                        
arrowstrue
                    
}
                }
            ]
        });
    
$wideBannerSlider.on('setPosition', function (eventslick) {
        
$wideBanner.addClass('slider--init');
    });
}

$(
document).ready(function () {
    
initWideSlider('#slider-wide');
});