Poszukiwałam niedawno pilnie rotatora banerów. Potrzebowałam czegoś co będzie spełniać określone przez klientkę wymagania i da się zainstalować w aplikacji bez problemów. Siłą rzeczy stawiałam na jQuery bo lubię a w dodatku już zostało wykorzystane w aplikacji a ja nie chcę mnożyć bytów ponad potrzebę.
Cierpliwość się opłaciła. Znalazłam narzędzie, które spełnia wszystkie moje oczekiwania. Slick oferuje tyle opcji, że będę mogła sobie przy jego pomocy tworzyć rotatory jakie tylko będzie mi się podobało.
Na początek automatyczny rotator, któregopotrzebowała moja klientka. Szereg banerów reklamowych, które automatycznie przesuwają się w pasku.
Na początek dołączamy skrypty do aplikacji w sekcji head:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="slick/slick.min.js"></script>
Potem tworzymy pasek slidera:
<div class="your-class"> <div>your content</div> <div>your content</div> <div>your content</div> <div>your content</div> </div>
A na koniec uruchamiamy rotarot
$('.your-class').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
});
Cała sztuka polega na tym, żeby odpowiednio ustawić parametry. Powyżej mamy: wyświetlanie 3 banerów na raz, przesuwanie po jednym banerze. przesuwanie automatyczne, szybkość przesuwania 2000ms i wyłączone strzałki nawigacji.
Wszystkie możliwe opcje można znaleźć wraz ze zgrabnym opisem na stronie projektu Slick.
Miłego używania.