auto slider on the home page

[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

[andipas]

Hi!
In the file themes/atlas/views/site/_slider_homepage.php

change slider settings in code:

Code: Select all


            var jssor_1_options = {
              $AutoPlay: true,
              $SlideDuration: 1000,
              $Idle: 2000,
              $SlideEasing: $Jease$.$OutQuint,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              }
            };
 

[marco78]

hi
i am talking about basis not about atlas

[andipas]

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({
            rtl: false,
            dots: false,
            infinite: true,
            speed: 300,
            slidesToShow: 1,
            lazyLoad: 'progressive',
            prevArrow: $wideBanner.find('.js-banner-prev'),
            nextArrow: $wideBanner.find('.js-banner-next'),
            responsive: [
                {
                    breakpoint: 1300,
                    settings: {
                        centerMode: false,
                        variableWidth: false,
                        arrows: true
                    }
                }
            ]
        });
    $wideBannerSlider.on('setPosition', function (event, slick) {
        $wideBanner.addClass('slider--init');
    });
}

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