Ciao a tutti, vorrei chiedere il vostro aiuto riguardo a questa modifica che voglio apportare al mio sito web.
Attualmente è presente una singola immagine (in homepage) che resta fissa.
Quello che vorrei fare è inserire 3 immagini che scorrono automaticamente.
Questo è il codice presente nel file index.html:
codice:
<div id="wrapper-content">
<div id="page-wrapper">
<div class="main-content">
<div class="content">
<section class="page-banner-transparent homepage-01 home-slider home-financial">
<div class="page-banner banner-06">
<div class="container">
<div class="content-wrapper">
<h4 class="subtitle">BEST FINANCAL SOLUTION</h4>
<h1 class="title">Your text here</h1>
</div>
</div>
</div>
</section>
E questo è il codice presente nel file main.js
codice:
SLZ.bannerSlider = function() {enquire.register("screen and (min-width:769px)", function() {
$('section.homepage-01, section.homepage-02, section.homepage-03').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 1500,
arrows: true,
dots: false,
autoplay: true,
autoplaySpeed: 5000,
useTransform: false,
pauseOnHover: false,
pauseOnFocus: false,
draggable: false,
fade: true,
responsive: [{
breakpoint: 769,
settings: "unslick"
}]
});
}).register("screen and (max-width:768px)", function() {
setTimeout(function() {
$('.page-banner').removeAttr('style');
}, 100);
});
};
Ho provato ad inserire "2" al posto di "1" nel codice:
codice:
slidesToShow: 1,
slidesToScroll: 1,
, ma il risultato è stato che nella homepage, invece che visualizzare una singola immagine, ne vengono visualizzate due, una in parte all'altra.
Ringrazio anticipatamente chiunque saprà aiutarmi.