<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Слайдер Juicy Slider на весь экран</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="/assets/css/bootstrap.css" rel="stylesheet" /> <link href="/design/adaptive-slider/2014/juicy-slider/juicyslider-min.css" rel="stylesheet" /> <script src="/design/adaptive-slider/2014/juicy-slider/jquery-1.10.2.js"></script> <script src="/assets/js/bootstrap.min.js"></script> <script src="/design/adaptive-slider/2014/juicy-slider/jquery-ui.min.js"></script> <script src="/design/adaptive-slider/2014/juicy-slider/juicyslider-min.js"></script> </head> <body> <div id="myslider" class="juicyslider"> <ul> <li><img src="//atmpl.ru/design/adaptive-slider/2014/juicy-slider/juicy-slider-1.jpg" alt="Слайд 1"></li> <li><img src="//atmpl.ru/design/adaptive-slider/2014/juicy-slider/juicy-slider-2.jpg" alt="Слайд 2"></li> <li><img src="//atmpl.ru/design/adaptive-slider/2014/juicy-slider/juicy-slider-3.jpg" alt="Слайд 3"></li> <li><img src="//atmpl.ru/design/adaptive-slider/2014/juicy-slider/juicy-slider-4.jpg" alt="Слайд 4"></li> <li><img src="//atmpl.ru/design/adaptive-slider/2014/juicy-slider/juicy-slider-5.jpg" alt="Слайд 5"></li> </ul> <div class="mask"></div> </div> <div class="container"> <div class="row text-center"> <h1>Слайдер Juicy Slider на весь экран</h1> <p>При таких настройках слайдер будет занимать всю свободную область экрана.</p> </div> </div> <script> $(function() { $('#myslider').juicyslider({ mask: "strip", width: '100%', height: null, autoplay: 5000, show: {effect: 'puff', duration: 5000}, hide: {effect: 'puff', duration: 3000}, }); }); </script> </body> </html>